Het Netvlies team overlegt over Core Web Vitals.

Core Web Vitals: wat is het en hoe ga je ermee aan de slag (praktische tips)

Een nieuwe Google Update.

Core web Vitals

De term Core Web Vitals is in 2020 door Google geïntroduceerd. De Core Web Vitals zijn in principe 3 kenmerken die Google als kern kenmerken van gebruiksvriendelijkheid websites beschouwt. In dit blog leg ik uit wat dit inhoudt en geef ik praktische tips om ermee aan de slag te gaan.

Medewerkers van Netvlies geven elkaar tips over core web vitals.

Google laadsnelheid tools

Google heeft nooit onder stoelen of banken geschoven de gebruiksvriendelijkheid van een website erg belangrijk te vinden. Terecht. Gebruikers moeten een zo optimaal mogelijke ervaring krijgen. Daarom heeft Google een aantal jaar geleden onder meer de PageSpeed Score tool ontwikkeld. De tool geeft je website een score, inclusief technische adviezen om de score - en daarmee de laadsnelheid van je website - te verbeteren. Zo spoort Google websites al een aantal jaar actief aan om zich meer bezig te houden met de gebruiksvriendelijkheid. 
Let op! De PageSpeed Score is een indicatie. Staar je niet blind op deze score en kijk naar de daadwerkelijk laadtijd en verbeterpunten. De score staat ook niet vast en kan van dag tot dag veranderen. Terwijl je niets aan je website hebt aangepast. Zo is bijvoorbeeld de weging van de metrics een belangrijke factor. Deze kan in de loop van de tijd veranderen en is afhankelijk van wat Google zelf bestempelt als belangrijk. 

Gebruiksvriendelijkheid als ranking factor

Logischerwijs heeft Google van gebruiksvriendelijkheid een officiële ranking factor gemaakt onder het mom van ‘Core Web Vitals’: de, in Google’s ogen, kern kenmerken voor een goede gebruiksvriendelijkheid. Er zijn een groot aantal kenmerken van gebruiksvriendelijkheid. Denk aan mobielvriendelijkheid, veiligheid van een website en de eerder genoemde laadsnelheid. De Core Web Vitals hebben betrekking op 3 kern kenmerken die te maken hebben met de laadsnelheid:
  1. Laadtijd
  2. Interactivity
  3. Visuele stabiliteit
Onderstaand een overzicht met alle kenmerken voor een goede gebruiksvriendelijkheid en welke Google onder de Core Web Vitals plaatst.Visuele weergave van de kenmerken van goede gebruiksvriendelijkheid en core web vitals.

Laadtijd

Laadtijd draait om het inladen van de ‘Largest Contentful Paint’. Met andere woorden: hoe snel is de belangrijkste content ingeladen? Hierbij gaat het vooral om de belangrijkste content op een pagina, zoals hoofdtitel, tekst, afbeeldingen en belangrijke call-to-actions, boven de vouw. 

Interactiviteit

Interactiviteit draait om de ‘First Input Delay’: hoe snel reageert de pagina op acties van de bezoeker? Stel je klikt op een button om naar de volgende pagina te gaan. Hoe snel reageert de pagina op dit verzoek? Word je direct doorgestuurd of duurt dit een paar seconden?

Visuele stabiliteit

Hierbij gaat het om de ‘Cumulative Layout Shifts’: hoe stabiel is de website na het inladen van de belangrijkste content? Stel een pagina is - zo lijkt het - volledig ingeladen en je wilt op een button klikken. Wat gebeurt er dan? Verschuift de knop of de layout rondom de knop door het traag laden van bepaalde elementen - zoals een grote afbeelding - ergens op de pagina? Laatst kwam ik op Twitter een filmpje tegen van een medewerker van Google. Dit filmpje geeft heel goed weer wat met visuele stabiliteit wordt bedoeld en waarom Google het zo belangrijk vindt.

Leuk dat ik dit weet, maar waar moet ik beginnen?

