Je kunt nog zo’n mooie webapplicatie hebben, een trage website is killing. Killing voor je eindgebruikers, maar het kost je ook punten binnen de zoekmachines. Beide zou je te vriend moeten willen houden en dat kan. In dit blog geven we je een aantal tips and tricks om de snelheid van jouw website een boost te geven. Let’s step on the gas!
Wist je dat? Uit onderzoek blijkt dat bezoekers verwachten dat de website binnen twee tellen is geladen. Sterker nog, 25% verlaat je website als het langer dan 4 seconden duurt, voordat de pagina volledig geladen is (bron).
Maar ook zoekmachines straffen een trage website af. Om boven te komen drijven op een SERP (Search Engine Result Page) loont het de moeite om je snelheid goed in de gaten te houden.
1. First thing: Analyseer
Meten is weten! Om te kunnen verbeteren is het handig en verstandig om te weten waar je nu staat. Analyseer daarom eerst de huidige performance, we noemen het de 0-meting.
Core Web Vitals
Als je een analyse van je website gaat maken, of dat nu als 0-meting is of bij de tiende keer, dan is er een aantal vaste metrics die je terug wilt zien. We beginnen met de 6 zogeheten core web vitals:
LCP (Largest Contentful paint)
Meet hoe lang het duurt voordat content geladen wordt. Hierbij zijn afbeeldingen, video en tekst belangrijk. Bij een goed presterende website duurt het maximaal 2.5 seconden voordat deze content volledig geladen is.
FID (First Input Delay)
Meet hoe lang het duurt voordat je interactie, zoals scrollen of klikken, kan hebben met de website. Je wil hierbij onder de 100 milliseconde scoren.
CLS (Cumulative Layout Shift)
Meet of er een onverwachte layout shift plaatsvindt, doordat bijvoorbeeld een afbeelding langzaam laadt waardoor de opmaak verspringt. Je wilt hierbij onder 0.1 seconden zitten.
Dan zijn er ook nog 3 zogeheten page experience metrics:
- Mobile-friendliness
De trend is nog altijd dat meer en meer verkeer afkomstig is van mobiele apparaten. Daarom worden de core web vitals ook gemeten voor een gebruiker die met een mobile device je website bezoekt. Vooral voor de jongere doelgroepen (Gen Z, Millenials en Gen X) is het belangrijk hiervoor te optimaliseren.
- Security
Meet de mate van veiligheid en betrouwbaarheid van een website. Je wil in ieder geval zorgen dat je gebruik maakt van HTTPS (end-to-end encryptie van internetverkeer) en dus ook het welbekende slotje in de URL balk (SSL certificaat) hebt staan. Heb je dat niet dan toont de browser een pagina waarop staat dat je website onveilig is. Er is namelijk kans voor hackers om zich voor te doen als jouw website en een ‘man in the middle attack’ uit te voeren.
- No interstitial webpage
De metric controleert of er geen externe pagina’s geladen worden bij het bezoeken van de website, waarbij content van de website geblokkeerd wordt. Hierbij gaat het vaak om pop-ups van adverteerders. Wil je toch aandacht trekken van gebruikers, zoals het inschrijven voor een nieuwsbrief? Maak dan gebruik van bescheiden banners, pop-ups of sliders. No go’s zijn het redirecten naar aparte pagina’s of opdringerige advertenties die de hele pagina in beslag nemen.
Webtoegankelijkheid is de zevende metric
Tot slot is er wat ons betreft nog een zevende core web vital die je niet over het hoofd mag zien en dat is webtoegankelijkheid. Je wil namelijk ook dat mensen met een functiebeperking een goede gebruikservaring hebben. Deze groep is groter dan je wellicht denkt, zo’n 20-25% van de Nederlanders heeft hier baat bij (bron).
Een bijkomend voordeel van de aandacht die je besteedt aan toegankelijkheid is dat crawlers je website goed kunnen interpreteren en dat is belangrijk voor je SEO score. Ook kan je je website WCAG laten certificeren, dit is voor verschillende instanties inmiddels een verplichting. Meer details over webtoegankelijkheid vind je in dit artikel.
Handige Tools
De onderstaande tools helpen je bij het in in kaart brengen van je prestaties op de core web vitals:
- Webvitals Chrome plugin
- Google Page Speed Insights
- Dotcom tools
- Webpagetest.org
- Ben je developer? Dan maak je gebruik van Google Lighthouse
Tip: Maak screenshots of exporteer de resultaten nadat je de test hebt uitgevoerd. Nadat je verbeteringen hebt geïmplementeerd kan je dan mooi de impact kwantificeren.
Wees je bewust van het feit dat serverlocatie van de tools uitmaakt voor de nauwkeurigheid van de resultaten. Bij de wat geavanceerdere tools kun je server locaties kiezen. Dit geeft je dus ook de kans om de statistieken te bekijken als je doelgroep geografisch verspreid zit en je hosting op een bepaalde locatie zit.
2. Bepaal je Doelen & Prioriteer
Het is onmogelijk en vaak ook niet nodig om op alle aspecten uit de analyse uitmuntend te scoren. Bovendien heb je waarschijnlijk ook beperkte tijd en budget om in verbeteringen te steken. Wees daarom pragmatisch en richt je op de zaken die voor jouw specifieke doelgroep belangrijk zijn. Denk hierbij aan web versus mobiel, geografische locaties en stappen in een bepaalde funnel die echt snel moeten zijn.
Richtlijnen
Nu je weet waar je goed en minder goed op scoort en je doelen hebt bepaald, kan je gericht gaan optimaliseren. De kans is groot dat een van de onderstaande zaken in meer of mindere mate terugkomt uit de test(s) om te verbeteren. Hierbij geven we je wat richtlijnen en tips om te optimaliseren.
- Beperk bestandsgrootte door middel van compressie. Tinypng is bijvoorbeeld een handige tool, analyseer hier hoeveel mb’s winst je kan pakken.
- Kies logische en lichtgewicht bestandsformaten. Voor afbeeldingen kies je bijvoorbeeld webp, svg of png.
- Gebruik web-fonts. Check google fonts en maak gebruik van variable fonts om tot jouw favoriete design te komen.
- Laad je pagina asynchroon. Geef content die direct in het zicht zit prioriteit en zet de minder belangrijke content in de wachtrij middels ‘lazy loading’.
- Overweeg het Accelerated Mobile Pages framework te gebruiken, doordat je de content statisch maakt laad je website razendsnel op mobile devices.
- Doe zo min mogelijk HTTP requests.
- Minimaliseer 3rd party scripts.
- Minimaliseer het gebruik van plug-ins door kritisch te zijn of ze echt waarde toevoegen.
- Implementeer een slimme cache policy.
- Overweeg om gebruik te maken van content delivery networks, zeker als je internationaal uitbreidt. Wij komen Cloudflare, Akamai, Azure CDN en Amazon CloudFront vaak tegen.
- Kies voor een betrouwbare en snelle hosting partij. Mocht je veel internationale bezoekers hebben, zorg er dan voor dat je gebruik maakt van caching die qua locatie dicht bij je bezoekers zit (edge-caching).
- Breng je codebase op orde en schrijf nette code.
- Gebruik performance monitoring tools. Je website snel houden vergt regelmatig aandacht. Het is dus verstandig om het ieder geval om de zoveel tijd te meten.
3. Meet je Impact en Rapporteer
Het harde werk zit erop! Om te bekijken hoeveel impact je gemaakt hebt en of je toch nog wat puntjes op de i moet zetten doe je dezelfde tests uit de stap “Analyseer”. De uitkomsten kan je mooi naast de resultaten uit de 0-meting leggen en in een rapportage verwerken. Kers op de taart is je successen en leerpunten presenteren aan je collega’s.
