First Contentful Paint (FCP) is een webprestatiestatistiek die meet hoe lang het duurt voordat het eerste element van een pagina wordt weergegeven en zichtbaar is in de browser van de gebruiker.
Hoewel FCP geen Core Web Vitals-statistiek is, mag u deze niet negeren als u om uw gebruikerservaring geeft.
Waarom? Omdat snelle FCP betekent dat uw gebruikers kunnen zien dat uw inhoud wordt geladen, en hoe snel dit gebeurt, draagt bij aan hun tevredenheid. En hoe tevredener uw gebruikers zijn, hoe enthousiaster ze zijn om op uw pagina te blijven, uw inhoud te verkennen en te converteren.
Leer zonder verder gedoe hoe u uw FCP-score kunt meten en verbeteren om de bezoekers van uw website een positieve ervaring te bieden.
Wat betekent First Contentful Paint (FCP)?
First Contentful Paint (FCP) is een op de gebruiker gerichte statistiek die de tijd berekent die nodig is om het eerste inhoudselement weer te geven op een pagina die in een browser wordt geladen.
Met andere woorden, FCP houdt de tijd bij tussen het moment waarop een pagina begint te laden en het moment waarop het eerste inhoudselement zichtbaar is in de browser van de gebruiker.
Om nog preciezer te zijn: FCP meet hoe lang het duurt om de eerste weer te geven Documentobjectmodel (DOM) element dat is:
- tekst,
- afbeelding (inclusief achtergrondafbeeldingen)
- niet-wit onderdeel, of
- element.
FCP is een belangrijke statistiek vanuit het UX-perspectief, omdat het meet hoe echte gebruikers de paginabelasting waarnemen en bepaalt welke eerste indruk gebruikers van uw pagina hebben.
Stel u voor dat gebruikers te lang wachten totdat uw pagina is geladen en alleen de standaardachtergrond zien.
Hoe lang is 'te lang' voordat gebruikers geïrriteerd raken en een pagina willen verlaten? Het is lang genoeg als gebruikers de vertraging al kunnen opmerken.
Snelle FCP geeft aan dat er 'iets' op de achtergrond gebeurt. Voor uw gebruikers weerspiegelt het eerste element dat op het scherm wordt weergegeven het volgende:
- de pagina correct werkt, en
- er staat inhoud op de pagina die gebruikers mogelijk verder willen verkennen en ermee willen communiceren.
Vanuit dat perspectief is FCP een maatstaf die u niet mag negeren.
Hoe FCP meten?
First Contentful Paint (FCP) kan worden geanalyseerd op basis van veld- en laboratoriumgegevens.
U kunt deze twee manieren om prestaties te meten combineren om onbevooroordeelde FCP-resultaten te garanderen.
Laboratoriumhulpmiddelen
Met laboratoriumgegevens kunt u uw FCP-score meten in een testomgeving met vooraf gedefinieerde instellingen.
Met de volgende hulpmiddelen kunt u uw FCP volgen, gemeten in een laboratorium:
Chrome DevTools
FCP meten Chrome DevTools, open het gedeelte 'Prestaties' en klik op de knop 'Herladen' om de tool uw pagina te laten analyseren.
Om uw exacte FCP te vinden op de laadtijdlijn van de pagina:
- ga naar de sectie 'Tijdtijden', of
- vink het vakje met 'Web Vitals' aan onder de hoofdnavigatiebalk van Chrome DevTools en ga naar het gedeelte 'Web Vitals' op de tijdlijn.
Lighthouse
Om uw FCP-score te meten Lighthouse, ga naar Chrome DevTools en open het tabblad 'Lighthouse' om een prestatie-audit uit te voeren.
Lighthouse verzamelt de gegevens en genereert een rapport met uw FCP-score in het gedeelte 'Metrieken'.
Bovendien geeft Lighthouse specifieke suggesties over wat u kunt verbeteren voor een betere FCP. Om ze te zien, hoeft u alleen maar de resultaten voor FCP te filteren boven de secties 'Mogelijkheden' en 'Diagnostiek'.
Veld gereedschap
Om uw FCP-score te verbeteren voor een betere gebruikerservaring, zijn veldgegevens een waardevolle informatiebron, omdat deze laten zien hoe echte gebruikers omgaan met websites op internet.
Het belangrijkste is dat de veldgegevens van Google gebaseerd zijn op het Chrome User Experience Report (CrUX), “gebruikt door Google Zoeken om de rangschikkingsfactor van de pagina-ervaring te bepalen.” Dit betekent dat u, door de echte gebruikersgegevens die in CrUX worden verzameld, bij te houden en te optimaliseren, rechtstreeks invloed kunt uitoefenen op de beoordeling van Google over de prestaties van uw pagina's.
Met de volgende tools kunt u uw FCP volgen op basis van veldgegevens:
PageSpeed Insights
PageSpeed Insights combineert laboratorium- en veldgegevens van respectievelijk Lighthouse en CrUX.
Om FCP te meten met PageSpeed Insights hoeft u alleen maar de URL die u wilt analyseren in de zoekbalk van de tool in te voeren.
Met uitzondering van de Lighthouse-labgegevens die u kunt zien in het gedeelte 'Metrische gegevens', kunt u met PageSpeed Insights zien hoe echte gebruikers de geanalyseerde pagina ervaren, zowel op mobiele apparaten als op desktopapparaten.
Net als Lighthouse biedt PageSpeed Insights gedetailleerde aanbevelingen voor het verbeteren van uw FCP in de secties 'Mogelijkheden' en 'Diagnostiek'.
Chrome User Experience Report
Chrome User Experience Report (CrUX) geeft weer hoe echte Chrome-gebruikers websites op internet ervaren.
Er zijn verschillende manieren om toegang te krijgen tot de Crux-gegevens van uw website:
- Gebruik de Crux-API. Als u geen ervaring heeft met API's, raadpleeg dan uw ontwikkelaars of volg de officiële Google-documentatie over de Crux API.
- Maak een Looker Studio Crux-dashboard met behulp van een kant-en-klaar sjabloon. (deze optie is beginnersvriendelijk, maar biedt geen gedetailleerde gegevens.
- Query's uitvoeren op de Crux-datasets met behulp van Google BigQuery.
JavaScript API
Als u enige ervaring heeft met het gebruik van JavaScript, kunt u de Paint Timing-API om FCP vast te leggen tijdens het laden van de pagina.
Echter, hoe de werkelijke FCP-statistiek wordt berekend en wat de API weergeeft, kan verschillen. Om onnodige verwarring te voorkomen, raadt Google daarom aan om de web-vitals JavaScript-bibliotheek voor het meten van FCP.
Maar onthoud dat de De web-vitals-bibliotheek heeft ook zijn beperkingen. Het is bijvoorbeeld onmogelijk om cross-origin iframes in JavaScript te meten, terwijl je voor het berekenen van FCP alle iframes moet kunnen meten.
Wat is een ideale First Contentful Paint-score?
Omdat FCP de tijd meet die nodig is voordat het eerste element van uw pagina wordt weergegeven en zichtbaar is op het scherm, geldt: hoe lager uw score, hoe beter, zodat u de bezoekers van uw website een positieve browse-ervaring biedt.
Het betekent u moet streven naar een FCP-score van 1.8 seconden of minder. Om nog preciezer te zijn: Google adviseert een FCP-score van 1.8 seconden of minder te hebben voor 75% van al uw paginaweergaven.
Om ervoor te zorgen dat u dit doel voor de meeste van uw gebruikers behaalt, is een goede drempel om te meten de 75e percentiel van het aantal paginaladingen, gesegmenteerd over mobiele apparaten en desktopapparaten.
bron:
web.dev
Drempels voor de eerste inhoudsvolle verf
Om een beter inzicht te krijgen in uw FCP-score, moet u de drempelwaarden volgen die door Google zijn ontwikkeld.
Elke FCP-drempel is gemarkeerd met een andere kleur, waardoor het gemakkelijker wordt om de score te interpreteren met behulp van verschillende hulpmiddelen.
Hier volgen de exacte drempelwaarden die zijn opgegeven voor FCP-waarden:
| FCP-tijd | Hoe u uw score kunt analyseren |
| 0-1.8 seconden | Goed (groen) |
| 1.8-3 seconden | Verbetering nodig (oranje) |
| Meer dan 3 seconden | Slecht (rood) |
Om uw FCP-score te bepalen, vergelijkt Google de resultaten van uw pagina met de gegevens van echte websites uit de HTTP-archief.
Wat veroorzaakt een hoge First Contentful Paint?
De First Contentful Paint (FCP)-score kan negatief worden beïnvloed door verschillende factoren die bijdragen aan hoe snel uw bronnen kunnen worden geladen en weergegeven aan het begin van het laden van de pagina.
Echter, onder de meest voorkomende oorzaken van de hoge FCP-score, je kunt vinden:
- trage reactietijd van de server,
- render-blocking CSS- en JavaScript-bronnen,
- lui laden boven de vouw,
- een buitensporige DOM-grootte, en
- trage laadtijd van lettertypen.
Hoewel het essentieel is om te begrijpen welke aspecten kunnen bijdragen aan een slechte FCP, moet u er rekening mee houden dat het analyseren van uw FCP-score en het identificeren van de mogelijke oorzaken van uw problemen het halve werk is.
Waarom? Omdat alleen een diepgaande diagnose van uw problemen u kan helpen uw FCP efficiënt te optimaliseren voor een betere laadsnelheid en gebruikerservaring.
Laten we daarom eens kijken naar FCP-optimalisatie.
Hoe kan ik First Contentful Paint verbeteren?
Om te beginnen kunt u de specifieke FCP-aanbevelingen gebruiken die zijn opgenomen in de Lighthouse-prestatieaudit in de secties 'Opportunities' en 'Diagnostiek'.
Aan de andere kant wil je misschien ook weten welke aspecten niet verder geoptimaliseerd hoeven te worden voor een betere FCP-score. U kunt deze informatie vinden in de sectie 'Geslaagde audits' van Lighthouse.
Maar in het algemeen, volgens Google's officiële documentatie, zijn er verschillende manieren om FCP voor elke website te verbeteren. Laten we erin duiken.
| Aanbevelingen | Plan van aanpak |
| Elimineer bronnen die het renderen blokkeren | Optimaliseer de bronnen die de eerste verf van uw pagina blokkeren door essentiële CSS en JS inline aan te bieden, niet-kritieke bronnen uit te stellen en ongebruikte bronnen te verwijderen. |
| Verklein of verwijder ongebruikte CSS en JavaScript | Verklein ongebruikte CSS en JavaScript verminderen om de bronnen die door de netwerkactiviteit worden verbruikt te minimaliseren door bijvoorbeeld niet-kritieke CSS uit te stellen of codesplitsing te gebruiken. |
| Verkort de responstijd van de server (TTFB) | Optimaliseer de tijd tot eerste byte (TTFB) door bijvoorbeeld CDN-hosting en servicemedewerkers te gebruiken. |
| Vermijd meerdere pagina-omleidingen | Vermijd meerdere omleidingslussen en -ketens om dit mogelijk te voorkomen fouten omleiden en extra vertragingen voordat de pagina kan worden geladen. |
| Sleutelverzoeken vooraf laden | Geef prioriteit aan het ophalen van bronnen die later tijdens het laden van de pagina worden opgevraagd met behulp van . |
| Maak vooraf verbinding met de vereiste bronnen | Breng vroege verbindingen tot stand met belangrijke bronnen van derden door preconnect- of dns-prefetch-resourcehints toe te voegen. |
| Houd het laadvermogen laag | Vermijd grote netwerkbelastingen door verzoeken uit te stellen totdat ze nodig zijn, deze in de cache op te slaan of WebP-afbeeldingen te gebruiken in plaats van JPEG of PNG. |
| Serveer statische assets met behulp van caching | Configureer HTTP-caching om de terugkerende bezoeken aan uw pagina te versnellen door uw server zo in te stellen dat deze de Cache-Control HTTP-antwoordheader retourneert. |
| Vermijd een buitensporige DOM-grootte | Verwijder de ongebruikte DOM-knooppunten en maak alleen nieuwe wanneer dat nodig is. Als u al een grote DOM-structuur heeft, vereenvoudig dan uw CSS-selectors. |
| Minimaliseer de diepte van kritische verzoeken | Verminder het aantal kritieke bronnen, optimaliseer hun laadvolgorde, overweeg het gebruik van de kenmerken async of defer en optimaliseer het aantal kritieke bytes om de downloadtijd te verkorten. |
| Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van het weblettertype | Zorg ervoor dat tekst zichtbaar is voor gebruikers terwijl lettertypen worden geladen. Voorkom een flits van onzichtbare tekst (FOIT) door lettertypeweergave op te nemen: wissel uw @font-face-stijl in. |
| Minimaliseer het aantal verzoeken en de payloadgrootte | Optimaliseer uw afbeeldingen en lettertypen, vervang GIF's door video's, optimaliseer uw bronnen van derden en zorg voor de weergaveblokkerende CSS- en JS-bronnen. |
Zoals u kunt zien, zijn er talloze officieel aanbevolen manieren door Google om een slechte FCP-score te optimaliseren.
Omdat elke website echter uniek is, kunt u alleen met een deskundige analyse van uw specifieke prestatieproblemen de werkelijke oorzaak van uw problemen achterhalen en uw FCP-score verbeteren.
Daarom kunnen wij het voor u afhandelen als u het optimalisatieproces niet zelf wilt doorlopen.
VOLGENDE STAPPEN
Dit is wat u nu kunt doen:
- Neem contact op.
- Ontvang van ons een persoonlijk plan om uw prestatieproblemen aan te pakken.
- Geniet van uw organische verkeer dat converteert!
Weet u nog steeds niet zeker of u ons een bericht wilt sturen? Bekijk hoe onze webprestatiediensten kan u helpen uw website te versnellen en uw waargenomen laadsnelheid te verbeteren.
Eerste Contentful Paint versus andere webprestatiestatistieken
First Contentful Paint is niet de enige maatstaf die meet hoe snel de elementen van een pagina worden weergegeven en op het scherm worden geladen.
Daarom wordt FCP vaak verward met andere gebruikersgerichte prestatiestatistieken, hoewel ze verschillende aspecten van de prestaties van een pagina meten.
Laten we erin duiken en FCP vergelijken met andere nauw verwante statistieken.
Eerste inhoudsvolle verf versus grootste inhoudsvolle verf
Terwijl First Contentful Paint (FCP) meet wanneer het eerste element op een pagina wordt weergegeven, berekent Largest Contentful Paint (LCP) hoe lang het duurt voordat het grootste element op een pagina wordt weergegeven.
Het belangrijkste om te onthouden is dat het eerste geladen element op een pagina niet het grootste hoeft te zijn.
Een ander belangrijk verschil is dat LCP een van de Kernwebvitaliteit – bevestigd door rankingfactoren van Google.
Voor meer details over deze Core Web Vitals-statistiek leest u onze Grootste Contentful Paint (LCP) artikel om te leren waarom het belangrijk is en hoe u het kunt optimaliseren.
Eerste inhoudsvolle verf versus eerste betekenisvolle verf
In tegenstelling tot First Contentful Paint (FCP), dat meet wanneer het eerste element op een pagina wordt weergegeven, berekent First Meaningful Paint (FMP) wanneer de primaire inhoud boven de vouw van een pagina zichtbaar is.
Volgens Google, FCP en FMP kunnen gelijk zijn wanneer het eerste weergegeven element op een pagina de inhoud boven de vouw vormt.
Aan de andere kant zullen FCP en FMP verschillen wanneer de inhoud boven de vouw zich binnen een iframe bevindt, omdat FCP dit niet standaard meet.
Een belangrijk ding is echter FMP wordt niet meer gebruikt sinds de Lighthouse 6.0-versie, en Google raadt aan om in plaats daarvan LCP te gebruiken.
First Meaningful Paint (FMP) is verouderd in Lighthouse 6.0. In de praktijk is FMP te gevoelig gebleken voor kleine verschillen in de paginabelasting, wat tot inconsistente (bimodale) resultaten leidde. Bovendien is de definitie van de statistiek afhankelijk van browserspecifieke implementatiedetails, wat betekent dat deze niet in alle webbrowsers kan worden gestandaardiseerd of geïmplementeerd. Overweeg om in de toekomst te gebruiken Grootste inhoudelijke verf gebruiken.
bron:
Chrome-ontwikkelaars
Eerste inhoudsvolle verf versus eerste verf
Hoewel First Contentful Paint (FCP) en First Paint (FP) identiek lijken te zijn, mag u ze niet door elkaar gebruiken, omdat ze verschillende aspecten van de waargenomen laadsnelheid van een pagina meten.
FP berekent wanneer de eerste pixels op het scherm worden weergegeven, rekening houdend met de kleinste veranderingen, zoals het wijzigen van de standaardachtergrondkleur.
Aan de andere kant meet FCP het tijdstip waarop de eerste DOM-elementen, zoals tekst of afbeeldingen, al zijn weergegeven.
Om uw gebruikers een positieve gebruikerservaring te bieden, FCP en FP moeten gelijktijdig plaatsvinden, zodat gebruikers geen vertraging ervaren.
Eerste inhoudsvolle verf versus tijd voor interactief
First Contentful Paint (FCP) en Time To Interactive (TTI) meten respectievelijk de waargenomen laadsnelheid en het reactievermogen van een pagina.
Dus hoe verhouden ze zich? FCP helpt u bij het berekenen (en optimaliseren) van uw TTI-score, omdat FCP als startpunt werkt om TTI te meten.
Met andere woorden, als je wilt meten hoe lang het duurt voordat een pagina volledig interactief wordt (TTI), moet je beginnen met tellen vanaf FCP.
Lees ons artikel over Tijd tot interactief (TTI) om te leren hoe u dit kunt verbeteren voor een betere interactiviteit en responsiviteit van uw pagina's.
Zoals u kunt zien, is het wellicht niet voldoende om alleen op FCP te focussen om de prestaties en gebruikerservaring van uw website volledig te verbeteren.
Als u het verschil en de relatie tussen al deze bovenstaande statistieken kent, kunt u de responsiviteit en interactiviteit van uw pagina's gedurende de hele levenscyclus van het laden van de pagina optimaliseren.
Lees onze artikelen over andere webprestatiestatistieken:
Afsluiten
- First Contentful Paint (FCP) markeert het tijdstip in de laadtijdlijn van de pagina waarop het eerste inhoudselement wordt weergegeven en zichtbaar is in de browser van de gebruiker.
- U moet streven naar een FCP van minder dan 1.8 seconden. Houd er rekening mee dat snelle FCP een zichtbaar verschil maakt voor uw gebruikers en bijdraagt aan hun surftevredenheid.
- De meest voorkomende oorzaken van een slechte FCP-score zijn render-blocking resources, trage responstijd en een buitensporige DOM-grootte. Door deze problemen aan te pakken, kunt u uw pagina's versnellen en uw algehele FCP-score verbeteren.
- Hoewel FCP verward kan worden met andere webprestatiestatistieken, kan het begrijpen van de verschillen bijdragen aan uw FCP-score en betere prestatieresultaten voor uw website opleveren.
- In 2023, wanneer het belang van een goede gebruikerservaring onmiskenbaar is, Het verbeteren van FCP is niet langer een kwestie van 'of', maar van 'hoe' u het potentieel van uw pagina kunt maximaliseren. Contact om te zien hoe een gepersonaliseerd actieplan voor uw website ongeëvenaarde SEO- en bedrijfsresultaten kan opleveren.
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
- De toekomst slaan met Adryenn Ashley. Toegang hier.
- Bron: https://www.onely.com/blog/first-contentful-paint/
