Vind je het lastig om je Largest Contentful Paint op je website te verbeteren? Of weet je überhaupt niet wat Largest Contentful Paint betekent en waarom je je er druk over moet maken?
Welke ook op jou van toepassing is, dit artikel is voor jou geschreven. Hier ga je namelijk alles leren over wat je moet weten over Largest Contentful Paint.
Hieronder valt wat Largest Contentful Paint nou eigenlijk betekent, waarom het zo belangrijk is, hoe je het kunt meten, en natuurlijk hoe je het kunt verbeteren.
Je kunt de inhoudsopgave hieronder gebruiken om naar een specifieke sectie te springen op basis van je huidige kennisniveau. Of, blijf lezen om bij het begin te beginnen.
Wat is LCP (Largest Contentful Paint)? Uitleg over de betekenis van Largest Contentful Paint
Largest Contentful Paint is een prestatiestatistiek die meet hoe lang het duurt om de hoofdcontent van een webpagina te laden.
Largest Contentful Paint maakt deel uit van Google’s Core Web Vitals statistieken, samen met Cumulative Layout Shift (CLS) en First Input Delay (FID).
Op een meer technisch niveau meet Largest Contentful Paint hoe lang het duurt vanaf het moment dat de gebruiker de pagina laadt tot het grootste tekstblok, beeld of video binnen de viewport wordt weergegeven.
Wat betekent “hoofdcontent” in termen van LCP?
De hoofdcontent hangt af van de pagina in kwestie, maar het kan een van de volgende zijn:
- Tekst – specifiek alle elementen op blokniveau die tekstnodes of andere tekstelementen op inlineniveau bevatten.
- Afbeelding – elementen in een <img> element of <image> elementen in een <svg> element.
- Video – alle <video> elementen (deze gebruikt de posterafbeelding).
- Een element met een achtergrondafbeelding – alleen als het geladen wordt via de CSS url() functie (het geldt niet voor CSS gradients).
Later in dit artikel leer je hoe je het exacte Largest Contentful Paint element kunt vinden voor elke pagina op je site.
Largest Contentful Paint vs First Contentful Paint
Een veel voorkomende vraag is wat het verschil is tussen Largest Contentful Paint en First Contentful Paint, een andere veel voorkomende performance metric.
Hoewel de twee termen op elkaar lijken, is het belangrijkste verschil dat Largest Contentful Paint meet hoe lang het duurt voordat de “hoofdcontent” van de pagina is geladen, terwijl First Contentful Paint meet hoe lang het duurt voordat het “eerste object” is geladen (of dat nu de hoofdcontent is of niet).
Kortom:
- LCP = alleen hoofdcontent
- FCP = eerste stuk content, ongeacht wat die content is
Als zodanig zal je LCP tijd bijna altijd (iets) hoger zijn dan je FCP tijd, omdat het element “hoofdcontent” meestal niet als eerste wordt geladen.
Waarom is de Largest Contentful Paint tijd van je site van belang?
Er zijn twee belangrijke redenen waarom de Largest Contentful Paint tijden van je site van belang zijn:
- Gebruikerservaring
- Zoekmachineoptimalisatie
Gebruikerservaring
De grootste reden dat je je zorgen moet maken over de Largest Contentful Paint tijden van je site is dat deze statistiek een goede indicatie is voor het begrijpen van de ervaringen van je gebruikers wat betreft de prestaties van je site.
De meeste gebruikers geven er niet om hoe lang je website erover doet om elk script en element volledig te laden. In plaats daarvan gaat het hen erom hoe lang het duurt voordat ze waarde uit je website kunnen halen.
Largest Contentful Paint probeert dat “waarde” moment te meten door te kijken hoe lang het duurt voordat de belangrijkste content geladen is.
Als je je site optimaliseert voor een snelle Largest Contentful Paint tijd, kun je er dus vrij zeker van zijn dat je gebruikers een solide ervaring op je site biedt, tenminste als het gaat om de prestaties (je wilt natuurlijk ook een klantvriendelijk ontwerp en een goede bruikbaarheid).
Dat betekent natuurlijk niet dat je andere prestatiecijfers moet negeren. We raden altijd aan de prestaties en knelpunten van je site holistisch te bekijken, en daarom hebben we onze eigen applicatie performance monitoring (APM) tool gemaakt die gratis beschikbaar is als je Kinsta hosting gebruikt – Kinsta APM.
Zoekmachine optimalisatie (SEO)
Op het gebied van zoekmachineoptimalisatie maakt Largest Contentful Paint deel uit van Google’s trio van Core Web Vitals metrics, die Google begon te gebruiken als een SEO ranking factor in zijn 2022 Page Experience algoritme update.
Dit betekent dat het hebben van slechte Largest Contentful Paint tijden een rem kan zijn op de prestaties van je site in de zoekresultaten van Google.
Hoewel andere factoren zoals contentkwaliteit/relevantie en backlinks nog steeds een veel grotere rol spelen in waar je website rankt, is het belangrijk om de Largest Contentful Paint tijden van je site te optimaliseren om ervoor te zorgen dat je het meeste uit je SEO inspanningen haalt.
Wat kan de Largest Contentful Paint scores beïnvloeden?
Twee “belangrijke” soorten problemen kunnen de Largest Contentful Paint tijden van een pagina beïnvloeden:
- Hoe lang je server erover doet om te reageren met het initiële HTML document.
- Hoe lang het duurt om de eigenlijke LCP resource te laden.
Het eerste type probleem heeft te maken met de reactietijd van de server, oftewel de time to first byte (TTFB). Voordat de browser van een gebruiker zelfs maar kan denken aan het laden van de hoofdcontent, moet deze eerst een respons van de server krijgen.
Hier volgen enkele veel voorkomende problemen die hierop van invloed zijn:
- Niet gebruiken van paginacaching – het niet gebruiken van paginacaching dwingt de server meer “werk” te doen voordat hij kan reageren met het HTML document.
- Trage hosting – een trage hostingprovider zal altijd een trage TTFB hebben, wat je ook doet.
- Geen CDN gebruiken – een content delivery network (CDN) kan de TTFB versnellen door pagina’s vanuit zijn wereldwijde netwerk aan te bieden in plaats van gebruikers te vragen ze te downloaden van de origin server van je site.
Nadat de server van je site het initiële HTML document heeft afgeleverd, kunnen er nog meer knelpunten ontstaan bij het laden van het eigenlijke element met hoofdcontent.
Hier volgen enkele veel voorkomende problemen die hierop van invloed zijn:
- Render-blocking JavaScript of CSS (of ongeoptimaliseerde/onnodige code in het algemeen) – als de browser van de gebruiker onnodige JavaScript of CSS moet downloaden en/of verwerken voordat hij het hoofdelement kan laden, zal dat je LCP vertragen.
- Ongeoptimaliseerde afbeeldingen – als het LCP element een afbeelding is, zal het gebruik van ongeoptimaliseerde afbeeldingen je tijd vertragen omdat grotere afbeeldingen er langer over doen om te downloaden.
- Ongeoptimaliseerd laden van fonts – als het LCP element tekst is, kan het laden van custom fonts op een ongeoptimaliseerde manier ervoor zorgen dat het langer duurt voor die tekst verschijnt.
- Ongecomprimeerde bestanden – als je geen compressietechnologieën zoals Gzip of Brotli gebruikt, duurt het langer voor de browser van de gebruiker om de bestanden van je site te downloaden.
Afhankelijk van je site kun je knelpunten ervaren op beide gebieden of slechts op één van de gebieden. Hoe je al deze problemen kunt oplossen leer je verderop in dit artikel.
Wat is een goede tijd voor Largest Contentful Paint?
Google definieert een “goede” Largest Contentful Paint tijd als minder dan 2,5 seconden.
Als de Largest Contentful Paint tijd van je pagina tussen de 2,5 en 4,0 seconden ligt, classificeert Google die als “Needs Improvement”. En als de tijd van je pagina meer dan 4,0 seconden is, definieert Google dat als “Poor”.
Hier is een grafiek van Google die dit visueel laat zien:
Hoe meet je Largest Contentful Paint: beste LCP testtools
Er zijn een aantal tools die je kunt gebruiken om de prestaties van je site te testen op Largest Contentful Paint – laten we een paar van de nuttigste doornemen..
PageSpeed Insights
PageSpeed Insights is een van de beste tools voor het beoordelen van Largest Contentful Paint omdat het vier nuttige stukjes informatie biedt:
- Je kunt de Largest Contentful Paint tijden van je site bekijken met echte gebruikers uit het Chrome UX rapport (als je site genoeg verkeer heeft om in het rapport te worden opgenomen).
- Je kunt gesimuleerde tests uitvoeren om te zien hoe je site presteert.
- Google vertelt je het daadwerkelijke LCP element dat het gebruikt voor de test, waardoor je weet welk element je moet optimaliseren.
- Google geeft suggesties over hoe je je LCP tijd kunt verbeteren.
Dit is hoe je het kunt gebruiken:
- Ga naar de PageSpeed Insights website.
- Voer de URL in van de pagina die je wilt testen.
- Klik op Analyze.
Google toont je dan resultaten voor zowel mobiel als desktop – zorg ervoor dat je beide controleert.
Om het hoofdelement te vinden dat Google gebruikt om LCP te berekenen, kun je naar beneden scrollen naar de sectie Diagnostics en het Largest Contentful Paint element uitklappen:
Nogmaals, zorg ervoor dat je zowel mobiel als desktop controleert, omdat het LCP element voor elk verschillend kan zijn.
Chrome Developer Tools
Je kunt Largest Contentful Paint time ook rechtstreeks testen vanuit Chrome Developer Tools met behulp van het Performance tabblad of de Lighthouse audit feature. We raden aan het tabblad Performance te gebruiken omdat je dan meer informatie krijgt.
Hier zie je hoe je moet beginnen:
- Open de pagina die je wilt testen.
- Open Chrome Developer Tools.
- Ga naar het tabblad Performance.
- Zorg ervoor dat het vakje Web Vitals is aangevinkt.
- Klik op de knop Reload (zie hieronder).
Je zou nu een volledige analyse van je site moeten zien.
Als je met de muis over LCP in het tabblad Network gaat, kun je de tijd zien:
Als je met de muis over LCP in het tabblad Timings gaat, kun je het eigenlijke LCP element zien:
Google Search Console
Hoewel je met Google Search Console niet een individuele pagina kunt testen op zijn Largest Contentful Paint tijd, is het echt nuttig om de sitebrede prestaties te beoordelen.
Elke pagina op je site zal een andere LCP tijd hebben, dus je kunt niet alleen je homepage testen en het voor gezien houden.
Met Google Search Console kun je zien waar elke pagina op je site valt in de categorieën “Good”, “Needs Improvement” en “Poor” van Google. De prestatiegegevens komen uit het Chrome UX rapport en zijn dus gebaseerd op echte gebruikersgegevens.
Als je dat nog niet hebt gedaan, moet je eerst je site verifiëren met Google Search Console.
Als je dat gedaan hebt, lees je hier hoe je het LCP rapport kunt openen:
- Open Google Search Console voor je site.
- Ga naar Core Web Vitals onder het tabblad Experience.
- Klik op Open Report naast de grafiek Mobiel of Desktop.
- Zoek naar problemen in het gedeelte Why URLs aren’t considered good. Als je op het probleem klikt, zie je meer informatie over welke URL’s problemen veroorzaken.
*Zorg ervoor dat je zowel de desktop- als de mobiele resultaten controleert, want de gegevens kunnen in beide anders zijn.
WebPageTest
WebPageTest is een andere handige optie voor het uitvoeren van gesimuleerde prestatietests.
In tegenstelling tot PageSpeed Insights kun je met WebPageTest verschillende testgegevens volledig aanpassen, zoals de testlocatie, verbindingssnelheid, apparaat en meer. Dat is het belangrijkste voordeel van het gebruik ervan boven andere tools – het geeft je meer opties om de test te configureren.
Hier zie je hoe je een test uitvoert:
- Ga naar WebPageTest.
- Voeg de pagina URL toe die je wilt testen.
- Vouw de Advanced Configuration opties uit om je test volledig te configureren.
Op de resultatenpagina zie je de LCP gegevens, samen met tal van andere prestatiecijfers (waaronder een watervalanalyse).
Zo vind je het Largest Contentful Paint Element
Als je Largest Contentful Paint wilt verbeteren, kan het heel nuttig zijn om precies te weten welk element Google gebruikt om je LCP tijd te berekenen.
Als je bijvoorbeeld weet dat Google je hero image gebruikt als LCP element op je homepage, dan weet je dat je manieren moet vinden om die hero image zo snel mogelijk te leveren als je de LCP tijden van je homepage wilt verbeteren.
Zoals we al eerder zeiden, kun je je Largest Contentful Paint element vinden met PageSpeed Insights of Chrome Developer Tools.
Zorg ervoor dat je zowel mobiele als desktop resultaten controleert, want je LCP element kan anders zijn op verschillende apparaten.
Zo verbeter je Largest Contentful Paint in WordPress (of andere platforms)
Nu je alles weet over Largest Contentful Paint, laten we beginnen met een aantal bruikbare tips voor het verbeteren van Largest Contentful Paint in WordPress.
Hoewel we ons voor deze tips zullen richten op WordPress, zijn alle tips universeel en van toepassing op andere soorten websites.
Stel caching in om de reactietijd van de server te verbeteren
Caching kan de reactietijd van de server verbeteren door het verwerkingswerk dat je server moet doen voordat hij het voltooide HTML document kan afleveren aan de browsers van bezoekers te verminderen.
Als je je WordPress site bij Kinsta host, hoef je je geen zorgen te maken over het configureren van caching omdat Kinsta automatisch geoptimaliseerde caching voor je implementeert.
Als je elders host, kun je caching op je site inschakelen met een gratis plugin als WP Super Cache of een betaalde plugin als WP Rocket.
Bekijk voor meer opties ons artikel met de beste WordPress cachingplugins.
Upgrade naar snellere WordPress hosting
Hoewel alle tactieken op deze lijst je kunnen helpen je LCP tijd te verbeteren, hoef je er niet omheen te draaien:
Als je trage, ongeoptimaliseerde WordPress hosting gebruikt, zullen je LCP tijden altijd worden beperkt door de kwaliteit van je host.
Je kunt het misschien wat beter maken, maar je zult altijd moeite hebben om LCP tijden onder de 2,5 seconden te halen als je host traag is.
Als je de gemakkelijkste manier wilt om je Largest Contentful Paint tijden te verbeteren, dan kun je je site migreren naar Kinsta. Niet alleen biedt Kinsta een voor prestaties geoptimaliseerde hostinginfrastructuur, maar we hebben ook ingebouwde features om veel van de andere optimalisaties op deze lijst aan te pakken.
Dat betekent dat jij je kunt richten op de groei van je site in plaats van te knoeien met het optimaliseren van de Largest Contentful Paint tijden.
Als je geïnteresseerd bent: Kinsta migreert gratis een onbeperkt aantal websites vanuit elke host – lees hier meer over gratis migratie.
Als je nog steeds twijfelt – probeer dan eerst de rest van de tips op deze lijst. Als je vervolgens nog steeds worstelt nadat je alles op deze lijst hebt gedaan, heb je misschien simpelweg betere hosting nodig.
Gebruik een Content Delivery Network (CDN)
Zonder een CDN moeten alle bezoekers van je site de HTML en statische assets van een pagina downloaden van je hostingserver.
Als je bezoekers zich in de buurt van je server bevinden, is dat meestal geen probleem. Maar als je bezoekers over de hele wereld verspreid zijn, kan dit je site vertragen vanwege de fysieke afstand tussen een bezoeker en de server van je site.
Met een CDN kun je de statische assets van je site (of zelfs de voltooide HTML pagina’s van je site) distribueren naar het wereldwijde netwerk van het CDN. Op die manier kunnen bezoekers bestanden downloaden van de dichtstbijzijnde locatie van het CDN, wat een stuk sneller is.
Als je bij Kinsta host, raden we je aan Kinsta’s Edge Caching feature te gebruiken voor de beste resultaten.
Kinsta’s Edge Caching feature werkt door de volledige HTML pagina’s en statische assets van je site te cachen naar het wereldwijde netwerk van Cloudflare (in plaats van alleen statische assets te cachen zoals bij de meeste CDN oplossingen).
Dit betekent dat de bezoekers van je site de volledige pagina kunnen downloaden van de dichtstbijzijnde Edge locatie, wat zowel de reactietijd van de server als de laadtijd van je LCP resource versnelt.
Om Kinsta’s Edge Caching in te schakelen, ga je naar het tabblad Edge Caching in het dashboard van je site in MyKinsta.
Als je ergens anders host, kun je een CDN opzetten voor de statische assets van je site met behulp van populaire CDN diensten zoals KeyCDN, Bunny, StackPath en anderen.
Vermijd render-blocking JavaScript (uitstellen of verwijderen)
Render-blocking JavaScript is JavaScript dat vóór je belangrijkste LCP element wordt geladen, ook al is het op dat moment niet nodig.
Door het laden van het LCP element uit te stellen, vertraagt het je LCP laadtijden.
Om dit op te lossen zijn er een paar strategieën die je kunt toepassen:
- Verwijder indien mogelijk onnodige JavaScript.
- Stel de JavaScript uit, zodat het laden van het hoofdelement van je site niet wordt geblokkeerd.
- Stel het JavaScript uit totdat een gebruiker interactie heeft met je site.
Voor de meeste mensen is de gemakkelijkste manier om deze functionaliteit te implementeren via plugins als Autoptimize of WP Rocket.
Voor een volledige handleiding over hoe dit te doen, hebben we twee zeer gedetailleerde artikelen:
Vermijd render-blocking CSS en optimaliseer de levering van CSS
Net zoals ongeoptimaliseerde JavaScript je site kan vertragen, kan ongeoptimaliseerde CSS dat ook doen.
In wezen wil je zo weinig mogelijk CSS laden. En de CSS die je wel moet laden, wil je op een optimale manier laden. Meestal betekent dit dat je belangrijke CSS vroeg wilt laden, en niet-kritische CSS wilt uitstellen tot verder in het laadproces.
Als je geen developer bent, is de eenvoudigste manier om dit te bereiken het gebruik van prestatie-optimalisatieplugins zoals Perfmatters, WP Rocket, of FlyingPress.
WP Rocket biedt bijvoorbeeld ingebouwde features om ongebruikte CSS per pagina te verwijderen en CSS optimaal te leveren.
Als je veel dieper wilt kijken naar hoe je dit allemaal kunt doen, bekijk dan onze complete handleiding over het optimaliseren van CSS.
Minificeer je HTML, CSS en JavaScript
Naast de bovenstaande technieken voor codeoptimalisatie moet je ook de HTML, CSS en JavaScript van je site minificeren.
Hiermee verwijder je overbodige tekens en witruimte uit de code van je site, zodat die kleiner wordt.
Als je host bij Kinsta, kan Kinsta automatisch minificatie afhandelen via onze Cloudflare integratie. Hier lees je hoe je deze feature regelt:
- Open het dashboard van je site in MyKinsta.
- Ga naar het tabblad CDN.
- Klik op Instellingen naast Afbeeldingsoptimalisatie.
- Vink de vakjes voor CSS en JS aan en sla de instellingen op.
Als je je site elders host, kun je een gratis plugin zoals Autoptimize gebruiken om je code te minificeren, of een van de uitgebreide premium plugins zoals Perfmatters, WP Rocket, of FlyingPress.
Of bekijk onze volledige tutorial over het minificeren van code voor meer informatie. Hoewel de handleiding zich richt op JavaScript, kun je dezelfde methoden en plugins ook gebruiken om andere code te minificeren.
Gebruik compressie op serverniveau (Gzip of Brotli)
Met compressie op serverniveau kun je de bestanden van je site verkleinen met technologieën als Gzip of Brotli.
De compressie die we bijvoorbeeld gebruiken voor de website van Kinsta verkleinde de bestandsgrootte van de Kinsta homepagina met 85,82%.
Als je je WordPress website bij Kinsta host, hoef je je hier geen zorgen over te maken, want Kinsta schakelt automatisch Brotli compressie in voor alle sites.
Als je je site elders host, kun je deze gratis tool van GiftOfSpeed gebruiken om te controleren of je site Gzip of Brotli heeft ingeschakeld.
Als je site geen compressie gebruikt, kun je onze handleiding volgen over het inschakelen van Gzip compressie om het in te stellen.
Als je Cloudflare gebruikt om de content van je site te serveren, heeft Cloudflare ook een ingebouwde instelling om Brotli compressie in te schakelen:
- Open je site in het Cloudflare dashboard.
- Ga naar Speed → Optimization in het zijbalkmenu.
- Schakel de Brotli toggle in.
Comprimeer en verklein afbeeldingen
Als je LCP element een afbeelding is, zal het vinden van manieren om de grootte van dat afbeeldingsbestand te verminderen de tijd verkorten die de browser van een gebruiker nodig heeft om de afbeelding te downloaden (en dus je LCP tijd versnellen).
Om de afbeelding te verkleinen moet je het formaat aanpassen aan de afmetingen waarin je het werkelijk gebruikt, het comprimeren met lossy of lossless compressie, en het aanbieden in een geoptimaliseerd format zoals WebP.
Wat je hier doet zorgt voor een algemene optimale performance – het is niet specifiek voor Largest Contentful Paint.
Bekijk voor een uitgebreidere uitleg onze gedetailleerde handleiding voor afbeeldingsoptimalisatie voor websites.
En oh ja – als je je WordPress site bij Kinsta host, hoef je je hier geen zorgen over te maken, want Kinsta biedt een ingebouwde feature om de afbeeldingen van je site automatisch te optimaliseren, zonder dat je daarvoor externe tools voor nodig hebt.
Dit is hoe je deze feature inschakelt:
- Open het dashboard van je site in MyKinsta.
- Ga naar het tabblad CDN.
- Klik op Instellingen naast Afbeeldingsoptimalisatie.
- Kies het gewenste niveau van afbeeldingsoptimalisatie en sla de instellingen op – het gebruik van Lossy biedt de grootste snelheidsverbeteringen, hoewel het een klein effect kan hebben op de afbeeldingskwaliteit.
Preload de Largest Contentful Paint afbeelding
Als je LCP element een afbeelding is, is een andere strategie om LCP te verbeteren het vooraf laden van de Largest Contentful Paint afbeelding. Daarom zie je in PageSpeed Insights misschien een aanbeveling als “Preload Largest Contentful Paint image”.
Met preload kun je de browser van een gebruiker vertellen om prioriteit te geven aan het downloaden van bepaalde resources, zoals de specifieke afbeelding die het LCP element van je site is.
De meest niet-technische manier om LCP afbeeldingen voor te laden is het gebruik van een plugin als Perfmatters, die een speciale Preload Critical Images feature biedt. Je hoeft alleen maar aan te geven hoeveel afbeeldingen je wilt preloaden – we raden aan met één te beginnen, omdat het voorladen van te veel elementen een negatief effect kan hebben.
Er zijn ook enkele gratis plugins op WordPress.org om dit te regelen, zoals de Preload Featured Images plugin van WPZOOM, evenals andere premium plugins, zoals FlyingPress.
Controleer op problemen met lazy loading
Een ander probleem dat het bericht “Preload Largest Contentful Paint image” in PageSpeed Insights kan veroorzaken, zijn problemen met de manier waarop je WordPress site afbeeldingen lazyloadt.
Dit kan ook een “Largest Contentful Paint image was lazily loaded” waarschuwing in PageSpeed Insights triggeren.
Met lazy loading kun je de eerste laadtijden van je site versnellen door te wachten met het laden van bepaalde resources (zoals afbeeldingen) totdat een gebruiker de interactie met je site aangaat.
Hoewel dat normaal gesproken een goede zaak is, kan het je LCP tijden vertragen als je site probeert om de afbeelding die je LCP element is te lazyloaden. Daarom moet je ervoor zorgen dat je site geen afbeeldingen inlaadt die zichtbaar zijn in de eerste viewport.
Als je de ingebouwde lazy loading feature van je browser gebruikt die WordPress introduceerde in WordPress 5.5, dan zou je dit probleem niet moeten ondervinden omdat WordPress vanaf WordPress vanaf 5.9 automatisch de eerste in-content afbeelding uitsluit.
Als je meer dan de eerste afbeelding wilt uitsluiten, kun je de functie wp_omit_loading_attr_threshold gebruiken (maar de meeste mensen zullen hier niets hoeven te doen).
Als je echter een lazy loading plugin met JavaScript gebruikt, moet je deze uitsluiting misschien handmatig instellen in de instellingen van de plugin. De Perfmatters plugin bevat bijvoorbeeld een optie waarmee je de eerste “X” afbeeldingen kunt uitsluiten van lazy loading.
Als je lazy loading plugin je dit type uitsluiting niet laat instellen, kun je overstappen op een andere plugin die dat wel doet.
Optimaliseer het laden van lettertypen met Font-Display: Optional
Als je LCP element tekst is, kan het laadproces van het lettertype op je site het verschijnen van de tekst vertragen, wat je LCP tijd zal vertragen.
Dit gebeurt meestal bij het gebruik van aangepaste lettertypen. Als je site is ingesteld om te wachten met het weergeven van tekst tot na het laden van het aangepaste lettertype, zal dit de boel vertragen als het laden van het aangepaste lettertype bestand lang duurt.
Om dit op te lossen kun je de Font-Display: Optional CSS descriptor gebruiken.
Deze vertelt de browser om een fallback lettertype te gebruiken als het aangepaste lettertype niet binnen een klein venster wordt geladen (meestal ongeveer 100ms of minder).
In gewone taal betekent dit dat de browser het aangepaste lettertype een kans moet geven om te laden. Maar als het aangepaste lettertype niet snel genoeg laadt, moet de browser een fallback systeemlettertype gebruiken om de content niet verder te vertragen.
Als alternatief kun je ook Font-Display: Swap, dat het fallback lettertype meteen laadt en dan het aangepaste lettertype “inwisselt” zodra het aangepaste lettertype geladen is. Deze aanpak kan echter problemen veroorzaken met Cumulative Layout Shift als de lettertypen een verschillende grootte hebben, dus je moet voorzichtig zijn.
Tenzij je aangepaste lettertype absoluut noodzakelijk is voor het ontwerp van je website, is het gebruik van Font-Display: Optional meestal de beste optie vanuit het perspectief van Core Web Vitals.
Als je liever rechtstreeks CSS gebruikt, kun je handmatig de eigenschap Font-Display in de stylesheet van je childthema bewerken.
Als je geen CSS wilt gebruiken, kun je ook plugins vinden om je hierbij te helpen, hoewel de meeste daarvan gericht zijn op het optimaliseren voor Google Fonts:
- Asset CleanUp – ondersteunt gratis Google Fonts en aangepaste lokale fonts met de Pro versie.
- Perfmatters – biedt een feature voor Google Fonts.
Als je Elementor gebruikt om je site te ontwerpen, bevat Elementor een ingebouwde optie waarmee je dit kunt gebruiken voor pagina’s die je met Elementor maakt:
- Ga naar Elementor → Settings.
- Open het tabblad Advanced .
- Zet het keuzemenu Google Fonts Load gelijk aan Optional.
Samenvatting
Leren hoe je Largest Contentful Paint kunt verbeteren is belangrijk voor het verbeteren van de gebruikerservaring van je site en het maximaliseren van je zoekmachinerankings.
Het verbeteren van Largest Contentful Paint bestaat over het algemeen uit twee delen: het versnellen van de reactietijd van je server en het optimaliseren van de code van je site om het LCP element zo snel mogelijk te renderen.
Als je je geen zorgen wilt maken over een trage serverresponstijd, kun je je WordPress site verplaatsen naar Kinsta. De voor prestaties geoptimaliseerde architectuur van Kinsta is speciaal ontworpen om je site zo snel mogelijk af te leveren.
Bovendien kun je met Kinsta’s Edge Caching feature de pagina’s van je site cachen naar het wereldwijde netwerk van Cloudflare, wat betekent dat bezoekers van over de hele wereld zullen profiteren van bliksemsnelle serverresponstijden (en dus ook bliksemsnelle LCP tijden).
Als je meer wilt weten, kun je deze pagina’s bekijken voor meer informatie over Kinsta’s managed WordPress hosting of Kinsta’s managed WooCommerce hosting.
Als je een professional wilt om je te helpen met custom LCP prestatieoptimalisaties, kun je een aanbieder vinden in de Kinsta Agency Directory.
Laat een reactie achter