First Contentful Paint (FCP) is een van de zes statistieken die worden bijgehouden in het gedeelte Prestaties van het Lighthouse-rapport. Elke statistiek legt een bepaald aspect van de laadsnelheid van de pagina vast.
Lighthouse geeft FCP in seconden weer:
![Een screenshot van de Lighthouse First Contentful Paint-audit](https://developer.chrome.google.cn/static/docs/lighthouse/performance/first-contentful-paint/image/a-screenshot-the-lightho-07286fe9106ca.png?authuser=0000&hl=nl)
Wat FCP meet
FCP meet hoe lang het duurt voordat de browser het eerste stukje DOM-inhoud weergeeft nadat een gebruiker naar uw pagina heeft genavigeerd. Afbeeldingen, niet-witte <canvas>
-elementen en SVG's op uw pagina worden beschouwd als DOM-inhoud; alles binnen een iframe is niet inbegrepen.
Hoe Lighthouse uw FCP-score bepaalt
Uw FCP-score is een vergelijking van de FCP-tijd van uw pagina en de FCP-tijden voor echte websites, gebaseerd op gegevens uit het HTTP-archief . Sites die in het negenennegentigste percentiel presteren, genereren FCP bijvoorbeeld in ongeveer 1,2 seconden. Als de FCP van uw website 1,2 seconden bedraagt, is uw FCP-score 99. Zie Hoe metrische scores worden bepaald om te zien hoe Lighthouse-scoredrempels worden ingesteld.
Deze tabel laat zien hoe u uw FCP-score moet interpreteren:
FCP-tijd (in seconden) | Kleur codering |
---|---|
0–1,8 | Groen (snel) |
1,8–3 | Oranje (matig) |
Meer dan 3 | Rood (langzaam) |
Hoe u uw FCP-score kunt verbeteren
Een probleem dat vooral belangrijk is voor FCP is de laadtijd van het lettertype. Bekijk het bericht Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen voor manieren om het laden van lettertypen te versnellen.
FCP volgen op apparaten van echte gebruikers
Voor meer informatie over hoe u kunt meten wanneer FCP daadwerkelijk plaatsvindt op de apparaten van uw gebruikers, gaat u naar de pagina Gebruikersgerichte prestatiestatistieken van Google. In het gedeelte FP/FCP bijhouden wordt beschreven hoe u programmatisch toegang krijgt tot FCP-gegevens en deze kunt indienen bij Google Analytics.
Zie Google's Beoordeling van laadprestaties in het echte leven met navigatie en resourcetiming voor meer informatie over het verzamelen van statistieken van echte gebruikers.
Hoe u uw algehele prestatiescore kunt verbeteren
Tenzij u een specifieke reden heeft om u op een bepaalde statistiek te concentreren, is het meestal beter om u te concentreren op het verbeteren van uw algehele prestatiescore.
Gebruik het gedeelte Mogelijkheden van uw Lighthouse-rapport om te bepalen welke verbeteringen de meeste waarde voor uw pagina zullen hebben. Hoe belangrijker de kans, hoe groter het effect dat dit zal hebben op uw prestatiescore. De Lighthouse-screenshot hieronder laat bijvoorbeeld zien dat het elimineren van render-blocking resources de grootste verbetering zal opleveren:
![Vuurtoren: sectie Mogelijkheden](https://developer.chrome.google.cn/static/docs/lighthouse/performance/interactive/image/lighthouse-opportunities-ec2197d9dce25_1920.png?authuser=0000&hl=nl)
Zie de landingspagina Prestatie-audits om te leren hoe u de kansen kunt benutten die in uw Lighthouse-rapport zijn geïdentificeerd.