Maak je website nog sneller

Dat de laadsnelheid van een website belangrijk is voor onder meer de conversie, de traffic en de Google-ranking is bekend. Evenals de meeste basics die hiervoor nodig zijn. Op zowel desktop als mobiel. Maar wat kan je nog meer doen om een nog snellere site te krijgen? Workshop zet het voor je op een rij.

Weet jij waar het om gaat bij laadsnelheid?

Ja: Precies, hoe snel je pagina’s laden en dan met name de belangrijkste elementen (boven de vouw).

Nee: Schrik niet, het is niet alleen maar technisch.

Toelichting: Dat een snellere website fijn is voor gebruikers én Google is genoegzaam bekend. Hoe je die snelheid kunt opkrikken, is minder bekend. Ook omdat laadoptimalisatie geen exacte wetenschap is: een korte, kleinere paginatitel is goed voor je laadtijd maar misschien SEO-wise weer geen goed idee. Terwijl een grote kop weer de aandacht trekt, maar daarentegen (te) weinig ruimte laat voor andere relevante content ‘boven de vouw’, zeker op mobiel. Snelheid is dus geen doel op zich, maar één van de elementen van een succesvolle website.

Weet jij wat je te doen staat?

Ja: Bepalen hoe jouw site het nu doet en dan (laten) verbeteren, precies.

Nee: Gebruik bijvoorbeeld PageSpeed Insights van Google en analyseer met de volgende tips waar jouw verbeterpunten zitten.

Toelichting: De site van PageSpeed Insights vertelt je binnen enkele seconden drie dingen (na het invoeren van je URL): hoe je site het op de desktop doet, op mobiel én wat de gebruikerservaring is. Per onderdeel is de maximale score honderd, en Google geeft telkens aan wat de verbeterpunten zijn. De belangrijkste daarvan behandelen we in de volgende stappen.

En waar je moet kijken bij PageSpeed Insights?

Ja: Controleer dan de scores voor mobiel, desktop en gebruikerservaring en bepaal wie de verbetersuggesties moet oppakken (jij, techneut of…).

Nee: Lees de toelichting, zodat je weet waar je moet kijken en gepaste actie kunt ondernemen.

Toelichting: Als je een URL intikt op developers.google.com/speed/pagespeed/insights meet Google grofweg twee dingen: hoelang het duurt voordat de site ‘boven de vouw’ zichtbaar is, en hoelang voordat de hele pagina er is. Er wordt niet gekeken naar je internetverbinding, maar naar netwerkonafhankelijke aspecten. De belangrijkste zijn: HTML-structuur en externe resources (afbeeldingen, JavaScript en CSS). Per onderdeel wordt aangegeven of het goed is of beter kan. In de volgende stap lichten we deze aspecten verder toe.

Controle over de content?

Ja: Dat is de content die ‘in-house’ wordt gemaakt en onderhouden dus. Denk aan afbeeldingen, teksten en opmaak. Verbeterslagen wat snelheid betreft, zijn eenvoudig door te voeren, zie de toelichting.

Nee: Dat zijn veelal scripts van derden, bijvoorbeeld Analytics-code. Vooral JavaScript kan wat bytes en laadtijd betreft een showstopper zijn, zie verder.

Toelichting: Een andere tool naast Google is Webpagetest.org. Deze breekt je site in stukken en laat mooi zien uit welke onderdelen je pagina is opgebouwd (HTML, JavaScript, afbeeldingen etcetera). In twee taartdiagrammen zie je vervolgens wat elk onderdeel ‘weegt’ (in kilobytes) en hoeveel bewerkingen op de server het vergt. Die twee samen (aantal requests en ‘gewicht’) bepalen samen wat de invloed van een onderdeel op de totale paginasnelheid is.

Tijd voor actie?

Ja: Je snelheid kan dus omhoog, mooi zo. Lees hieronder hoe, het is de eerste stap naar een (nog) snellere website.

Nee: Je site is al retesnel, proficiat. Lees toch even verder voor de puntjes op de i.

Toelichting: Na het lezen van de samenvatting op Webpagetest.org (zie vorige stap) klik je op Performance-review om te (laten) zien waar de mogelijke verbeterpunten zitten. Hier wordt netjes opgesomd welke kansen je site biedt op het gebied van compressie van plaatjes en tekst, en browsercaching. In veel gevallen blijken plaatjes tachtig procent lichter te kunnen, zonder dat de beeldkwaliteit er minder van wordt. Stap met dit huiswerk naar je webmaster en vraag hem of haar deze punten op te pakken. Doe de test daarna opnieuw.

Wordt het je te technisch?

Ja: Een snellere site begint met keuzes maken. Keuzes die jij als website-eigenaar, webwinkelier of marketeer maakt, lees de toelichting maar.

Nee: Mooi zo, de tips hieronder zullen je dan nog verder helpen.

Toelichting: Affiliatelinkjes van bol.com en Google Analytics betekenen scripts van derden op je website. Denk goed na over de voordelen die deze partijen bieden, want je sitesnelheid wordt er door beïnvloed. En als je voor dit soort code kiest, laat je webmaster deze dan dusdanig plaatsen dat de laadtijd er zo min mogelijk van omhoog gaat. En die Facebook Like-button, moet die echt altijd het actuele aantal fans laten zien? Dat kost resources die misschien geen Like extra opleveren. Gebruik je boerenverstand en kijk nog eens kritisch naar de elementen van je site.

Op zoek naar nog meer snelheid?

Ja: Lees dan over de mogelijkheden van een CDN, als je bijvoorbeeld met WordPress werkt heb je hiervoor geen technische kennis nodig.

Nee: Ga door naar de volgende stap en lees in elk geval waarom snelheid echt belangrijk is.

Toelichting: Een CDN (content delivery network) slaat al jouw statische files (CSS, JavaScript, plaatjes en dergelijke) op en zorgt ervoor dat jouw bezoekers ze snel kunnen downloaden. Hoe? De CDN kijkt waar de bezoeker zich geografisch bevindt en kiest een server in zijn of haar buurt. Amazon biedt een eenvoudige oplossing op dit gebied die ook goed te gebruiken is voor WordPress-sites. Een stap voor stap instructie én extra tips voor meer snelheid vind je hier (Engels).

Overtuigd van het belang van snelheid?

Ja: Mooi zo. De infographic (zie link in toelichting) bewijst dat je gelijk hebt.

Nee: Bekijk de resultaten van Firefox en Walmart in de toelichting hieronder, wellicht opent dat alsnog je ogen.

Toelichting: Een langere laadtijd heeft meteen invloed op je conversie. Walmart en Firefox laten in deze infographic zien hoe groot de impact is. Een uitdaging voor elke site-owner die z’n geld online moet verdienen: bezoekers verwachten een steeds ‘rijkere’ website die nog eens snel laadt ook. Zo blijkt elke seconde snellere laadtijd te resulteren in twee procent meer conversie (bij Walmart). En levert een paar seconden sneller substantieel meer downloads op (Firefox).

*) Deze workshop werd eerder gepubliceerd in het februarinummer van Emerce magazine. (#137)