Lighthouse introduceerde Largest Contentful Paint als een van de belangrijkste prestatiestatistieken in 2020.
Later kondigde Google LCP aan als een belangrijke rankingfactor en maakte het onderdeel van Core Web Vitals. Als Core Web Vital- metric telt LCP voor 25% mee in de Performance Score, waardoor het een van de belangrijkste metrics is om te optimaliseren.
In deze gids gaan we uitgebreid in op Largest Contentful Paint en leren we ook manieren om de beste LCP-scores te optimaliseren.
Wat is de grootste inhoudsvolle verf?
LCP meet hoe lang het duurt voordat een webpagina het 'grootste inhoudselement' op de pagina weergeeft. Hier kan de 'grootste' inhoud van alles zijn, waaronder:
Een “inhoudselement” is elk HTML-element, zoals:
- Een beeldelement
- Een video-element
- SVG-elementen
- Een element waarvan de achtergrondafbeelding wordt geladen via de URL-functie
- , , , , of andere elementen op blokniveau
Volgens Google
“LCP is een belangrijke, op de gebruiker gerichte maatstaf voor het meten van de waargenomen laadsnelheid, omdat het het punt in de laadtijdlijn van de pagina markeert waarop de hoofdinhoud van de pagina waarschijnlijk is geladen. Een snelle LCP helpt de gebruiker gerust te stellen dat de pagina nuttig is.”
Eerste inhoudsvolle verf versus grootste inhoudsvolle verf:
We hebben onlangs een bericht gepubliceerd over ' First Contentful Paint ', en sommigen van jullie vragen zich misschien af wat het verschil is met ' Large Contentful Paint '. Hier volgt een eenvoudige uitleg:
- First Contentful Paint: FCP meet hoe lang het duurt voordat een pagina wordt geladen vanaf het moment dat deze voor het eerst wordt geladen tot de eerste weergegeven inhoud op het scherm.
- Grootste inhoudsvolle verf: LCP meet de weergavetijd van de grootste afbeelding of tekstblok die zichtbaar is in de viewport, vergeleken met het moment waarop de pagina voor het eerst werd geladen.
Wat is een goede LCP-score?
Volgens de richtlijnen van Google moet een goede LCP-score minder dan 2.5 seconden zijn. Dit zorgt voor een goede UX.
LCP-drempels zijn als volgt:
- Goed: LCP van 1200 milliseconden of minder (hier is niets aan te doen)
- Verbetering nodig: LCP tussen 1200 en 2400 milliseconden.
- Slecht = LCP hoger dan 2400 milliseconden.
Hoe meet je de grootste contentful paint-score?
Webmasters of uitgevers kunnen een Largest Contentful Paint-test uitvoeren met behulp van de volgende tools:
Omdat LCP een door Google goedgekeurde statistiek is, kunnen we de LCP-score gemakkelijk vinden in al deze tools.
Hoe u de First Contentful Paint (FCP)-tijd kunt verbeteren:
Nu we hebben begrepen wat FCP is en waarom het belangrijk is, gaan we eens kijken hoe we de FCP-timing kunnen verbeteren:
Elimineer weergaveblokkeringsbronnen:
Render-blocking resources zijn de bestanden op een website die moeten worden weergegeven. Dit kunnen lettertypen, CSS-bestanden, JavaScript en HTML zijn . Deze bestanden worden 'render-blocking' genoemd omdat ze prioriteit hebben boven andere elementen van de pagina (bijvoorbeeld afbeeldingen, tekst of andere content die de gebruiker te zien krijgt).
Deze vertraging zorgt voor een plotselinge toename van de LCP, omdat renderblokkeringsbestanden meestal groot zijn en niet eens site-inhoud bevatten.
De LCP-tijd kan worden verkort als u weergavebronnen uit het kritieke weergavepad verwijdert, niet-kritieke bronnen uitstelt of onnodige JS verwijdert.
Verwijder onnodige CSS
Als je bestanden in je stylesheets hebt die niet worden gebruikt, maar die veel snelheid vergen, heeft het geen zin ze te bewaren. Daarom moet alle ongebruikte of oude code worden verwijderd, zodat deze geen invloed heeft op de laadtijd van uw site.
Verklein HTML, JavaScript en CSS
Het verkleinen van HTML, JavaScript en CSS kan de LCP-tijd van uw website aanzienlijk verkorten. Met minificatie worden alle extra tekens, zoals spaties, verwijderd uit de CSS-, HTML- en JavaScript-bestanden van uw site.
Hoewel spaties de leesbaarheid bevorderen, hebben browsers deze niet nodig. Deze spaties nemen feitelijk bytes in beslag en het minimaliseren ervan zou de paginagrootte verkleinen en de First contentful paint-timing verbeteren.
Optimaliseer de afbeeldingsgrootte
Gebruik altijd afbeeldingen met de juiste afmetingen. U kunt een plug-in voor beeldoptimalisatie zoals SSmush of Hummingbird gebruiken om de afbeeldingsgrootte te verkleinen. Door de omvang te verkleinen wordt overbelasting voorkomen, wat een hoge LCP kan genereren. U kunt ook een image-CDN gebruiken om de LCP-tijd te verkorten.
Kies een goede hostingdienst
Uw hostingservice heeft ook invloed op de laadtijd van pagina's. Probeer dus een goede hostingprovider die een adequate infrastructuur biedt voor de grootte en het toegangsniveau van uw site.
Tot slot:
Google beschouwt Largest Contentful Paint als een relevant onderdeel van Core Web Vitals. Het is daarom een belangrijke parameter om te evalueren en websites moeten hier een goede score op behalen.
Omdat LCP gerelateerd is aan de laadtijd van de pagina, heeft het rechtstreeks invloed op hoe Google een site op de resultatenpagina rangschikt.
Gebruikerservaring is een fundamentele parameter voor websites om online gevonden te worden. Daarom is het niet voldoende om aantrekkelijke producten, een goede UX of kwalitatief hoogwaardige content te hebben.
Een goede LCP-score is niet alleen gunstig voor de gebruiker, maar zorgt er ook voor dat Google de content goed zal rangschikken.
Shubham is een digitale marketeer met rijke ervaring in de advertentietechnologie-industrie. Hij heeft ruime ervaring in de programmatische industrie, waar hij de bedrijfsstrategie en schaalfuncties aanstuurt, inclusief maar niet beperkt tot groei en marketing, operations, procesoptimalisatie en verkoop.
