Vizien
Door december 21, 2022 10 min

7 Tips om je Largest Contentful Paint (LCP) in WordPress te verbeteren

Sinds mei 2021 maken de Core Web Vitals deel uit van Google’s ranking factors. Niet gek, aangezien Google al jaren verkondigt dat snelheid een enorme rol speelt in de gebruikerservaring van een website. Hoe sneller des te beter de ervaring. Zo ontdekte Amazon in 2006 al dat een 100ms langere laadtijd hen 1% aan omzet kost. En dat een vertraging van 500ms leidt tot een afname van 20% aan organisch verkeer.

Wat zijn Core Web Vitals?

Om de Core Web Vitals te kunnen verbeteren, wil je natuurlijk eerst weten wat die precies zijn. Er zijn diverse “web vitals” die de snelheid en de gebruikerservaring van een site beïnvloeden. Google heeft er 3 gedefinieerd die (momenteel) een rol spelen in hun algoritme:

  • Largest Contentful Paint (LCP)
    LCP is de tijd gemeten van het laden van een pagina totdat het grootste element in de viewport is geladen. Meestal een afbeelding of een groot tekstblok. Een goede LCP moet gebeuren binnen 2.5 seconden vanaf het laden van een pagina.
  • First Input Delay (FID)
    FID is de tijd gemeten vanaf het moment dat een gebruiker voor het eerst interacteert met een pagina, tot de tijd dat een browser daadwerkelijk die interactie af kan handelen. Een goede FID moet 100ms of lager zijn.
  • Cumulative Layout Shift (CLS)
    CLS is een gecumuleerde score gebaseerd op elementen die verschuiven tijdens het laden van een pagina. Een goede CLS heeft een score van 0.1 of lager.
Core Web Vitals

Bron: https://web.dev/vitals/

LCP in WordPress

De Largest Contentful Paint is in praktijk meestal een afbeelding die hoog bovenaan de pagina wordt getoond. Denk bijvoorbeeld aan de hero op je homepage, de featured image van een blog, de productafbeelding op een Woocommerce productpagina of een sfeerafbeelding voor een pagina over een dienst die je aanbiedt. Om de LCP in WordPress te verbeteren, dien je dus (meestal) de eerste afbeelding op een pagina te verbeteren. Het kiezen van het juiste bestandsformaat en het bijsnijden van een afbeelding in de juiste afmetingen kan daar al snel bij helpen.

Er zijn enkele scenario’s waarin Google moeite heeft met het berekenen van een LCP:

  • Het LCP element wordt dynamisch in de pagina geinjecteerd (bijvoorbeeld door JavaScript)
  • Het LCP element wordt ge-lazy-load met JavaScript waarbij het src of srcset attribuut van een <img> element wordt verborgen
  • Het LCP element heeft een background-image nodig

Kortom, als je de LCP van je WordPress website wilt verbeteren, zorg je er dus voor dat er een <img> element bovenaan de pagina wordt geladen. En dat dit element in de HTML aanwezig is, zonder gebruik van JavaScript.

Het LCP element op je pagina vinden

  • Ga naar de pagina die je wilt verbeteren
  • Open Chrome Devtools (F12) in incognito venster (ingeschakelde extensies kunnen impact hebben op scores)
  • Run Lighthouse report voor mobile device (Mobile-first, remember 😉 )
  • Als het rapport eenmaal is geladen, scroll je naar beneden in de resultaten totdat je “Large Contentful Paint element” ziet onder “Diagnostics”. Als je daarop klikt, zie je wat het LCP element is.

Tip: Gebruik de Core Web Vitals Visualizer Chrome extensie om eenvoudig alle elementen te ontdekken.

Core Web Vitals Visualizer

 

7 Tips om de LCP in WordPress te verbeteren

Nu je weet wat LCP is en welk element in je WordPress site je moet verbeteren, is het tijd om alle tips een voor een door te lopen.

In de volgende stappen gebruiken we https://www.vizien.nl/2022/alles-over-domeinnamen-email-en-hosting/ als voorbeeld. Momenteel krijgt deze pagina een Pagespeed score van 52/100 op een mobiel device. De LCP is 13.7 seconden. Er is dus nog veel te verbeteren.

Lighthouse score voor optimalisatie

Bron: Lighthouse

1. Installeer en configureer WP Rocket

Draait je website op WordPress, dan haal je al snel veel verbetering door het installeren en configureren van WP Rocket. Met deze plugin schakel je onder andere caching in, verklein je CSS- en JavaScriptbestanden en kun je scripts deferren. Omdat het laden van scripts en CSS een impact heeft op de laadtijd, maar ook op de LCP, hoort deze tip gewoon op nummer 1. Maak je dus nog geen gebruik van WP Rocket (of een andere caching plugin), dan is dat de eerste stap die je moet maken om je laadtijd en de LCP van je WordPress site te verbeteren.

