Trage website? Pagespeed is belangrijker dan je denkt

Bedrijven spelen veel aandacht aan het ontwerp van hun site. Want alles moet er mooi uitzien. Daarom voegen ze maar al te graag grote, imposerende foto’s toe, sliders, interactieve elementen enz. Maar die gaan vaak ten koste van de laadsnelheid.

Waarom is een trage website nadelig?

Je wacht niet graag? Bezoekers ook niet. Een trage website zorgt voor heel wat frustraties. Bovendien kan het jouw zichtbaarheid in de zoekresultaten schaden.

Snelle websites zorgen voor meer conversies

Websites die traag laden zullen heel wat klanten mislopen. Twee of drie seconden wachten voordat een pagina verschijnt is meestal geen probleem, maar wanneer dit stijgt tot 5 seconden of langer zullen veel bezoekers afhaken.

Uit een onderzoek van Brand Perfect blijkt dat twee derde (67%) van de Engelse consumenten een trage laadsnelheid aanhaalt als reden om een online shop te verlaten. Op basis van deze informatie reduceerde Phil Dixon van Shopzilla de laadtijd van zijn site van ~7 seconden naar ~2 seconden. Dit resulteerde in een stijging van 25% van het aantal pageviews, 12% meer omzet en 50% minder hardwarekosten.

Dit voorbeeld toont aan dat de optimalisatie van de laadsnelheid een win-win situatie is. Het zorgt voor een hogere omzet en een verlaging van de operationele kosten.

Google houdt van snelle websites

De snelheid van een site heeft niet alleen een invloed op de omzet en kosten, maar ook op de positie in de zoekresultaten. In april 2010 kondigde Google aan dat het site speed heeft opgenomen in haar algoritme. Een trage site heeft dus een negatieve invloed op je zoekmachine optimalisatie.

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users.

Laadsnelheid meten

Is jouw website traag of niet? Dat valt moeilijk te zeggen. Want op jouw laptop laadt een pagina misschien heel vlot, terwijl die op een smartphone veel langer nodig heeft.

Gelukkig bestaan er allerlei tools om de laadsnelheid te meten. Dit zijn enkele van mijn favorieten:

Tip: Google Chrome heeft een ingebouwde tool om een snelheid van een pagina te testen, genaamd Lighthouse. Klik met je rechter muisknop in een pagina, selecteer ‘inspecteren’ en ga naar het tabblad ‘audits’. Daar genereer je een rapport om de pagespeed te analyseren.

Jouw trage website versnellen

Bovenstaande tools geven enkele suggesties om een trage website sneller te maken. De kans is groot dat een van onderstaande aanpassingen terugkomt:

Afbeeldingen optimaliseren

Afbeeldingen hebben een grote invloed op de laadsnelheid van een pagina. Vooral de kwaliteit ervan. Sommige foto’s bevatten zoveel details dat ze al gauw de kaap van 1 MB bereiken. Op trage mobiele netwerken is dat een probleem. Gelukkig zijn er een aantal manieren om de grootte van afbeeldingen te verkleinen, zoals compressor.io.

Gebruik geen grotere afbeelding dan je nodig hebt. Sommige webmasters implementeren een afbeelding en verkleinen deze met behulp van een stukje HTML code naar een kleiner formaat. Bijvoorbeeld een foto van 1920 x 1080 pixels die getoond wordt als 640 x 360 pixels. Bij het laden van de pagina wordt de originele afbeelding gedownload. Het is efficiënter om meteen de kleinere afbeelding te gebruiken. 

Caching

De meeste websites bevatten bestanden die zelden veranderen (CSS bestanden, Javascript bestanden, afbeeldingen, etc.). Maar je moet ze opnieuw downloaden telkens je de site bezoekt. Elke download vraagt tijd, met een slechtere laadsnelheid tot gevolg. Bovendien wordt er onnodig bandbreedte verspilt.

Browser caching is een oplossing voor dit probleem. Met behulp van caching worden deze bestanden door een webbrowser lokaal opgeslagen. In plaats van het bestand opnieuw te downloaden bij elk bezoek, verwijst men naar de lokale kopie. Caching zorgt dus niet alleen voor een betere laadtijd maar het neemt ook minder bandbreedte in beslag (wat voor sommige bedrijven een verlaging van de hostingkosten met zich meebrengt).

Hosting

Een factor die veel webmasters vergeten: de hosting provider van een website. Een kleine blog kan perfect op shared hosting, maar een webshop die maandelijks miljoenen bezoekers ontvangt heeft grotere noden.

Houd ook rekening met plotselinge pieken – bijvoorbeeld tijdens online solden – en stem jouw hosting hierop af.

Tenslotte speelt de locatie een rol. Een server huren in de Verenigde Staten is geen goed idee als 99% van je klanten zich in België bevinden.

Minify CSS en Javascript

CSS en Javascript bestanden bevatten een hele reeks onnodige tekens. Deze extra informatie maakt het bestand groter en verhoogt de laadtijd. Dankzij een minify script worden comments, onnodige witregels en overbodige tekens uit de CSS en Javascript bestanden verwijderd.

Daarnaast is het een goed idee om CSS/Javascript bestanden te combineren. Omdat er slechts een bestand gedownload wordt, wordt het aantal http-requests (een download van de hostingserver naar de bezoeker) beperkt.

GZIP compressie

Compressie wordt al jaar en dag gebruikt om grote bestanden uit te wisselen. ZIP, RAR, TAR … bestanden besparen heel wat kilobytes.

Dezelfde compressietechniek bestaat online. GZIP compressie verkleint de bestandsgrootte drastisch. Ter illustratie; het index.html bestand van Yahoo gaat dankzij GZIP compressie van 101kb naar 15kb.