7 manieren om je website direct sneller te maken

Allereerst moet je precies weten hoe snel of langzaam je website eigenlijk is. We hebben al vastgesteld dat 2-3 seconden het streefdoel is. Helaas halen de meeste websites dat niet. Sterker nog, Google onderzocht honderdduizenden landingspagina’s in 126 landen en ontdekte dat 70% van de pagina’s tot wel zeven seconden nodig heeft om te laden.

Auw.

Dat is triest. Het slechte nieuws is dat miljoenen online marketeers letterlijk geld laten liggen. Veel geld. Als ze wisten hoeveel, zouden ze waarschijnlijk huilen. Het goede nieuws is dat het niet heel moeilijk hoeft te zijn om je website uit deze put te trekken en bij die sites te krijgen die onder de drie seconden laden.

Hoe weet je hoe snel jouw website daadwerkelijk laadt? Bezoek de Pingdom tester – het is gratis – en voer je URL in. Na een paar seconden (of langer) krijg je alle details. Dan is het tijd om de handen uit de mouwen te steken.

#1 Maak je server blij met minder HTTP-verzoeken

Die magere stukjes tekst op je website zijn nauwelijks een belasting voor de browser van je bezoeker. Wat voor knelpunten en vertragingen zorgt, zijn alle andere elementen zoals scripts, afbeeldingen, video’s en stylesheets. Voor elk van dit soort elementen die op een pagina verschijnen, wordt een apart verzoek naar de server gestuurd om het te downloaden. Webdesigners maken vaak de fout om simpelweg te veel “spullen” op een webpagina te zetten. Zonder het te beseffen verbruiken ze zo ontzettend veel bandbreedte en komen ze uiteindelijk terecht in de 70% van websites die meer dan vier seconden nodig hebben om te laden.

Denk je nu: ik moet HTTP-verzoeken verminderen? Dan heb je helemaal gelijk! Zo simpel is het. Minder HTTP-serververzoeken betekent, als de rest gelijk blijft, een snellere website. Dit betekent ook dat je echt goed moet nadenken over de elementen op je website en of ze er wel moeten zijn. Elk element zorgt namelijk voor een apart serververzoek.

Benieuwd hoeveel verzoeken jouw website momenteel maakt? Duik in de Pingdom-resultaten en je vindt het antwoord. Wat is te veel? Daar is geen harde regel voor. Analyseer je site en bepaal per element of het echt nodig is. Zo niet, verwijder het.

#2 Optimaliseer die bandbreedte-vretende afbeeldingen

In de begindagen van het internet kwamen afbeeldingen nauwelijks voor en was tekst de baas. Nu de technologie verder is, vooral qua internetsnelheid, hebben webbeheerders de neiging om los te gaan met afbeeldingen. Goed gedaan is dat geen slecht idee. Niets trekt de aandacht van een bezoeker zo als een aantrekkelijke afbeelding (palmboom of puppy’s doen het altijd goed).

Het nadeel is dat foto’s van twee veelgebruikte bronnen – smartphonecamera’s en online beeldbanken – vaak enkele megabytes groot zijn en bandbreedte verslinden als een koekjesmonster op zaterdagavond. Plaats je er een paar in tientallen of honderden berichten, dan wordt je website tergend traag.

Gelukkig is dit eenvoudig op te lossen. Gebruik een grafisch programma zoals Photoshop of Pixlr (een gratis online alternatief), als je geen honderden euro’s aan software wil uitgeven. Werk je met grote afbeeldingen, sla ze dan bij voorkeur op in het .jpeg (.jpg) formaat en probeer de resolutie terug te brengen tot 100 kilobyte of kleiner. Er zijn hele boeken volgeschreven over beeldresolutie, maar voor nu geldt: maak je afbeeldingen kleiner voor een snellere website.

#3 Browser caching = blije terugkerende bezoekers

Als de server het aangeeft, kunnen de meeste browsers veelgebruikte bestanden “cachen” of opslaan in tijdelijk geheugen tot ze opnieuw nodig zijn. Het werkt als volgt:

• Een bezoeker komt voor het eerst op je website.
• De server zegt tegen de browser dat bepaalde statische elementen (zoals logo’s, afbeeldingen en tekst) onthouden moeten worden.
• Wanneer de bezoeker terugkomt, worden deze gecachte elementen direct getoond – tot grote tevredenheid van de bezoeker.

De browser laat dus snel statische elementen zien zonder iets van de server te hoeven downloaden. Dynamische (veranderende) elementen vereisen wel een serververzoek om de nieuwste versie op te halen, wat iets langer duurt.

Het mooie – en waar bezoekers blij van worden – is dat ze in elk geval direct iets zien terwijl de dynamische onderdelen nog worden geladen. Iets op het scherm is beter dan een groot wit vlak met een zandlopertje. De kans is groter dat je bezoeker blijft hangen tot alles geladen is. Klinkt “browser caching” je als abracadabra? Bel gerust de technische dienst van je webhost en laat het voor je instellen.

#4. Comprimeer je website

Online vind je uiteenlopende schattingen, maar onderaan de streep geldt: bij een niet-gecomprimeerde website kun je het totale bestand met 50-90% verkleinen dankzij het wonder van Gzip. Kleinere bestanden hebben minder bandbreedte nodig en laden sneller. Gzip is een open-source formaat dat al je websitebestanden netjes comprimeert.

Wanneer een browser je website opvraagt, ontvangt die een bestand als index.html.gz in plaats van het traditionele index.html. Eenmaal aangekomen, pakt de browser dat pakketje razendsnel uit en toont het aan je bezoeker.

