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.
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:
Bron: https://web.dev/vitals/
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:
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.
Tip: Gebruik de Core Web Vitals Visualizer Chrome extensie om eenvoudig alle elementen te ontdekken.
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.
Bron: Lighthouse
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.
Bron: https://wp-rocket.me/
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:
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.
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.
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.
Vanaf WordPress 4.4 worden alle afbeeldingen voorzien van een srcset en sizes attribuut:
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.
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.
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.
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">
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.
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.'"/>';
}
}
});
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.
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!
Witruimte is een van de meest onderschatte en verwaarloosde tools binnen design. Toch zal het je verbazen hoe belangrijk witruimte...
Webtoegankelijkheid is belangrijk. Het zorgt er namelijk voor dat jouw website bruikbaar wordt voor iedereen. Ook voor bezoekers die bijvoorbeeld...
Witruimte is een van de meest onderschatte en verwaarloosde tools binnen design. Toch zal het je verbazen hoe belangrijk witruimte...
Webtoegankelijkheid is belangrijk. Het zorgt er namelijk voor dat jouw website bruikbaar wordt voor iedereen. Ook voor bezoekers die bijvoorbeeld...
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