Google PageSpeed Insights en Google Chrome Lighthouse geven in hun rapportages verbetermogelijkheden per Core Web Vital onderdeel. De onderdelen worden letterlijk benoemd in het PageSpeed rapport.Visueel voorbeeld van de resultaten van Google PageSpeed Met deze rapportages kan je goed achterhalen hoe je scoort op de Core Web Vital elementen. Bovendien worden suggesties voor verbetering gegeven. Als je technische kennis hebt, kan je hier al veel belangrijke verbeterpunten uit halen en deze doorvoeren. Heb je geen technische kennis, dan help ik je in de rest van dit blog op weg met praktische tips om je score te verbeteren.  Disclaimer: de mate van verbetering hangt sterk af van de website, hoe deze is opgezet en welke techniek er achter hangt. Ook weten we niet of je website al is geoptimaliseerd op deze punten. Check altijd eerst hoe je scoort per punt. 

#1 Afbeeldingen optimaliseren

Afbeeldingen zijn een groot onderdeel van de content en daarmee vaak een grote boosdoener voor je score op de Largest Contentful paint. Dit kan je op verschillende manieren bekijken. Achtergrondafbeeldingen Achtergrondafbeeldingen zijn vrijwel nooit noodzakelijk in een design, maar kunnen de laadsnelheid wel enorm tegenwerken. Zorg dat de achtergrondafbeeldingen nooit te groot zijn en perfect aansluiten op elk type device. Op de website van Web.Dev vind je meer tips over responsieve afbeeldingen. Comprimeer daarnaast de achtergrondafbeelding. Hier zijn verschillende comprimatie tools voor. Afbeelding formaat optimaliseren Wat voor achtergrondafbeeldingen geldt, geldt ook voor de andere afbeeldingen op je website. Probeer afbeeldingen zo veel mogelijk responsive te implementeren en comprimeer een afbeelding als deze erg zwaar in geheugen is.  Let wel op: in tegenstelling tot achtergrondafbeeldingen kunnen front-end afbeeldingen een belangrijk onderdeel uitmaken van het design van de website. Zorg dat de afbeelding na comprimeren niet teveel in kwaliteit achteruit gaat. Sommige tools maken de kleuren in de afbeelding namelijk te dof.
Tip: Wil je snel weten welke afbeeldingen worden geladen op een pagina en hoeveel ruimte ze in beslag nemen? Ga naar de desbetreffende pagina in Google Chrome. Gebruik Ctrl+Shift+i, ga naar het tabje ‘Network’ en herlaad de pagina. Je krijgt een overzicht met alle elementen die worden geladen. In de kolom ‘Size’ kan je zien hoe zwaar een afbeelding is.
Andere file formats Google geeft in de PageSpeed Insight tool altijd het advies om de nieuwste afbeeldingsformaten, zoals jpeg2000 te gebruiken. Maar let op: deze nieuwe formats worden niet ondersteund door browsers als FireFox, Safari en Internet Explorer.  Er zijn ook andere mogelijkheden. Op dit moment gaat onze voorkeur uit naar WebP Images format. Dit format krijgt steeds meer draagvlak vanuit gebruikers en wordt inmiddels door bijna alle browsers. Een CMS ondersteunt vaak geen afbeelding formats anders dan .jpg en .png. Gelukkig beschikken steeds meer CMS’en over plugins die het wél mogelijk maken om afbeeldingen naar WebP om te zetten. Als dit niet beschikbaar is, kan een developer dit inbouwen. Op zoek naar een quick fix? Achterhaal welke afbeeldingen als .png zijn geplaatst en zet deze om naar .jpg. Het .jpg formaat is, als het aankomt op de laadsnelheid, over het algemeen beter dan .png. Implementeer Lazy Loading Het probleem bij het laden van een pagina is dat direct álle content wordt geladen, zowel boven als onder de vouw. Heb je veel content onder de vouw staan, dan kan dit gevolgen hebben voor het laden van de Largest Contentful Paint boven de vouw. Terwijl dit bij het binnenkomen op een pagina de content is die er toe doet.  Met Lazy loading los je dit probleem technisch op. In eerste instantie wordt alleen de belangrijke content boven de vouw geladen. Content lager op de pagina zal pas worden geladen als je hier naartoe scrollt. voorbeeld van lazy loading

