Premier affichage de contenu (FCP)

TL;DR — Premier affichage de contenu (FCP) est le moment a visitor voit le premier bit de votre page — quelconque texte, image, or graphic — au lieu de a blank white screen. Faster est meilleur; sous 1,8 seconds est le “bon” mark. c’est a utile speed vérifier, mais il est pas un de le metrics Google utilise pour classement.

Ce que FCP en réalité is

Quand quelqu’un clicks a lien à votre page, il y a a court stretch où ils sont staring à rien — a blank screen — pendant que le navigateur récupère et processes votre page. Premier affichage de contenu est le instant que blank screen turns dans quelque chose réel: a headline, a logo, a photo, n’importe quoi le visitor peut en réalité voir.

c’est le entier idea. FCP réponses un simple question: “Comment long jusqu’à le utilisateur voit lune page est alive et doing quelque chose?” Une page que paints contenu dans half a deuxième feels rapide. Une page que sits blank pour three seconds feels broken — et personnes laisser.

Ce que counts as “contenu”

FCP fires quand le navigateur draws quelconque of ces onto the screen:

• Text (a heading, a paragraph, a nav lien)
• Images, notamment background images
• <svg> graphics
• A non-white <canvas> element

A plain background color par itself fait pas count — c’est a différent, précédent chose appelé Premier Paint. FCP seulement counts quand réel contenu montre up.

What’s a bon score?

Google’s bands, mesuré à travers réel visitors:

Vous’ll voir votre FCP dans outils comme PageSpeed Insights et Lighthouse — le même rapports que montrer votre Core Web Vitals.

Fait FCP affecter my Google rankings?

Aucun — pas directement. Ce est le partie la plupart personnes obtenir incorrect. Le metrics Google en réalité utilise pour classement sont le three Core Web Vitals: LCP, INP, et CLS. FCP n’est pas un de les.

Mais ici’s pourquoi c’est encore worth watching: le choses que faire FCP lent — a sluggish serveur, big stylesheets et scripts que bloquer lune page depuis drawing — sont souvent le même choses que hurt Plus grand affichage de contenu (LCP), qui est a classement signal. Donc fixing FCP’s root causes frequently aide LCP aussi — mais c’est pas a guarantee, since LCP a causes de son propre (le size et charger priority de son spécifique largest element). Think de FCP as le smoke alarm: worth checking, mais pas proof le fire’s out.

The rapide fixes

Si votre FCP est lent, le usual suspects (et Que faire):

• Rendre-blocking fichiers. CSS et JavaScript dans votre page’s <head> peut arrêter le navigateur depuis drawing n’importe quoi jusqu’à ils finish chargement. Ce est le #1 causer.
• A lent serveur. Si votre serveur takes a long temps à respond (élevé Temps à Premier Byte), le navigateur ne peut pas paint jusqu’à le bytes arrive.
• Fonts que hide votre texte. Some font setups laisser texte invisible pour up à three seconds pendant que a web font charge. Switching le règle à font-display: swap montre fallback texte immédiatement.

Vouloir le technique version — le lab-vs-champ gap, le FCP/LCP diagnostic chain, et le complet corriger liste? Switch à le Avancé tab.

TL;DR — FCP est le temps depuis navigation commencer à quand quelconque page contenu (texte, image, <svg>, or non-white <canvas>) premier renders. Il est pas a Core Web Vital — c’est a supplementary, lab-et-champ diagnostic metric, et a building bloquer de LCP (FCP se produit à or avant LCP). Champ thresholds (p75): Bon ≤ 1,8 s, nécessite-improvement ≤ 3,0 s, poor > 3,0 s. Dans Lighthouse 10 c’est 10% de le Performances score. Parce que FCP’s clock commence à navigation — il inclut redirection temps, connection setup, et TTFB — lab (Lighthouse) et champ (CrUX) numbers souvent diverge. Corriger il où il lives: rendre-blocking CSS/JS premier, alors TTFB, alors fonts.

Ce que FCP measures (precisely)

Google’s definition, depuis Philip Walton’s web.dev article, est le accuracy spine ici: “Premier affichage de contenu (FCP) mesure le temps depuis quand le utilisateur premier navigated à lune page à quand quelconque partie de lune page’s contenu est rendu on le screen.” “Contenu,” per le même doc, signifie “texte, images (notamment background images), <svg> elements, or non-white <canvas> elements.”