Een goed voorbeeld van hoeveel je bespaart: de Yahoo-homepage is ongecomprimeerd 101 kb, maar gecomprimeerd slechts 10 kb groot. Ja, Gzip kan hetzelfde voor jouw website doen.

Je kunt een browser niet dwingen om de gecomprimeerde versie te nemen in plaats van de ongecomprimeerde, maar je kunt de server zo instellen dat beide opties worden aangeboden. Voor iemand die vaak met servers werkt, is dit eenvoudig. Is dat niet jouw ding? Bel dan opnieuw met de technische dienst van je webhost.

#5. Optimaliseer eerst de CSS

Optimaliseren is niet alleen voor afbeeldingen. CSS (cascading style sheets) kun je ook aanpakken. Kijk eens naar een CSS-bestand. Je ziet veel code, maar waarschijnlijk ook veel witruimte. Stylesheets zijn belangrijk – onderschat ze niet – maar ze hoeven er niet mooi uit te zien voor het menselijk oog.

Bekijk het CSS-voorbeeld hieronder. Het ziet er netjes uit, met uitgelijnde tekst die de browser vertelt hoe de pagina eruit moet zien. Maar let op alle witruimte. Elk leeg stukje maakt het bestand groter. Als dat honderden of duizenden keren voorkomt, wordt het bestand onnodig groot. Het goede nieuws: je hoeft dat niet handmatig op te schonen.

Er zijn handige online tools zoals de gratis CSS Minifier, die standaard CSS zoals dit…

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

…verandert in dit:

p.uppercase{text-transform:uppercase}p.lowercase{text-transform:lowercase}p.capitalize{text-transform:capitalize}

Alles wordt samengeperst zodat er geen ruimte verloren gaat. Als je een snelle website wilt, telt echt elk beetje.

#6 Als je je website zou kunnen vouwen…

Af en toe leert het internet iets van de papieren media, en de term “below the fold” is daar een mooi voorbeeld van. Denk aan een stapel kranten in het rek, waarbij je alleen de bovenste helft ziet waar de belangrijkste verhalen staan. Minder belangrijke dingen zitten onder de vouw.

Dit idee kun je goed toepassen op je HTML-indeling, vooral bij JavaScript (JS), wat de laadtijd van een pagina flink kan vertragen. Zet JS niet bovenaan, maar juist als laatste in het body-gedeelte. Zo laadt eerst de rest van de pagina, en heeft de bezoeker alvast afbeeldingen en tekst om naar te kijken voordat het script klaar is.

Anders blijft het scherm blanco tot JS volledig geladen is. Zo’n leeg scherm is een uitnodiging voor een ongeduldige bezoeker om weg te klikken. Zorg dus dat ze alvast iets te doen hebben tot de extra functionaliteit van JavaScript beschikbaar is. Zie je? Zelfs internetpioniers kunnen wat leren van de krantenwereld van de twintigste eeuw.

#7 Kies iets anders dan gedeelde webhosting

Of je nu een webshop hebt of een website gebruikt om je adviesbureau te promoten, het doel is hetzelfde: het moet snel laden. Potentiële klanten die moeten wachten tot de inhoud verschijnt, haken snel af. Wat vaak vergeten wordt, is dat juist het type webhosting een enorme invloed heeft op de laadsnelheid.

Gedeelde hosting is goedkoop (soms zelfs gratis), maar zelden de beste keuze. Het nadeel is dat de host te veel websites op één server zet en de prestaties daaronder lijden. Bandbreedte, opslag en verwerkingssnelheid zijn gedeelde middelen. Als één website te veel gebruikt, loopt de rest kans om traag te worden, vast te lopen of zelfs onbereikbaar te zijn.

Is je website meer dan alleen een hobby, dan is gedeelde hosting geen goede optie.

Een betere keuze voor je zakelijke website is, voor een paar euro per maand extra, dedicated hosting of Virtual Private Server-hosting. Daarmee heb je gegarandeerd toegang tot gereserveerde computerbronnen en hoef je je geen zorgen te maken over wat je ‘buren’ doen – want die heb je niet.

Bovendien krijg je bij managed Virtual Private Server (VPS) hosting extra ondersteuning van je hostingprovider, vergeleken met unmanaged hosting.

Voor elke mkb’er die serieus met zijn online aanwezigheid bezig is, raden we aan om alternatieven voor gedeelde hosting te onderzoeken.

Klinkt dit allemaal te technisch? Overweeg dan een websitebouwer van een derde partij. Met deze apps bouw je eenvoudig een website met drag-and-drop. Ze zijn niet alleen kostenefficiënt, maar de hosting wordt helemaal voor je geregeld. Websites die hier worden gehost laden vaak sneller dan op je eigen server. Zo kun jij je richten op waar je goed in bent: content maken en je websiteverkeer laten groeien.

Tot slot

Om even uit te zoomen: zorgvuldig plannen is het allerbelangrijkste bij het bouwen van een website. Kies zorgvuldig welke elementen je toevoegt. Is elk onderdeel echt noodzakelijk? Kies lichte (kleine bestandsgrootte) thema’s en goed gecodeerde en gecontroleerde plugins . Ontwerp dus vanaf het begin op snelheid. Zo voorkom je dat je later moet gaan sleutelen aan een traag, bandbreedte-vretend gevaarte.

Eén ding is zeker: nu internetgebruikers steeds veeleisender worden – vooral op het gebied van streaming audio, video en interactieve functies – zal de bestandsgrootte alleen maar toenemen. Dat betekent dat ondernemers alert moeten blijven op afnemende snelheid. Test regelmatig en blijf zoeken naar manieren om je website steeds weer te optimaliseren, zodat hij altijd presteert als die perfect afgestelde machine die je voor ogen hebt.