#2 Code optimaliseren

Ook de code heeft invloed op de laadsnelheid van een pagina.  Scripts server side renderen Dit is een bijzonder punt. Als marketeer ontkom je er niet aan om scripts te gebruiken als Google Tag Manager, Hotjar en het Cookiebot script. Sterker nog: Google heeft graag dat je deze scripts gebruikt, omdat deze helpen je website te verbeteren. Toch zijn dit vaak de grootste veroorzakers van vertraging op je website en een slechte score, omdat ze een grote invloed hebben op de ‘time to interactive’.  Heb je veel scripts op je website staan, dan is het server side renderen van je scripts zeker aan te raden. Dit betekent dat je scripts niet direct op je website hoeven te staan en via de server worden opgehaald.  Onlangs schreef collega Jelmer een zeer uitgebreid en interessante blog over de impact van marketing scripts op de laadsnelheidJavaScript minimaliseren JavaScripts nemen vaak onnodig veel loze ruimte in beslag. Terwijl de scripts ook zonder deze ruimte goed functioneren. Daarom is het aan te raden de geïmplementeerde JavaScript te minimaliseren. Hier zijn verschillende JavaScript minifiers beschikbaar. Inline CSS Bij de ontwikkeling van een website is vaak veel haast geboden. Het komt daardoor regelmatig voor dat code niet inline geplaatst wordt. Zonde. Dit kan best wat verschil maken in de laadsnelheid van de website.  Het grote nadeel is dat het een tijdrovende klus is om de code inline te plaatsen en dat dit moeilijk in de praktijk te implementeren is. Vaak weegt de tijdsinvestering niet op tegen het resultaat. Vraag daarom niet aan een developer om alle CSS inline te plaatsen, maar vraag om de CSS die belangrijk is voor het design zoveel mogelijk inline te plaatsen. Denk aan grote elementen die op veel pagina’s boven de vouw terugkomen. 

#3 Server optimaliseren

Onderschat de waarde van een goede server niet. De snelheid van een server heeft namelijk veel effect op het laden van de Largest Contentful Paint en de First Input Delay.  Privé server Ondervind je sporadisch wat vertraging op je website? Dit kan komen doordat je website op een ‘gedeelde server’ met andere websites staat. Als een andere website die server overbelast, dan heb jij daar vaak ook last van. Mocht er budget voor zijn, raad ik altijd aan om je website op een privé server te zetten.  Content Delivery Network Als je website uit grote hoeveelheden zware content bestaat, zoals video’s en veel afbeeldingen, is het raadzaam een Content Delivery Network (CDN) te overwegen. Een CDN is een netwerk van wereldwijd verspreid servers die met elkaar in verbinding staan. Als je een CDN gebruikt, wordt je content via de server die het dichtst bij de eindgebruiker staat aangeboden. Hierdoor laad je content zo snel mogelijk. Dit kan veel laadtijd besparen bij zware bestanden.  Voorladen van de cache Cache plugins of scripts worden vaak gebruikt om de cache-opslag van een website te verbeteren of versnellen. Deze technieken werken vaak zo dat de eerste bezoeker van de website, na verloop van de cache-opslag periode, degene zal zijn die dit script of deze plugin zal triggeren. Deze bezoeker laad dan als eerste de content in voor de cache en zal een wat langere laadtijd hebben. De bezoeker offert zichzelf onbewust op voor de anderen die na hem volgen en heeft als enige een langere laadtijd. De volgende bezoekers krijgen de website te zien, ook al bekijken ze de website voor de eerste keer. Vaak krijgen Google Crawlers de website als eerste te zien. Zeker als de website nieuw is. Hierdoor ervaart de zoekmachine de website als onnodig traag. Om dit te voorkomen, is het raadzaam dat de cache al vooraf wordt geladen. Dit kan met verschillende scripts en plugins, zoals de WP Rocket voor WordPress websites.

Meer weten over Core Web Vitals?

Ik heb je een aantal algemene praktische tips gegeven. Kom je er niet aan uit of wil je meer tips gericht op jouw website? Neem contact op en ik help je op weg.