Le word que fait tout le fonctionner est quelconque. FCP ne fait pas care ce que renders — a 40-pixel logo counts le même as a complet hero image. c’est le “is anything on screen yet?” signal, qui est exactly pourquoi c’est an early indicator plutôt que a completion metric.

Un detail c’est facile à miss et changements comment vous lire le number: FCP’s clock commence à navigation, donc il bundles dans tout que se produit avant votre HTML est même parsed. Google’s propre Clé Point: “FCP inclut quelconque unload temps depuis le previous page, connection définir up temps, redirection temps, et Temps À Premier Byte (TTFB) qui peut être significant quand mesuré dans le champ.” A serveur que takes 1,5 s à respond a déjà burned la plupart de votre 1,8 s budget avant le navigateur a processed a unique byte.

FCP n’est pas a Core Web Vital

Let me être blunt à propos de ce parce que la plupart pages hedge il: FCP n’est pas a Core Web Vital et n’est pas partie de Google’s classement signaux. Le Core Web Vitals sont LCP, INP, et CLS — et FCP n’est pas mentioned anywhere on Google’s Recherche classement Core Web Vitals page.

Ce que FCP est, dans Google’s taxonomy, est an “Other Web Vital” — a supplementary metric c’est utile pour diagnosis. web.dev puts il ce façon: “le metrics Temps à Premier Byte (TTFB) et Premier affichage de contenu (FCP) sont les deux vital aspects de le chargement experience, et sont les deux utile dans diagnosing problèmes avec LCP (lent serveur réponse times or ressources qui bloquent le rendu, respectively).”

Donc le honest framing pour stakeholders est deux-sided, et vous devez state les deux halves sans flinching:

• FCP ne fait pas affecter rankings directement. ne pas optimize FCP “pour SEO.”
• FCP est a great diagnostic pour LCP, qui fait affecter rankings. Rendre-blocking resources montrer up dans FCP premier.

FCP vs Premier Paint (FP)

Ces obtenir conflated constantly:

