Google Core Web vitals Searchresult

Optimaliseren voor LCP – Web Vitals

Vanaf mei 2021 gaan de Web Vitals meetellen als een ranking factor voor Google. Voor je positie in de zoekmachines is het dus essentieel dat je een goede score behaalt op de verschillende Web Vitals. Maar hoe doe je dat? 

In deze artikelreeks nemen wij je mee in het optimaliseren van de Web Vitals. We leggen je stap voor stap uit hoe je je website optimaliseert om een goede score te behalen op de drie Web Vitals: LCP, FID en CLS. Ben je vergeten waar deze afkortingen ook alweer voor stonden? Lees dan eerst ons eerste artikel over de Core Web Vitals nog even terug.

Largest Contentful Paint verbeteren

Om een goede score te behalen voor deze Web Vital dient de Largest Contentful Paint plaats te vinden binnen 2.5 seconden nadat de pagina is begonnen met laden. Simpel gezegd is de Largest Contentful Paint (LCP) het meest prominente visuele onderdeel boven de fold van de pagina.  

De Largest Contentful Paint wordt voornamelijk beïnvloed door vier verschillende factoren: 

  1. Lange reactietijd van de server
  2. JavaScript en CSS die de weergave blokkeren
  3. Laadtijd van bronnen
  4. Client-side rendering

 

De score die je hebt voor de LCP en door welke factoren een trage LCP wordt veroorzaakt verschillen per website. Om hier meer inzicht in te krijgen, zijn er verschillende tools die je kunt gebruiken. Bijvoorbeeld: Webpagetest.orgPageSpeed Insights of Chrome Dev Tools. 

Deze tools geven je een indicatie van de onderdelen die nog verbeterd kunnen worden. Hieronder zullen wij je voor deze onderdelen uitleggen hoe je ze verbetert.

1. Lange reactietijd van de server

De volgende optimalisaties dragen bij aan een snellere reactietijd van de server: 

  • Richt caching in: met caching worden statische onderdelen van de webpagina lokaal opgeslagen in de browser. Als iemand jouw website al eerder bezocht heeft en deze nog een keer bezoekt, kunnen de lokaal opgeslagen bestanden direct worden geopend. Als caching wordt ingericht voor statische onderdelen hoeft de pagina niet helemaal opnieuw ingeladen te worden en zal de laadtijd korter zijn.  

 

  • Maak gebruik van een CDN (Content Delivery Network): een CDN is een netwerk van servers die zijn verspreid over datacenters in de wereld. Een CDN zorgt ervoor dat je website meer verkeer aankan en de laadtijden sneller zijn, omdat je gebruikers jouw website kunnen laden vanaf een server in de buurt. 

 

  • Optimaliseer je server: tenslotte kunnen er andere dingen gebeuren aan de serverkant die ervoor zorgen dat het lang duurt voordat de pagina geladen wordt. Voor meer informatie over het optimaliseren van je server kun je het artikel Fix an overloaded server van Google Developers lezen.

 

2. JavaScript en CSS die de weergave blokkeren

Het renderen van een webpagina is het veranderen van de HTML-code in de opgemaakte tekst en afbeeldingen die jij op de website ziet. Dit proces wordt gepauzeerd als de browser in de HTML externe stylesheets of synchrone JavaScript tags tegenkomt. Deze blokkeren het renderen tijdelijk en dat heeft invloed op je LCP.

Je kunt hier het volgende aan doen: 

  • Minify CSS en JavaScript: CSS en JavaScript-bestanden bevatten vaak extra spaties, opmerkingen, tekens e.d. om ze beter leesbaar te maken. Dat is handig voor de gebruiker, maar niet nodig voor de browser. Als je deze bestanden minified, verwijder je die onnodige tekens en dit zorgt ervoor dat CSS of JavaScript de weergave minder lang blokkeren. 

 

  • Stel niet-kritieke CSS en JavaScript uit of verwijder deze
      • CSS en JavaScript-bestanden die je helemaal niet meer gebruikt kunnen verwijderd worden.
      • CSS en JavaScript-bestanden die je op een specifieke pagina gebruikt, laat je enkel op de pagina’s waarop ze gebruikt worden laten inladen. 
      • Als de CSS niet nodig is voor het renderen van de pagina en ook later kan worden ingeladen, kun je deze CSS asynchroon laten inladen. 

 

  • Voeg kritieke CSS en JavaScript toe aan de head: het is belangrijk dat kritieke CSS en JavaScript die nodig is voor het weergeven van content boven de vouw zo snel mogelijk wordt ingeladen. Zorg er daarom voor dat deze CSS direct wordt toegevoegd aan de head. 

 

  • Stel GZIP-compressie in: met GZIP-compressie comprimeer je CSS, JavaScript en HTML op je website. 

 

  • WordPress thema’s en plugins: als je website draait op WordPress kunnen thema’s en plugins die je gebruikt ook invloed hebben op de laadtijd. Deze zorgen namelijk ook voor extra JavaScript en CSS-bestanden die moeten worden ingeladen. Het is daarom goed om te bekijken of je de thema’s en plugins die je hebt geïnstalleerd allemaal gebruikt en of ze nodig zijn. Of dat er wellicht een lichtere plugin is die dezelfde functie kan uitvoeren.

 