WP Rocket

Bron: https://wp-rocket.me/

2. Kies het juiste bestandsformaat

Het verbeteren van de LCP betekent dus dat je de laadtijd van dat element verbeterd. Als je LCP (waarschijnlijk) een afbeelding is, zorg er eerst voor het juiste bestandsformaat:

  • Foto = JPG
  • Tekening = PNG (vaak minder kleuren, óf transparantie)

Tip: Als je afbeelding transparantie bevat, moet je je afvragen of dat persé nodig is. Transparante elementen in een afbeelding kunnen een grote impact hebben op de bestandsgrootte.

De afbeelding in onze LCP is momenteel een JPG en is 261kb groot, met een resolutie van 1920x1280px:

Omdat het een foto betreft, is .jpg het meest geschikte bestandsformaat. Stel we hadden gekozen voor een .png, dan was de bestandsgrootte als snel 1.8MB (!) geweest.

3. Comprimeer de afbeelding

Als je een afbeelding in bijvoorbeeld Photoshop bewerkt en vervolgens als JPG opslaat, kun je de “kwaliteit” van de afbeelding bepalen. Zoals je waarschijnlijk al aan kunt voelen, heeft een afbeelding met de hoogste kwaliteit ook de grootste bestandsgrootte. Hoe lager de kwaliteit, hoe kleiner de bestandsgrootte. Maar, ga je te laag, dan ga je dit ook zien in de afbeelding zelf. Speel hier dus mee. Ik kies doorgaans voor een kwaliteit van 6.

Als je de afbeelding eenmaal hebt opgeslagen, ben je er nog niet. Er zijn namelijk online diverse tools die de afbeelding (zonder kwaliteitsverlies) nog verder kunnen comprimeren. Een tool die ik veel gebruik is TinyPNG.

TinyPNG

Bron: Tinypng.com

Door de afbeelding via deze tool te comprimeren, bespaar ik nu al snel 47% in bestandsgrootte. Dat is enorm! Heb jij deze stap nog niet doorlopen voor jouw afbeeldingen? Dan kun je in een paar simpele klikken al snel veel winst boeken.

4. Maak gebruik van <img> scrset en sizes

Vanaf WordPress 4.4 worden alle afbeeldingen voorzien van een srcset en sizes attribuut:

  • srcset: met dit attribuut kun je een lijst met verschillende afbeeldingsformaten definiëren op basis van de gekozen afbeelding.
  • sizes: met dit attribuut bepaal je de gebruikte afbeelding per viewport breedte.

Als jouw LCP afbeelding in WordPress geen srcset of sizes attribuut bevat, wordt dus standaard één formaat geladen voor alle devices. In praktijk betekent dat meestal een te grote afbeelding voor mobiele devices. Met onderstaande code zorg je er bijvoorbeeld voor dat jouw featured image is voorzien van de srcset en sizes attributen:

<img src="<?php echo wp_get_attachment_image_url( $attachment_id, 'large' ); ?>" srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'large' ); ?>" sizes="<?php echo wp_get_attachment_image_sizes( $attachment_id, 'large' ); ?>" />

Een simpele oplossing dus, waarmee je al snel wat KB’s per foto mee kunt winnen. Let er wel op dat je bovenstaande code per foto zult moeten implementeren.

5. Lazy-load de LCP afbeelding niet

Lazy-loaden van afbeeldingen is een prima oplossing om een pagina snel te laden. Afbeeldingen buiten de viewport worden namelijk later geladen, wanneer de betreffende afbeelding in de viewport komt. Vooral op pagina’s met veel afbeeldingen scheelt dat al snel flink wat laadtijd.

Er is echter één uitzondering. Als je eerste afbeelding meteen in de viewport zit bij het laden van de pagina, moet je deze niet lazy-loaden. Het lazy-loaden van de LCP afbeelding zorgt ervoor dat de eerste afbeelding later geladen wordt. Dat komt omdat JavaScript dat later geladen wordt, dan zelfs voorrang krijgt op de ge-lazy-loadde afbeelding. En dat gaat dus weer ten koste van de LCP. Zie https://web.dev/lcp-lazy-loading/ voor meer uitleg.

6. Fetchpriority = high

Zodra een browser een webpagina rendert en deze verschillende resources (afbeeldingen, scripts, CSS, etc.) ontdekt, geeft de browser een prioriteit aan alle deze resources. Hoe hoger de prioriteit, des te eerder de resource wordt geladen. De prioriteit wordt aan de hand van verschillende factoren bepaald, waaronder het type resource, of waar de resource zich precies bevindt in de webpagina.