«- First Paint (FP) fires when the browser paints anything at all — including a bare background color with no actual content. » (Traduction) (Résumé en français de la section trente-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- FCP fires only when eligible content renders: text, images (including background images), <svg> elements, or non-white <canvas> elements. That’s a specific, spec-defined list — not a loose “any DOM content” rule — and it’s worth keeping precise, since a background image counts even though it isn’t text in the DOM. » (Traduction) (Résumé en français de la section trente-six, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

Donc FP ≤ FCP, toujours. On la plupart pages ils sont nearly identical, parce que painting a background color avec aucun contenu on top est rare. Quand là est a meaningful gap, il généralement signifie a cosmetic background painted avant quelconque contenu réel a fait. Le Paint Timing API renvoie les deux first-paint et first-contentful-paint entries — mais FCP est le un worth analyzing; FP rarely indique vous n’importe quoi actionable.

FCP vs LCP

The autre pair personnes merge:

• FCP = quand quelconque contenu paints. Fires early. Pourrait être a tiny logo or a nav lien.
• LCP = quand le largest element dans le viewport renders. Fires à or après FCP.

Google’s wording: FCP mesure quand quelconque contenu est painted et LCP quand le principal contenu est painted, donc LCP est prévu à être plus selective. Lire que as “plus selective,” pas “certified correct” — aucun metric proves lune page’s réel principal contenu est complet or utile à le visitor. FCP simplement confirms quelque chose eligible painted; LCP confirms le largest eligible candidate a fait. Une page peut ont a rapide FCP (logo à 0,5 s) et a lent LCP (hero image à 4 s) — que gap est itself a utile diagnostic. Et si votre FCP est fermer à votre LCP, c’est souvent a bon sign: il signifie le premier chose painted est aussi le largest un, avec aucun wasted early-paint on chrome que ne fait pas matter à le utilisateur.

«One measurement oddity worth knowing: because of security restrictions on cross-origin image timing, the browser API can in rare cases report LCP earlier than FCP. That’s a measurement artifact, not something that physically happened. » (Traduction) (Résumé en français de la section quarante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Thresholds — and why lab and field disagree » (Traduction) (Résumé en français de la section quarante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Field thresholds (CrUX, p75): Good ≤ 1.8 s · needs improvement ≤ 3.0 s · poor > 3.0 s. Google’s guidance is to measure at the 75th percentile of page loads, split across mobile and desktop.

» (Traduction) (Résumé en français de la section quarante-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«But Lighthouse desktop uses different, stricter cutoffs — green is roughly 0–0.9 s, orange 0.9–1.6 s, red over 1.6 s — because the lab runs a clean, throttled Chrome on a simulated device, not real-world conditions. (Those bands, like the score weights below, are Lighthouse-version-specific — this reflects the current audit doc as of this writing.) The Lighthouse FCP score is “a comparison of your page’s FCP time and FCP times for real websites, based on data from the HTTP Archive.” » (Traduction) (Résumé en français de la section quarante-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Ce is the unique la plupart courant source of FCP confusion, so internalize it:

Le 1,8 s “bon” line est le champ (CrUX p75) threshold. Lighthouse desktop’s “green” line est ~0,9 s. Ils sont différent scales pour différent jobs.

Champ et lab numbers diverge mainly parce que ils sample différent populations, pas parce que un est universally “plus true.” Lighthouse exécute a unique clean session on fixed device/network conditions. Champ/CrUX aggregates réel devices, réel networks, cache states, et navigation types — notamment back/forward-cache restores et prerendered pages, qui ne pas automatiquement obtenir a fresh FCP le façon a normal navigation fait; ils besoin leur propre lifecycle handling (le web-vitals library fait ce pour vous). On la plupart sites le champ number fait lire plus élevé — réel utilisateurs carry chaîne de redirectionss, previous- page unload temps, et cold connections a lab exécuter skips — mais c’est a tendency, pas a règle. Avant reading a lab/champ gap as a problème, vérifier vous êtes comparing like-pour-like (même device class, même network conditions). Utiliser champ données pour votre real-world number et Lighthouse pour diagnosis.

Où FCP sits in the Lighthouse score

Dans Lighthouse 10 — le actuel version as de ce writing, pas a permanent figure — FCP est 10% de le Performances score. Le complet weighting:

Le Performances score est a weighted average de le individual metric scores, et Google notes le weightings modifier over temps as leur research evolves — FCP a held à 10% depuis Lighthouse 8 via 10, mais confirmer contre whatever version vous êtes running avant treating “10%” as timeless. Le practical lire: a perfect FCP peut seulement déplacer votre Lighthouse number donc far — et a mauvais FCP souvent points à a mauvais LCP aussi (ils share root causes), though c’est an overlap worth checking, pas quelque chose le score guarantees.

Ce que causes a slow FCP

In rough priority order:

1. Ressources qui bloquent le rendu — le #1 killer. CSS et synchronous JS dans <head> force le navigateur à wait: il ne peut pas construire le CSSOM et rendre tree, donc il ne peut pas paint n’importe quoi, jusqu’à ceux fichiers sont downloaded et parsed.
2. Élevé TTFB — FCP ne peut pas fire avant bytes arrive. A lent serveur est le premier domino, et c’est à l’intérieur le FCP measurement.
3. Chaîne de redirectionss — chaque redirection est a complet round-trip ajouté avant le premier byte.
4. Webfont chargement stratégie — font-display: block (or aucun règle) peut laisser texte invisible pour up à ~3 seconds. Même si paint technically fires on a background, le utilisateur voit rien utile.

Comment corriger it

Le complet liste, mais avec a priority order le docs ne pas donner vous. Ces sont le courant levers, pas universal ones — vérifier votre propre trace or filmstrip premier à voir qui resource or phase est en réalité delaying votre FCP candidate avant reaching pour corrections (preconnect, preload, a font-display modifier) que peut pas appliquer à votre page:

Do ces premier (biggest wins):

• Eliminate rendre-blocking CSS et JavaScript. Inline le critical, ci-dessus-le-fold CSS directement dans <head>; charger le rest asynchronously; ajouter async/defer à non-critical scripts. Repositioning a <link> balise fait pas aider — le navigateur ne va pas paint jusqu’à tout CSS est chargé et parsed regardless de où le balise sits.
• Reduce TTFB (serveur réponse temps). Mise en cache, a CDN, a faster origin — n’importe quoi que obtient le premier byte out sooner directement shaves FCP.
• Corriger font chargement. Utiliser font-display: swap (montre fallback texte immédiatement, swaps dans le web font quand ready) or font-display: optional (skips le web font si il n’est pas déjà mis en cache). Éviter font-display: block pour critical texte — c’est le worst pour FCP.

Alors tidy up the rest:

• Preconnect à requis origins avec <link rel="preconnect"> — establishing early connections à important tiers origins peut enregistrer 100–500 ms.
• Preload clé requêtes (<link rel="preload">) pour a critical font or le LCP image.
• Minify CSS, supprimer unused CSS, supprimer unused JavaScript — plus petit fichiers parse et unblock paint faster.
• Éviter plusieurs redirections, éviter enormous network payloads, servir static assets avec an efficient cache policy, éviter an excessive DOM size, et minimize critical requête depth. General payload hygiene que tout feeds premier paint.

Le FCP → TTFB → LCP diagnostic chain

Ce est comment je voudrais en réalité utiliser FCP, et c’est le framing le docs gesture à mais ne pas develop. Treat le three chargement metrics as un workflow:

1. FCP est élevé → vérifier pour ressources qui bloquent le rendu (CSS/JS dans <head>). c’est le la plupart courant causer et le fastest win.
2. Aussi vérifier TTFB — parce que FCP inclut il, a lent serveur inflates FCP avant quelconque rendre-blocking même enters le picture. web.dev’s guidance: parce que TTFB precedes les deux FCP et LCP, votre serveur devrait respond rapide suffisant que le 75th percentile de utilisateurs hit a “bon” FCP.
3. Ces même problèmes souvent cascade dans LCP — le metric c’est en réalité a classement signal — parce que FCP et LCP frequently share root causes. c’est an overlap worth checking, pas a guarantee: LCP a factors de son propre (le size, priority, et charger chemin de son spécifique largest element), donc fixing FCP’s causes ne fait pas promise a fixed LCP. c’est le correct premier placer à regarder, pas le dernier étape.

c’est le valeur de FCP pour an SEO: c’est a cheap, early lire on si le chargement chemin est sain, avant le plus selective LCP measurement même completes.

AI summary

A condensed prendre on the Avancé version:

• FCP = temps depuis navigation commencer à quand quelconque contenu premier renders — texte, images (incl. background), <svg>, or non-white <canvas>. c’est le “is anything on screen yet?” signal.
• FCP n’est pas a Core Web Vital. Le classement signaux sont LCP, INP, CLS. FCP est a supplementary, lab-et-champ diagnostic metric — pas a direct facteur de classement.
• c’est a building bloquer de LCP (FCP se produit à or avant LCP), donc il souvent catches le même ressources qui bloquent le rendu et lent TTFB que hurt LCP — qui fait affecter rankings — mais fixing FCP’s causes ne fait pas guarantee LCP est fixed; LCP a factors de son propre.
• Champ thresholds (CrUX p75): Bon ≤ 1,8 s · nécessite improvement ≤ 3,0 s · poor > 3,0 s.
• Lab ≠ champ, et “field is always higher” est a tendency, pas a règle. Lighthouse desktop’s ~0,9 s “green” line est stricter que le 1,8 s champ threshold parce que c’est un clean exécuter on fixed conditions; champ/CrUX aggregates réel devices, networks, cache states, et navigation types (notamment bfcache restores et prerendered pages). Match populations avant reading a gap as a problème — utiliser champ pour votre real-world number, lab pour diagnosis.
• FCP vs FP: Premier Paint fires on quelconque paint (même a background color); FCP nécessite eligible contenu (texte, images incl. background images, SVG, non-white canvas). FP ≤ FCP toujours.
• FCP vs LCP: FCP = quelconque eligible contenu; LCP = largest eligible candidate. Aucun proves lune page’s réel principal contenu est complet or utile — ils sont proxies. Rapide FCP + lent LCP est a réel, courant gap.
• Lighthouse 10 (actuel as de ce writing) weight: 10% — TBT 30%, LCP 25%, CLS 25%, FCP 10%, Speed Indexer 10%; weights shift entre Lighthouse versions.
• Top corrections, dans order: eliminate rendre-blocking CSS/JS → reduce TTFB → corriger fonts (font-display: swap/optional) → preconnect/preload → minify/cache/DOM hygiene.

«## Official documentation » (Traduction) (Résumé en français de la section soixante-treize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Primary-source documentation on FCP from Google. » (Traduction) (Résumé en français de la section soixante-quatorze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«web.dev (Google) » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- First Contentful Paint (FCP) — Philip Walton’s canonical definition, the “what counts as content” list, the 1.8 s threshold, the Key Point about TTFB/redirects, and how to measure FCP with the Paint Timing API and the web-vitals library. » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Web Vitals — where FCP sits: an “Other Web Vital,” supplementary to the Core Web Vitals (LCP, INP, CLS), useful for diagnosing LCP. » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Largest Contentful Paint (LCP) — the FCP-vs-LCP distinction and how the two relate. » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Time to First Byte (TTFB) — why TTFB precedes (and is included in) FCP. » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- User-centric performance metrics — FCP’s classification as both a lab and a field metric. » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.)

«Lighthouse / Chrome Developers » (Traduction) (Résumé en français de la section soixante-seize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- First Contentful Paint audit — the Lighthouse desktop rating bands (green ≤ 0.9 s) and how the FCP score is computed against HTTP Archive data. » (Traduction) (Résumé en français de la section soixante-seize, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Lighthouse performance scoring — the metric weights, including FCP at 10% of the Performance score in Lighthouse 10. » (Traduction) (Résumé en français de la section soixante-seize, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google Search Central » (Traduction) (Résumé en français de la section soixante-dix-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Core Web Vitals & Google Search — the ranking page; lists LCP, INP, and CLS. FCP is not on it, which is the point. » (Traduction) (Résumé en français de la section soixante-dix-sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Quotes from the source » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

On-le-record statements depuis Google’s documentation. Chaque lien est a deep lien que jumps à le quoted passage on le page source.

web.dev — the definition

«- “First Contentful Paint (FCP) measures the time from when the user first navigated to the page to when any part of the page’s content is rendered on the screen.” — Philip Walton, First Contentful Paint (FCP), web.dev (updated Dec 6 2023). Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«web.dev — the threshold » (Traduction) (Résumé en français de la section quatre-vingt-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “sites should strive to have a First Contentful Paint of 1.8 seconds or less.” — same source. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«web.dev — what FCP includes (the Key Point) » (Traduction) (Résumé en français de la section quatre-vingt-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “FCP includes any unload time from the previous page, connection set up time, redirect time, and Time To First Byte (TTFB) which can be significant when measured in the field.” — same source. » (Traduction) (Résumé en français de la section quatre-vingt-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

web.dev — FCP’s role relative à le Core Web Vitals

«- “the metrics Time to First Byte (TTFB) and First Contentful Paint (FCP) are both vital aspects of the loading experience, and are both useful in diagnosing issues with LCP (slow server response times or render-blocking resources, respectively).” — Web Vitals, web.dev. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Lighthouse — how the FCP score is computed » (Traduction) (Résumé en français de la section quatre-vingt-dix, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “Your FCP score is a comparison of your page’s FCP time and FCP times for real websites, based on data from the HTTP Archive.” — First Contentful Paint audit, developer.chrome.com. » (Traduction) (Résumé en français de la section quatre-vingt-onze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Lighthouse — how the Performance score works » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “The Performance score is a weighted average of the metric scores.” » (Traduction) (Résumé en français de la section quatre-vingt-treize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “The weightings have changed over time because the Lighthouse team is regularly doing research and gathering feedback to understand what has the biggest impact on user-perceived performance.” — Lighthouse performance scoring, developer.chrome.com. » (Traduction) (Résumé en français de la section quatre-vingt-treize, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

Slow-FCP triage checklist

Quand FCP is élevé, fonctionner bas ce liste in order — it’s roughly biggest-win-first:

• Vérifier le champ number, pas simplement Lighthouse. Lire CrUX/PageSpeed Insights p75 pour le réel FCP; utiliser Lighthouse seulement à diagnose.
• Hunt ressources qui bloquent le rendu. CSS et synchronous JS dans <head> sont le #1 causer — Lighthouse’s “Eliminate render-blocking resources” audit listes les.
• Inline critical ci-dessus-le-fold CSS; charger le rest asynchronously.
• Ajouter async/defer à non-critical scripts; déplacer tiers balises après premier paint.
• Mesurer TTFB. c’est à l’intérieur FCP — a lent serveur inflates FCP avant n’importe quoi sinon. Ajouter mise en cache / a CDN / a faster origin.
• Kill chaîne de redirectionss — chaque hop est a complet round-trip avant le premier byte.
• Corriger fonts: utiliser font-display: swap or optional; jamais block pour critical texte. Preload le critical font fichier.
• Preconnect à requis tiers origins; preload le LCP image / clé requêtes.
• Trim payload: minify CSS, supprimer unused CSS/JS, efficient cache policy, plus petit DOM, shorter critical requête depth.
• Re-vérifier LCP afterward — le même corrections devrait ont déplacé il, et LCP est le un que affecte rankings.

FCP cheat sheet

Champ thresholds (CrUX, 75th percentile)

Lighthouse desktop rating (lab — remarque: stricter que field)

Lighthouse 10 Performance-score weights (current as of ce writing — weights shift entre Lighthouse versions)

The three chargement metrics, untangled

Order de events: FP ≤ FCP ≤ LCP.

Ce que counts as “content” pour FCP text · images (incl. background images) · <svg> elements · non-white <canvas> elements

Rapide facts

• FCP’s clock commence à navigation — il inclut redirection temps, connection setup, et TTFB.
• FCP est measurable dans les deux lab et champ.
• font-display: utiliser swap/optional; éviter block (invisible texte up à ~3 s).
• Preconnect à tiers origins peut enregistrer 100–500 ms.

Outils pour measuring FCP

Champ (real-utilisateur) données

• PageSpeed Insights — montre votre URL’s CrUX p75 FCP (champ) alongside a Lighthouse (lab) exécuter.
• Chrome Utilisateur Experience Rapport (CrUX) — le real-utilisateur dataset behind le champ numbers, via le API or BigQuery.
• web-vitals JavaScript library — drop onFCP(console.log) (or send il à votre analytics) à capture FCP depuis votre propre visitors; il handles bfcache et background-tab edge cas.

Lab (simulated) données

• Lighthouse — dans Chrome DevTools, PageSpeed Insights, or le CLI. Utiliser il à diagnose FCP (le “Eliminate render-blocking resources” audit est le clé un).
• Chrome DevTools Performances panel — voir exactly quand premier paint et premier affichage de contenu fire on a recorded charger.

Mesurer il yourself avec le Paint Timing API

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

Or utiliser the web-vitals library (recommended)

import {onFCP} from 'web-vitals';
onFCP(console.log);

A quelques caveats le raw API ne fait pas handle que le web-vitals library fait: il ignores FCP fired pour background tabs, encore rapports FCP quand une page est restored depuis le back/forward cache (a fresh navigation event ne fait pas automatiquement fire pour a bfcache restore, donc il nécessite explicit handling), et utilise activationStart plutôt que navigation commencer as le clock origin pour prerendered pages. Cross-origin iframe paint timing remains a connu gap — une page whose principal contenu renders à l’intérieur un peut montrer a misleadingly rapide FCP.

FCP mistakes que hide the réel bottleneck

• Treating FCP as a Core Web Vital. FCP est a utile diagnostic, mais LCP, INP, et CLS sont le Core Web Vitals utilisé dans Google’s classement systèmes. Utiliser FCP à investigate le blank-screen phase, pas as a substitute pour champ CWV données.
• Optimizing a tiny logo parce que il becomes le premier paint. An précédent mais meaningless paint peut améliorer FCP pendant que le utile page contenu encore arrives late. Vérifier LCP et le filmstrip alongside FCP donc le modifier améliore ce que a visitor en réalité voit.
• Starting avec image compression quand lune page est blank. Si rien peut paint, le usual blockers sont serveur réponse temps, rendre-blocking CSS, synchronous JavaScript, or fonts. Suivre la requête waterfall avant modification unrelated assets.
• Comparing unrelated Lighthouse exécute. Device emulation, network conditions, cache state, et exécuter-à-exécuter variation tout déplacer a lab FCP. Comparer repeated exécute sous le même paramètres et confirmer le résultat avec champ données où disponible.

«## The blank-screen budget » (Traduction) (Résumé en français de la section cent vingt-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Break FCP into three consecutive questions instead of treating the final number as one problem: » (Traduction) (Résumé en français de la section cent vingt-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«1. How long before the HTML arrives? Inspect TTFB. A slow response means the browser cannot begin useful work, so start with the server, cache, redirects, or connection setup. 2. How long before the browser can render? Inspect render-blocking stylesheets, synchronous scripts, and font behavior. The HTML may be present while the main thread or render path is still blocked. 3. What actually becomes the first content? Use a filmstrip or trace to confirm that the first paint is meaningful text or imagery, not a token element that makes the metric look better without improving the experience. » (Traduction) (Résumé en français de la section cent trente, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Le framework garde corrections dans order: delivery premier, rendu deuxième, usefulness third. Re-exécuter le même lab profile après chaque modifier donc vous know qui phase déplacé.

Testez vos connaissances: Premier affichage de contenu

Five rapide questions on ce que FCP measures and how to diagnose it. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

Google / web.dev

• Premier affichage de contenu (FCP) — le canonical référence: definition, thresholds, measurement code, et le complet optimization liste.
• Web Vitals — comment FCP relates à le Core Web Vitals et pourquoi c’est a diagnostic metric.
• Plus grand affichage de contenu (LCP) — le metric FCP aide vous diagnose, et a Core Web Vital.
• Temps à Premier Byte (TTFB) — le serveur-réponse metric que lives à l’intérieur FCP.

Lighthouse

• Premier affichage de contenu audit — desktop rating bands et comment le score est computed.
• Lighthouse performances scoring — le metric weights, FCP à 10%.

Mon connexe writing

• Le Beginner’s Guide à SEO technique — où vitesse de page fits dans le bigger picture.
• Core Web Vitals: Ce que Ils Sont & Comment Améliorer Les — le classement-signal metrics FCP feeds dans.

Depuis autour le industry

• Premier affichage de contenu (FCP) — Philip Walton’s canonical Google article: definition, thresholds, Paint Timing API code, et le complet optimization liste.
• Web Vitals — Google’s framework explaining où FCP sits (an “Other Web Vital,” supplementary à le Core Web Vitals) et son role dans diagnosing LCP.
• Premier affichage de contenu audit — Chrome Developers doc covering Lighthouse desktop rating bands et comment le FCP score est computed contre HTTP Archive données.
• Temps à Premier Byte (TTFB) — Google’s guide on pourquoi TTFB precedes et est inclus dans FCP, et comment a lent serveur eats votre FCP budget avant le navigateur paints a unique pixel.
• Eliminate ressources qui bloquent le rendu — Chrome Developers guide on le #1 FCP killer: CSS et synchronous JS dans <head> que bloquer le navigateur depuis painting.
• Garantir texte remains visible during webfont charger — Chrome Developers audit explaining font-display valeurs et pourquoi block delays FCP pendant que swap or optional garde texte visible.
• Premier affichage de contenu — NitroPack’s practical FCP guide avec CMS-spécifique optimization tips et a clair champ-vs-lab explanation.

Stats worth citing

• Bon FCP = ≤ 1,8 s à le 75th percentile de réel utilisateurs; nécessite-improvement up à 3,0 s; poor au-delà que (champ/CrUX thresholds). Source
• Lighthouse desktop est stricter: ~0–0,9 s est “green,” parce que le lab exécute a throttled, simulated environment plutôt que real-world conditions. Source
• FCP est 10% de le Lighthouse 10 Performances score (actuel as de ce writing — weights shift entre Lighthouse versions) — alongside TBT 30%, LCP 25%, CLS 25%, et Speed Indexer 10%. Source
• Preconnecting à tiers origins peut enregistrer 100–500 ms de charger temps par establishing early connections. Source

Journal des modifications