3. De laadtijd van bronnen

Ook afbeeldingen en video’s hebben invloed op de Largest Contentful Paint. Voor heel veel websites is een grote afbeelding het eerste element dat zichtbaar in beeld komt bij het laden van de pagina. Als het lang duurt om deze in te laden, heeft dat direct effect op de LCP. Je kunt de laadtijd van deze bronnen op de volgende manier verkorten:

  • Comprimeer afbeeldingen. We zien dat afbeeldingen vaak veel te groot worden geüpload naar de website. Dan krijg je al snel bestanden van 2 mb of meer. Dit kan de laadtijd van de afbeeldingen erg lang maken. Daarom is het belangrijk om het formaat van de afbeelding te verkleinen en de bestandsgrootte het liefst onder de 100 kb te houden. Daarnaast kun je de afbeeldingen ook nog comprimeren met een tool, zoals TinyPNG. Dit verkleint het bestandsformaat nog verder.

    Heb je al een heleboel afbeeldingen in je CMS staan en wil je deze verkleinen? Ook dat is mogelijk, via een API-koppeling. Dit kan bijvoorbeeld met TinyPNG of Shortpixel (WordPress).

 

  • Gebruik responsive afbeeldingen. Steeds meer mensen bekijken een website op een mobiel apparaat. Voor een mobiel apparaat hoeven afbeeldingen veel minder groot te zijn dan voor desktop. Zorg er daarom voor dat afbeeldingen responsive zijn en dat voor ieder apparaat het juiste formaat wordt ingeladen. 

 

  • Gebruik moderne afbeeldingsformaten, zoals WebP. WebP is een alternatief voor JPG en PNG en kan tot een verkleining van de bestandsgrootte leiden van wel 25-35%. Je kunt er meer over lezen in deze blog over WebP.

 

  • Maak gebruik van preloading. Het is belangrijk dat onderdelen van de pagina die het eerst in beeld komen zo snel mogelijk worden ingeladen. Dit geldt voor JavaScript en CSS, wat we hierboven al besproken hebben, maar kan ook gelden voor een afbeelding of video die boven de fold getoond wordt. Dit doe je door <link rel=”preload”> te gebruiken.Preload alleen de essentiële onderdelen die nodig zijn om de content “boven de fold” te renderen. Preloaden zorgt ervoor dat bronnen vooraan in de wachtrij komen. de wachtrij wordt er niet korter van.

4. Client Side Rendering

Als je een website hebt die voornamelijk Client Side Rendering gebruikt, kan dit een negatief effect hebben op de LCP. Er wordt dan voornamelijk JavaScript gebruikt om de pagina’s te renderen in de browser. Als deze JavaScript niet geoptimaliseerd is, kan dit ervoor zorgen dat websitebezoekers helemaal niets zien in de browser totdat alle JavaScript is ingeladen.

In dit geval is het goed om te bekijken of het mogelijk is om in plaats van Client Side Rendering Server Side Rendering te gebruiken. Wanneer dit niet mogelijk is, is het belangrijk om de JavaScript te optimaliseren, zoals onder punt 2 wordt besproken. In alle gevallen is het advies van Google om Server Side Rendering te gebruiken. In dit artikel kun je meer lezen over Server Side Rendering en Client Side Rendering. 

Zoals je leest zijn er genoeg acties die je kunt ondernemen om te optimaliseren voor LCP. Welke optimalisaties voor jouw website nodig zijn, kun je achterhalen door verschillende pagina’s van je website te testen met bijv. Pagespeed Insights of Chrome Dev Tools. Hulp nodig bij het optimaliseren voor Web Vitals? Wij helpen je graag! 

Benieuwd hoe wij jouw Web Vitals kunnen optimaliseren? Neem contact op!

Meer lezen van Searchresult? Schrijf je in voor de nieuwsbrief!

 

Bronnen die gebruikt zijn voor dit artikel: 

Karlijn
Karlijn Wever

SEO Specialist

karlijn@searchresult.nl