Fetchpriority

Bron: https://addyosmani.com/blog/fetch-priority/

Om browsers een handje te helpen zijn “Priority Hints” in het leven geroepen. Door middel van het attribuut ‘fetchpriority’ kun je een resource een prioriteit (high of low) meegeven. Het toevoegen van het attribuut “fetchpriority=high” aan je LCP afbeelding kan ervoor zorgen dat deze sneller wordt geladen. In sommige gevallen kan dit leiden tot een verbetering van 20 tot 30%.

In onderstaande code zie je hoe wij onze featured image deze priority hint geven:

<img fetchpriority="high" src="https://www.vizien.nl/wp-content/uploads/2022/12/programmer-is-browsing-internet-smart-phone-protect-cyber-security-from-hacker-attacks-save-clients-confidential-data-padlock-hologram-icons-typing-hands.jpg" srcset="https://www.vizien.nl/wp-content/uploads/2022/12/programmer-is-browsing-internet-smart-phone-protect-cyber-security-from-hacker-attacks-save-clients-confidential-data-padlock-hologram-icons-typing-hands.jpg 1920w, https://www.vizien.nl/wp-content/uploads/2022/12/programmer-is-browsing-internet-smart-phone-protect-cyber-security-from-hacker-attacks-save-clients-confidential-data-padlock-hologram-icons-typing-hands-450x300.jpg 450w, https://www.vizien.nl/wp-content/uploads/2022/12/programmer-is-browsing-internet-smart-phone-protect-cyber-security-from-hacker-attacks-save-clients-confidential-data-padlock-hologram-icons-typing-hands-768x512.jpg 768w, https://www.vizien.nl/wp-content/uploads/2022/12/programmer-is-browsing-internet-smart-phone-protect-cyber-security-from-hacker-attacks-save-clients-confidential-data-padlock-hologram-icons-typing-hands-1024x682.jpg 1024w" alt="Alles over domeinnamen, email en hosting">

7. Preload de LCP afbeelding

De laatste tip om de LCP van je WordPress pagina te verbeteren doen we door middel van preloading. Het preloaden van resources zorgt ervoor dat de browser de kritieke resources al begint te downloaden, voordat hij deze tegenkomt in de HTML. Zeker wanneer je je LCP wilt verbeteren, is het preloaden van de LCP afbeelding een absolute must.

Preloaden van de LCP afbeelding

Bron: https://addyosmani.com/blog/preload-hero-images/

Het preloaden van een resource gebeurt door het toevoegen van een <link> element aan de <head> van een pagina. Voor een afbeelding ziet de code er zo uit:

<link rel="preload" as="image" href="afbeelding.jpg">

In WordPress doen we dat voor ons blog door een stukje code toe te voegen aan de functions.php. We haken in op de ‘wp_head’ hook, waardoor we code toe kunnen voegen aan de <head> van onze pagina. Dat doen we door middel van onderstaande code:

add_action( 'wp_head', function(){
  if (is_singular( 'post' )) {
    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
    $feat_image_srcset = wp_get_attachment_image_srcset( get_post_thumbnail_id( get_the_ID() ));
    if ($featured_img_url) {
      echo '<link rel="preload" as="image" href="'.$featured_img_url.'" imagesrcset="'.$feat_image_srcset.'"/>';
    }
  }
});

Conclusie

Als je alle bovenstaande stappen hebt doorlopen, is het tijd om weer een Lighthouse report te draaien. De overall Pagespeed score zou moeten verbeteren, maar belangrijker (althans voor dit artikel), de LCP moet flink naar beneden.

Lighthouse score na optimalisatie

Bron: Lighthouse

Zoals je ziet, is de snelheid van onze pagina flink verbeterd. De Pagespeed score is verbeterd van 52/100 naar 92/100. En de LCP is verbeterd van 13.7s naar 2.4s. Genoeg dus om (bijna) alles groen te krijgen. Uiteraard is dit altijd een momentopname, dus in praktijk kunnen er kleine verschillen zijn in de totale Pagespeed score en de andere CWV metrics.

Wil jij dit ook voor jouw WordPress website? Dan kun je zelf bovenstaande stappen doorlopen. Kom je er niet uit? Schakel dan mij of een van onze specialisten in. We helpen je graag!


Koffietje?

Ben jij op zoek naar een zoekmachine marketingbureau dat wél waarmaakt wat ze zeggen? Dan ben jij onze klant. Zin om samen te werken? Wij maken graag kennis met jou en je bedrijf.

Neem contact op
Lois Hoos, Commercieel officemanager
Lois Hoos Commercieel officemanager