Het belang van pagespeed, oftewel de tijd die een webpagina nodig heeft om te laden, wordt al jaren benadrukt. Google zelf pleit al sinds 2009 voor sneller internet, maar gaf er zelf niet veel gevolg aan. Dit aandachtspunt werd dan ook vaak op de lange baan geschoven. De laatste jaren wordt een te trage laadtijd van je website echter een steeds groter probleem. Voor zowel zoekmachine optimalisatie als de customer experience; de verwachtingen van gebruikers nemen enkel maar toe. Daarnaast wordt de laadsnelheid van websites op mobiele devices steeds belangrijker. Helemaal sinds de uitrol van Mobile First Indexing is aangekondigd (en uitgesteld naar begin 2021 vanwege de coronacrisis). Het aantal mobiele zoekopdrachten blijft namelijk stijgen en de behoefte naar snel internet op mobiel groeit.
Wat is pagespeed precies?
Pagespeed bedraagt de tijd die een webpagina nodig heeft om te laden. Deze laadsnelheid hangt af van tal van factoren, zoals de server, de paginaopbouw en afbeeldingen.
Er zijn verschillende manieren om pagespeed te meten:
- First Contentful Paint: FCP meet hoelang het duurt voordat de browser het eerste deel content weergeeft nadat een gebruiker naar je webpagina is genavigeerd.
- First Meaningful Paint: FMP meet wanneer de primaire inhoud van een pagina zichtbaar is voor de gebruiker.
- Time to Interactive: TTI met hoelang het duurt voordat een pagina volledig interactief wordt.
- Largest Contentful Paint: LCP meet de weergavetijd van het grootste beeld of tekstblok dat zichtbaar is.
- Cumulative Layout Shift: CLS meet de betekenis van onverwachte layoutverschuivingen op een pagina. Onverwachte layoutverschuivingen treden op wanneer inhoud op de pagina beweegt zonder invoer van de gebruiker of voorafgaande kennisgeving.
Waarom pagespeed belangrijk is
Pagespeed is een belangrijke factor voor zoekmachine optimalisatie. In 2018 kondigde Google aan dat het klaar was om over te gaan tot mobile first indexing. Dit betekent dat de mobiele versie van webpagina’s de basis vormt voor indexering en ranking. Een trage website heeft dus een negatieve invloed op rankings in Google. De laadsnelheid van een webpagina heeft echter ook impact op de customer experience en kan leiden tot hogere bounce rates en een kortere gemiddelde sessieduur. Dit heeft vervolgens weer een negatieve invloed hebben op de aankoopbeslissing die gebruikers moeten maken en uiteindelijke conversies. Maar liefst 70% van de consumenten geeft aan dat pagespeed van invloed is op hun bereidheid om een aankoop te doen via een webwinkel. Ook uit de prestatiegegevens van Google blijkt dat zelfs de kleinste fractie van een seconde de focus van de klant en de kans op interactie kan veranderen.
Onderzoek uit 2019 van Google in Denemarken toont aan dat consumenten gemiddeld 10% meer bereid waren om een webshop aan te bevelen als de laadtijd terug werd gebracht van 13 naar 10 seconden. Een verdere afname in laadtijd, van 10 naar 3 seconden, leverde een geschatte stijging van 26% op. In andere woorden: door het optimaliseren van de snelheid van websites kan de loyaliteit van gebruikers en de bijbehorende inkomsten aanzienlijk vergroot worden.
Mobile
Deloitte en 55 the data company voerden ook een onderzoek uit naar pagespeed, enkel dan specifiek met betrekking tot mobiele devices. In een periode van 4 weken hebben ze de mobiele sitegegevens van 37 merken in detailhandel, reizen, luxe en leadgeneratie in Europa en de VS geanalyseerd. De resultaten toonden aan dat een wijziging van 0,1 seconde in laadtijd elke stap van de customer journey kan beïnvloeden waardoor de conversieratio’s stijgen. Voor retail sites stegen de conversies met 8% en voor reissites met 10%. Verder gaven consumenten in retail 10% meer uit, terwijl klanten voor leadgeneratie en luxe meer interacteerden met de website; het aantal pageviews nam met respectievelijk 7% en 8% toe. Dit bewijst dat het optimaliseren van de pagespeed relatief snel invloed kan hebben op de resultaten van je website.
Pagespeed meten
Er bestaan verschillende tools om de pagespeed van jouw website te meten. De meest bekende is waarschijnlijk Google PageSpeed Insights. Deze tool analyseert de content van een webpagina op zowel mobiel als desktop en genereert vervolgens suggesties om de pagina sneller te maken. Het resultaat wordt uitgedrukt in een score van 0 tot 100. Daarbij moet wel gezegd worden dat de tool enkele gebreken kent. De focus ligt namelijk niet alleen op snelheid, maar ook op gebruikerservaring. Als je een 100/100-score hebt in deze tool, betekent dit dus niet dat je website ook daadwerkelijk heel snel is. Omgekeerd geldt hetzelfde: een snelle website hoeft niet per se een 100/100-score te hebben in PageSpeed Insights.
Een andere populaire tool om de laadsnelheid van een webpagina te meten is Pingdom. Deze performancemonitoring tool voor webpagina’s is ontwikkeld door een software-development team in Zweden. Met Pingdom kan de performance van een website uit zes verschillende locaties worden gemeten. De tool houdt per webpagina een grafiek bij met meetwaardes. Als een performancetest wordt uitgevoerd, wordt er op basis van de gegevens van die pagina een score berekend in de vorm van een getal tussen de 0 en 100. In vergelijking met Google PageSpeed Insights is Pingdom aanzienlijk uitgebreider; je kunt er veel meer bruikbare data uit halen. Daarnaast geeft Pingdom een meer objectieve analyse van de website. Je kunt zelf conclusies trekken uit de resultaten.
Een andere tool die vaak gebruikt wordt om de snelheid van een pagina te bepalen en te verbeteren is GTMetrix. Je pagina wordt op 30 punten beoordeeld. De resultaten worden uitgedrukt in page load time, total page size, een Google PageSpeed Insights score en een Yslow score. Laatstgenoemde is ontwikkeld door Yahoo en controleert naast de inhoud ook verschillende technische factoren van de webpagina. Het voordeel van deze tool is dus dat je gelijk ook de resultaten en suggesties ter verbetering van andere, vergelijkbare tools ziet.
Hoe optimaliseer je de pagespeed?
Er zijn tal van factoren die invloed hebben op de pagespeed van je website. Daarom hebben wij de vijf meest voorkomende problemen en oplossingen in kaart gebracht.
Caching van statische bestanden
Statische bestanden, zoals afbeeldingen, HTML, CSS en JavaScript vormen de kern van elke website. Samen zorgen ze ervoor dat pagina’s er goed worden weergeven en goed functioneren. In het geval dat er geen gebruik wordt gemaakt van browser caching, hebben ze snel negatief effect op de pagespeed van pagina’s. Door gebruik te maken van caching, worden bij een websitebezoek bestanden zoals afbeeldingen, HTML, CSS en JavaScript opgeslagen in een lokale cache. Als gevolg treden er minder vertragingen op bij het laden van pagina’s. In andere woorden: de website laadt sneller.
Afbeeldingen optimaliseren
Afbeeldingen zijn relatief zware bestanden die ingeladen worden op een webpagina. Het is dus verstandig om deze altijd te optimaliseren. Dit kun je doen door de betreffende afbeelding te comprimeren, oftewel de bestandsgrootte te verkleinen zonder dat de kwaliteit achteruitgaat. Hier zijn meerdere tools voor beschikbaar, zoals tinyjpg.com of compressor.io.
Afbeeldingen in WebP formaat
Anno 2020 zijn er betere alternatieven voor afbeeldingen dan een standaard JPEG of PNG-bestand. Zo bestaat er bijvoorbeeld WebP, ontwikkeld door Google. Dit format maakt afbeeldingen gemiddeld 39% kleiner dan JPEG, 45% kleiner dan PNG en tot 64% kleiner dan animated GIF. WebP wordt door de meeste browsers ondersteunt, maar het kan voorkomen dat niet iedere gebruiker de afbeelding direct kan inladen. In dat geval is het verstandig om voor niet ondersteunde browsers een fallback optie in te bouwen, zodat een alternatieve variant (in JPEG of PNG-formaat) kan worden ingeladen.
Minification
Minification betekent het verwijderen van onnodige delen uit de HTML, CSS en JavaScript. Denk bijvoorbeeld aan witruimtes en onnodige regels. Verder maakt het bestanden compacter. Het is aan te raden om hiervoor een automatisch minify systeem te gebruiken. Deze minified bestanden zodra ze zijn aangepast, waardoor zoekmachines altijd de geoptimaliseerde versie kunnen crawlen. Er zijn verschillende tools beschikbaar om code te minifyen, bijvoorbeeld HTML minify en CSS & JS minify.
Asynchroon inladen
Het komt vaak voor dat er regels script aanwezig zijn op een website, die de gebruiker niet direct nodig heeft. Met het asynchroon inladen van JavaScript zorg je ervoor dat je scripts met een lagere prioriteit op een later moment inlaadt. Het device van de gebruiker kan vervolgens eerst de meest essentiële bestanden inladen.
Meer weten?
Heb je bovenstaande opties al geprobeerd, maar heb je nog steeds niet het gewenste resultaat? Of wil je meer weten over het optimaliseren van de pagespeed van jouw website? Wij denken graag met je mee. Neem contact met ons op.
