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.
In 2019 kondigde Google aan dat ze websites zullen rangschikken op basis van nog twee prestatiestatistieken: First Contentful Paint & First Input Delay.
Later introduceerde Google er drie Kernwebvitaliteit: Eerste invoervertraging, Cumulatieve lay-outverschuiving.
In dit artikel zullen we het hebben over First Contentful Paint, omdat dit nog steeds een belangrijke maatstaf voor gebruikerservaring is en verantwoordelijk is voor de algehele prestatiescore van een website.
Wat is de eerste inhoudsscore?
De eerste contentful paint van een website is wanneer de browser het eerste DOM-element van de pagina ophaalt en weergeeft. Canvaselementen, afbeeldingen of tekst, niet-witte elementen en SVG's worden beschouwd als DOM-inhoud.
Simpel gezegd is FCP de tijd die een websitegebruiker nodig heeft om inhoud in zijn browser te zien nadat hij op de websitelink heeft geklikt.
Een razendsnelle FCP zorgt er dus voor dat gebruikers iets nuttigs vinden zodra ze op de pagina terechtkomen.
We hebben onlangs een bericht gepubliceerd over First Input Delay. Als je het hebt gelezen, vraag je je misschien af wat het verschil is tussen First Contentful Paint en First Input Delay?
Verschil tussen eerste inhoudsvolle verf en eerste invoervertraging:
Eerste invoervertraging (FID)
FID meet de interactiviteit: de tijd die een website nodig heeft om te reageren nadat de bezoeker er interactie mee heeft gehad (bijvoorbeeld door op een knop of link te klikken).
Eerste contentvolle verf (FCP):
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.
Sommigen van jullie vragen zich misschien af hoe de eerste verf verschilt van de eerste inhoudelijke verf. Laten we kijken:
Eerste verf versus eerste inhoudsvolle verf:
Voor de onervarenen: First paint is wanneer een render door de browser wordt gedetecteerd. Deze weergave kan net zo subtiel zijn als de achtergrondkleur.
- Eerste verven:
First Paints worden al heel vroeg tijdens het laden van de pagina geactiveerd, maar leveren geen enkele informatie of 'inhoud' aan de gebruikers. De achtergrondkleur wordt meestal snel weergegeven, terwijl het langer duurt voordat de daadwerkelijke inhoud op het scherm verschijnt.
De timing van de eerste verfbeurt is dus niet zo nuttig, omdat de site niet echt nuttige informatie weergeeft.
- Eerste tevreden verf:
First Contentful Paint betekent het laden van alle 'inhoud' die informatief is voor de eindgebruikers. Het wordt geactiveerd wanneer inhoud wordt geschilderd; tekst-, afbeelding- of canvasweergave.
De First Contentful Paint-timing geeft een nuttig inzicht in hoe snel uw gebruikers uw website leren kennen, aangezien deze de laadtijd van de daadwerkelijke inhoud op de pagina vertegenwoordigt. Omdat de focus ligt op 'inhoud', is dit een nuttiger maatstaf in vergelijking met eerste verf.
Hoe meet je de eerste inhoudsvolle verf?
Webmasters of uitgevers kunnen de First Contentful Paint van hun website meten via meerdere tools, waaronder:
Wat is een goede FCP-score?
Volgens de richtlijnen van Google zou de eerste inhoudelijke verf van een webpagina binnen 1.8 seconden moeten plaatsvinden. Wanneer een webpagina binnen 2 seconden wordt geladen, zorgt dit voor een goede gebruikerservaring voor de bezoekers, omdat ze sneller toegang hebben tot de informatie.
Als het laden van de eerste inhoud van een website langer dan 3 seconden duurt, wordt deze als traag beschouwd.
Google beoordeelt FCP-timing in drie verschillende categorieën:
- Goed – tussen 0 seconden en 1.8 seconden
- Verbetering nodig – tussen 1.8 seconden en 3 seconden
- Slecht – meer dan 3 seconden
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:
Renderblokkerende bronnen zijn de bestanden die op een website moeten renderen. Dit kunnen lettertypen, CSS-bestanden, JavaScript en HTML zijn. Deze bestanden worden 'weergaveblokkering' genoemd omdat ze voorrang hebben op andere elementen van de pagina (bijvoorbeeld afbeeldingen, tekst of andere gebruikersgerichte inhoud).
Deze vertraging zorgt voor een plotselinge toename van de FCP, omdat renderblokkeringsbestanden meestal groot zijn en niet eens site-inhoud bevatten.
De FCP-tijd kan worden verkort als u weergavebronnen uit het kritieke weergavepad verwijdert, niet-kritieke bronnen uitstelt of onnodige JS verwijdert. - Verkort de responstijd van de server:
TTFB of Tijd tot eerste byte is de totale tijd die een browser nodig heeft om de eerste byte van een pagina-inhoud te ontvangen. Als TTFB kleiner is, zal de FCP-timing ook minder zijn.
Hier is hoe,
FCP = TTFB + Rendertijd + Laadtijd van inhoud
Zoals u kunt zien, is FCP afhankelijk van de TTFB. Het optimaliseren van TTFB zou dus automatisch de FCP-score verbeteren. U kunt de TTFB verlagen door een kwaliteits-CDN te gebruiken, caching voor uw website mogelijk te maken en een snelle hostingprovider te kiezen. - 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 FCP-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.
Kortom:
Omdat Google paginasnelheid als een belangrijke prestatiestatistiek waardeert, zal First Contentful Paint een belangrijke statistiek voor websites blijven.
Het hebben van een lage FCP-tijdlijn zorgt er niet alleen voor dat gebruikers op uw site blijven, maar verbetert ook de algehele gebruikerservaring.
We zijn het ermee eens dat FCP een lastige maatstaf kan zijn om vast te stellen, maar een beetje optimalisatie van het verminderen van FCP zal zeker de UX en de algehele laadtijden van uw site verhogen.
Veelgestelde vragen
First Contentful Paint (FCP) meet hoe snel bezoekers daadwerkelijke inhoud (tekst, afbeeldingen, video's, etc.) op uw pagina kunnen zien. In onze oudere rapporten werd FCP al bijgehouden, wat gerelateerd is aan de laadsnelheid van uw pagina.
Tijdens de First Contentful Paint (FCP) geeft de browser het eerste bit van de inhoud van de DOM weer, waardoor de gebruiker de eerste indicatie krijgt dat de pagina wordt geladen.
Op basis van gegevens uit het HTTP-archief vergelijkt uw FCP-score de FCP-tijd van uw pagina met die van echte websites. FCP wordt bijvoorbeeld in 1.2 seconden weergegeven voor sites die in het negenennegentigste percentiel presteren. Uw FCP-score is 99 als de FCP van uw website 1.2 seconden is.
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.
