Plus grand affichage de contenu (LCP)

TL;DR — Plus grand affichage de contenu (LCP) mesure comment long il takes pour le biggest chose on screen — généralement a hero image or a big bloquer de texte — à montrer up après quelqu’un clicks à votre page. Sous 2,5 seconds est bon. c’est un de Google’s three Core Web Vitals, et c’est le un la plupart sites struggle avec.

Ce que LCP is

Le premier impression personnes ont de votre site est comment rapide il apparaît à charger. LCP tries à put a number on que. Il mesure le amount de temps il takes à charger le unique largest visible element dans le viewport — le partie de lune page vous pouvez voir sans scrolling.

Que “largest element” is usually un of two choses:

• A big image — a hero banner, a product photo, a featured image.
• A big block of text — courant on article pages que don’t lead with an image.

«LCP is the moment that element finishes rendering, measured from when the page first started loading. The lower the number, the faster your page feels. » (Traduction) (Résumé en français de la section neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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

«Google sorts LCP into three buckets: » (Traduction) (Résumé en français de la section onze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- Good: 2.5 seconds or less » (Traduction) (Résumé en français de la section douze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Needs improvement: 2.5 to 4 seconds » (Traduction) (Résumé en français de la section douze, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Poor: more than 4 seconds » (Traduction) (Résumé en français de la section douze, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

vous êtes aiming pour que 2,5-deuxième mark. Et c’est judged on réel visitors à votre site, pas a tester vous exécuter une fois — donc c’est le experience votre réel public obtient on leur réel phones et connections.

Pourquoi it peut be hard

LCP est le Core Web Vital personnes struggle avec le la plupart. c’est parce que il a le la plupart moving parties: votre serveur a à respond, le navigateur a à trouver et download le image, et alors il a à en réalité paint il. A slowdown à quelconque de ceux étapes drags le entier number up. Compressing votre images est a courant premier guess — et il parfois aide — mais c’est souvent pas le réel bottleneck.

c’est aussi harder on mobile que desktop, parce que phones ont slower connections et moins processing power.

Que faire premier

Three rapide wins que fix the la plupart Erreurs fréquentes:

1. ne pas lazy-charger votre principal image. “Lazy loading” indique le navigateur à wait avant fetching an image. c’est great pour stuff far bas lune page — mais si vous faire il à votre hero image, vous êtes deliberately delaying le la plupart important chose on screen. Preuve à l’appui de cette affirmation An LCP image should not be lazy-loaded, and reducing resource load delay is a primary LCP optimization. Portée : web.dev guidance for image-based LCP elements. Niveau de confiance : élevé · Vérifié : 2026-07-14 web.dev: Optimize LCP
2. Tell le navigateur le principal image est important — il y a an attribut (fetchpriority="high") que fait exactly que. Put il on le un image c’est en réalité votre LCP candidate; slapping il on plusieurs images dilutes le signal.
3. Speed up votre serveur. Si votre serveur est lent à respond, rien sinon vous faire matters beaucoup.

Vouloir le complet mental model — le four sub-parties de LCP, comment trouver votre LCP element, le rendu et font stuff, et comment beaucoup ce en réalité matters pour rankings? Switch à le Avancé tab.

TL;DR — LCP est le rendre temps de le largest image or texte bloquer visible dans le viewport, relative à quand lune page commencé chargement. Bon est ≤ 2,5 s à le 75th percentile de réel utilisateurs (split par device); 2,5–4 s nécessite fonctionner, over 4 s est poor. c’est un de three Core Web Vitals et breaks dans four sub-parties — TTFB, resource charger delay, resource charger duration, element rendre delay — où TTFB et charger duration généralement dominate (guidelines, pas fixed shares — diagnose votre propre page). Top corrections: jamais lazy-charger le LCP image, ajouter fetchpriority="high" on le réel candidate, preload il quand il n’est pas dans le HTML, kill rendre-blocking CSS/JS, et corriger TTFB. c’est a champ metric — lab outils seulement approximate il — et le LCP element peut modifier during charger. Google confirms Core Web Vitals feed classement systèmes mais ne fait pas publish an exact LCP weight or appel il a tiebreaker; contenu pertinence encore dominates.

Ce que LCP en réalité measures

LCP rapports le rendre temps de le largest image or texte bloquer visible dans le viewport, mesuré relative à quand le utilisateur premier navigated à lune page. Google’s propre framing: c’est le closest standardized proxy pour quand le principal contenu apparaît à le utilisateur. Il replaced précédent, fuzzier metrics comme Premier Meaningful Paint et Speed Indexer.

A few choses que trip personnes up correct away:

• c’est pas “page load time.” Une page peut ont chaque resource récupéré et encore post a lent LCP si rendu le largest element était bloqué. LCP est à propos de que un element, pas le entier page.
• c’est pas le même as FCP. Premier affichage de contenu fires quand quelconque contenu premier apparaît; LCP waits pour le largest element. Une page peut ont a rapide FCP (le navbar paints) et a lent LCP (le hero image charge late).
• c’est a dynamic metric. Le navigateur dispatches a nouveau LCP candidate chaque temps a plus grand element becomes visible. Le dernier entry avant le utilisateur interacts (tap, scroll, keypress) or lune page unloads est le valeur que counts — interaction souvent changements qu’est-ce que visible, donc reporting arrête là. A candidate c’est plus tard supprimé depuis le DOM ne fait pas erase son propre entry — il stays le reported element unless a encore-larger un renders avant reporting arrête.

The thresholds — and pourquoi 2,5 seconds

Assessed at the 75th percentile of real-user page loads, segmented by device type. So three out of four visits besoin to come in sous 2,5 s pour an origin to réussir.

«Why 2.5 specifically? Google’s threshold methodology leaned on two things: human perception research pointing at roughly 1–3 seconds as the band that feels “immediate,” and CrUX achievability data showing 2.5 s was consistently achievable for well-optimized sites without being trivially easy. Tighter targets like 1.5 s or 2.0 s weren’t consistently achievable across enough origins, so they didn’t make the cut. » (Traduction) (Résumé en français de la section trente et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## What counts as the LCP element » (Traduction) (Résumé en français de la section trente-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«The element types considered for LCP: » (Traduction) (Résumé en français de la section trente-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- <img> elements » (Traduction) (Résumé en français de la section trente-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- <image> elements inside an <svg> » (Traduction) (Résumé en français de la section trente-quatre, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- <video> elements (the poster image load time, or the first frame, whichever is earlier) » (Traduction) (Résumé en français de la section trente-quatre, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- An element with a background image loaded via the CSS url() function » (Traduction) (Résumé en français de la section trente-quatre, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Block-level elements containing text nodes or other inline text children » (Traduction) (Résumé en français de la section trente-quatre, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

«The reported size is what’s actually visible in the viewport — portions clipped or scrolled off don’t count, and for images it’s the visible size or the intrinsic size, whichever is smaller. Margins, padding, and borders are ignored. A handful of elements get excluded by heuristics: anything with opacity: 0, elements that cover the whole viewport (treated as backgrounds), and low-entropy placeholder images. » (Traduction) (Résumé en français de la section trente-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«About three-quarters of pages have an image as their LCP element — so image work is usually the right first move. But not always, and not always compression (more on that next). The remaining chunk are text LCPs, where the lever is entirely different: it’s font loading, not image weight. » (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.)

«## The four sub-parts — the part most articles skip » (Traduction) (Résumé en français de la section trente-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«This is the framework I’d start any LCP diagnosis with. web.dev breaks LCP into four sequential sub-parts: » (Traduction) (Résumé en français de la section trente-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

1. Temps à Premier Byte (TTFB) — depuis quand le utilisateur commence chargement lune page à quand le navigateur receives le premier byte de HTML. Typical share: ~40% de total LCP.
2. Resource charger delay — le gap entre TTFB et le navigateur starting à charger le LCP resource. Ce est discovery temps. Typical share: sous 10%.
3. Resource charger duration — comment long le LCP resource itself takes à download. Typical share: ~40%.
4. Element rendre delay — depuis quand le resource finishes chargement à quand le element en réalité paints. Typical share: sous 10%.

Le principle behind le tableau: le vast majority de LCP temps devrait être spent chargement le HTML document et le LCP resource. Quelconque stretch où aucun est chargement est an opportunity à améliorer.

web.dev est explicit que ces percentages sont guidelines, pas strict règles — ne pas convert les dans absolute-deuxième targets, et ne pas force chaque page à match le split. ils sont seulement meaningful relative à chaque autre, et si votre LCP est consistently dans 2,5 seconds déjà, le relative proportions ne pas matter à tout. Utiliser le tableau à spot qui sub-partie est eating an outsized share on votre page, alors corriger que un — pas à chase an exact 40/10/40/10 split.

Et ici’s le bit que upends le courant assumption: as de February 2025 ces four sub-parties sont disponible dans le CrUX API pour image LCPs, et le Chrome team’s analysis de HTTP Archive données trouvé que image download temps était souvent le smallest partie de LCP temps. En d’autres termes, “just compress my images” frequently corrections le incorrect sub-partie. TTFB et discovery delay sont souvent le bigger levers.

How to trouver votre LCP element

Avant vous optimize n’importe quoi, trouver out qui element est votre LCP et qui sub-partie est le bottleneck:

• PageSpeed Insights — le Diagnostics section flags le LCP element, et le champ-données tab montre votre real-utilisateur score.
• Chrome DevTools — le Performances panel marks le LCP node on le timeline.
• Le web-vitals JS library — log LCP (et le element) depuis votre propre real-utilisateur monitoring.

How to améliorer LCP

Map chaque fix to the sub-part it targets:

Corriger resource charger delay (discovery). Ce est le highest-leverage et la plupart commonly broken un.

• Jamais lazy-charger votre LCP image. loading="lazy" on le LCP element toujours ajoute unnecessary charger delay. Reserve lazy chargement pour ci-dessous-le-fold images.
• Ajouter fetchpriority="high" à le probable LCP image donc le navigateur récupère il early à élevé priority.
• Preload il avec <link rel="preload"> quand le image n’est pas discoverable dans le initial HTML — Par exemple, quand c’est chargé via CSS or JavaScript. Chargement le hero image via JS est an anti-modèle precisely parce que il hides l’URL depuis le navigateur’s preload scanner.
• Host critical resources on le même origin donc le navigateur ne fait pas pay supplémentaire connection setup.

Preload et fetchpriority solve différent problèmes, donc ne pas reach pour les deux par habit. Preload exposes a resource le navigateur’s preload scanner voudrait sinon découvrir late (a JS- or CSS-chargé image, Par exemple); fetchpriority changements le récupérer priority de a resource le navigateur déjà trouvé. Si discovery et priority sont déjà correct — le image est a plain <img> dans le initial HTML — ajout soit peut faire little au-delà extrune requêtes. Vérifier a trace, appliquer le un que matches le réel problème, et confirmer le champ number déplacé.

Corriger element rendre delay.

• Reduce or inline rendre-blocking CSS; defer non-critical styles.
• Éviter synchronous scripts dans le <head>.
• Préférer rendu côté serveur or static generation donc le markup arrives ready à paint, et break up long main-thread tasks.

Reduce resource charger duration.

• Modern image formats (WebP, AVIF), sensible compression, et a CDN.
• Efficient Cache-Control. Et ne pas ignore network contention — lazy-loading le autre ci-dessous-fold images peut gratuit up bandwidth donc le LCP image lands sooner.

Reduce TTFB.

• Minimize redirections, drop unnecessary unique URL parameters, et optimize serveur réponse temps. Remarque que LCP inclut quelconque unload temps depuis le previous page, connection setup, et redirection temps — tout de qui roll dans TTFB.

Special cas: texte-based LCP. Quand le largest element est texte, le critical chemin est font chargement, pas image weight. font-display: optional or système fonts eliminate font-induced rendre delay; font-display: swap sans preloading le font fichier peut introduce il.

Lab vs. field — ce distinction matters

LCP est fundamentally a champ metric. Google assesses il on réel utilisateurs via CrUX, surfaced dans PageSpeed Insights’ champ tab et le Search Console Core Web Vitals rapport. Que champ données est ce que feeds rankings.

Lab outils — Lighthouse, Chrome DevTools, WebPageTest — seulement approximate il sous simulated conditions, et ils ne pas même utiliser le même scoring. Lighthouse s’applique stricter desktop thresholds (Bon ≤ 1,2 s) que le champ standard (≤ 2,5 s). Donc a passing Lighthouse score ne fait pas guarantee a passing CrUX score, et vice versa. Utiliser lab outils à debug et reproduce; confiance le champ données pour le réel verdict.

il y a a deuxième raison lab et champ numbers peut diverge, worth knowing donc an odd reading ne fait pas send vous chasing a phantom bug: le actuel LargestContentfulPaint navigateur API (encore a W3C Fonctionnement Draft) est scoped à a unique document charger. Il ne fait pas itself reset on back/forward cache (bfcache) restores or même-document SPA navigations, et pages que commencer off-screen — background tabs, prerendered pages — peut rapport inflated valeurs parce que timing exécute depuis charger plutôt que depuis quand le page en réalité became visible. Le reporting algorithm aussi halts on qualifying utilisateur entrée, donc si a utilisateur interacts avant votre principal contenu displays, LCP ne va pas capture il. None de ce changements le threshold tableau ci-dessus; il explique pourquoi a spécifique session’s number peut regarder incorrect quand le underlying navigation n’est pas a plain premier charger.

Fait LCP affecter rankings?

Oui, dans le sense que Google confirms Core Web Vitals feed son classement systèmes et recommends achieving bon scores. Mais actuel Recherche Central documentation ne fait pas publish an exact LCP weight et ne fait pas décrire il as a tiebreaker — Google’s propre framing est que page experience “can contribute to success in Search” pour requêtes où plusieurs pages déjà offer comparable, pertinent contenu, et que a bon score ne fait pas guarantee a classement boost. Contenu pertinence et qualité encore dominate. Optimize LCP parce que a faster-feeling page est genuinely meilleur pour utilisateurs (et conversions) — pas parce que le mechanism est documented as a rankings tiebreaker, parce que il n’est pas.

A couple de realities depuis le données: de le Core Web Vitals, LCP est le un sites struggle la plupart à améliorer, et c’est noticeably harder on mobile que desktop — slower CPUs et connections. On 3G et slower, le 2,5 s threshold peut feel presque impossible à hit.

Où ce fits

LCP est un de three Core Web Vitals, alongside Interaction jusqu’au prochain affichage et Décalage cumulatif de mise en page. Son premier sub-partie, Temps à Premier Byte, est son propre diagnostic metric, et Premier affichage de contenu sits correct suivant à il on le chargement timeline. Vous’ll voir tout de ces dans PageSpeed Insights, Lighthouse, et le Chrome Utilisateur Experience Rapport (CrUX). Chaque est son propre deep dive dans ce cluster.

AI summary

A condensed prendre on the Avancé version:

• LCP = rendre temps de le largest visible image or texte bloquer, relative à quand lune page commencé chargement. c’est le closest standardized proxy pour “quand fait le principal contenu apparaître.”
• Thresholds: Bon ≤ 2,5 s, Nécessite improvement 2,5–4 s, Poor > 4 s — à le 75th percentile de réel utilisateurs, split par device. c’est un de three Core Web Vitals.
• Pas page-charger temps, pas FCP. FCP = premier pixel de quelconque contenu; LCP = le largest element. LCP est aussi dynamic — le largest candidate peut modifier during charger; le dernier un avant utilisateur interaction counts.
• LCP elements: <img>, <image> dans <svg>, <video> poster, CSS background-image: url(), or a bloquer-level texte element. ~3 dans 4 pages ont an image LCP; le rest sont texte (où fonts, pas image weight, sont le lever).
• Four sub-parties: TTFB (~40%), resource charger delay (<10%), resource charger duration (~40%), element rendre delay (<10%) — web.dev calls ces guidelines, pas fixed shares; diagnose par page plutôt que chasing an exact split. CrUX 2025 données: image download est souvent le smallest partie — donc “just compress images” souvent corrections le incorrect chose.
• Top corrections: jamais lazy-charger le LCP image; ajouter fetchpriority="high" on le réel candidate; preload il quand c’est pas dans le HTML (preload et fetchpriority solve différent problèmes — ne pas reach pour les deux par habit); cut rendre-blocking CSS/JS; reduce TTFB.
• Champ, pas lab. CrUX/Search Console drive rankings; Lighthouse seulement approximates et utilise stricter desktop thresholds (≤ 1,2 s). Le actuel LargestContentfulPaint API est scoped à document charge et ne fait pas itself reset pour bfcache restores or même-document SPA navigations.
• Rankings: Google confirms CWV feed classement systèmes mais publishes aucun exact LCP weight et ne fait pas appel il a tiebreaker; contenu pertinence encore dominates. Hardest CWV à améliorer, et harder on mobile.

Documentation officielle

Primary-source guidance depuis Google’s Chrome et Recherche teams.

web.dev (Chrome team)

• Plus grand affichage de contenu (LCP) — le canonical definition: ce que counts as an LCP element, comment size est calculated, quand reporting arrête, et le measurement APIs.
• Optimize Plus grand affichage de contenu — le four sub-parties framework et le complet optimization playbook.
• Core Web Vitals — où LCP sits parmi le three Core Web Vitals.
• Comment le Core Web Vitals metrics thresholds étaient défini — le research et achievability données behind le 2,5 s mark.

Chrome pour Developers

• LCP image subparts et RTT maintenant disponible dans CrUX — le Feb 2025 champ-données release de le four sub-parties (image LCPs seulement).
• Plus grand affichage de contenu | Lighthouse — le lab metric et son device-spécifique scoring.

Recherche Google Central

• Understanding Core Web Vitals et Recherche Google résultats — comment Core Web Vitals factor dans Recherche.

Quotes from the source

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

web.dev — definition et behavior (Philip Walton & Barry Pollard, Google)

«- “LCP reports the render time of the largest image, text block, or video visible in the viewport, measured relative to when the user first navigated to the page.” 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.) «- On what’s measured: “LCP doesn’t consider margins, paddings, or borders applied using CSS.” Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- On when reporting stops: “The browser will stop reporting new entries as soon as the user interacts with the page (via a tap, scroll, or keypress), as user interaction often changes what’s visible to the user.” Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- On what’s included in the timing: “It is important to note that LCP includes any unload time from the previous page, connection set up time, redirect time, and other Time To First Byte (TTFB) delays.” Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

«web.dev — optimization (Philip Walton & Barry Pollard, Google) » (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.)

«- The single most important lazy-loading rule: “Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay.” 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.) «- The principle behind the sub-part targets: “The vast majority of the LCP time should be spent loading the HTML document and LCP source.” Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-cinq, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

Recherche Google Central — rankings

«- “We highly recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally.” (Relayed from the Search Central Core Web Vitals doc; confirm against the live page before treating as final.) » (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.)

LCP fix checklist

Fonctionner il roughly top à bottom — discovery et TTFB premier, parce que ils sont généralement le biggest, la plupart commonly broken levers.

• Trouvé le réel LCP element (PageSpeed Insights Diagnostics, DevTools Performances panel, or le web-vitals library) — ne pas optimize blind.
• Vérifié le four sub-parties à voir qui un est le bottleneck avant modification n’importe quoi.
• LCP image est pas loading="lazy" (lazy chargement belongs ci-dessous le fold seulement).
• LCP image a fetchpriority="high".
• LCP image est discoverable dans le initial HTML — or preloaded (<link rel="preload">) si c’est chargé via CSS/JS.
• Pas chargement le hero image via JavaScript (hides il depuis le preload scanner).
• Rendre-blocking CSS minimized/inlined; non-critical styles deferred.
• Aucun synchronous scripts dans le <head>; long tasks broken up.
• Modern image format (WebP/AVIF), sensible compression, servi via a CDN avec bon Cache-Control.
• Ci-dessous-fold images lazy-chargé donc ils ne pas contend pour bandwidth avec le LCP image.
• TTFB addressed: redirections minimized, serveur réponse optimized, junk URL params dropped.
• Texte LCP? En utilisant font-display: optional or système fonts, et preloading quelconque swapped font fichier.
• Verified contre champ données (CrUX / Search Console), pas simplement a Lighthouse lab exécuter.

LCP cheat sheet

Thresholds (75th percentile of réel utilisateurs, by device)

Le four sub-parties — ce que chaque est et le corriger

Ce que peut be the LCP element

• <img> · <image> à l’intérieur <svg> · <video> poster · CSS background-image: url() · block-level text

Excluded par heuristic: opacity: 0, complet-viewport “background” elements, faible-entropy placeholders.

Rapide facts

• LCP est a champ metric (CrUX / Search Console drive rankings); Lighthouse seulement approximates et utilise a stricter desktop Bon de ≤ 1,2 s.
• Le LCP element peut modifier during charger; le dernier candidate avant utilisateur interaction counts.
• ~3 dans 4 pages ont an image LCP; le rest sont texte (fonts sont le lever).
• Image download temps est souvent le smallest sub-partie — compression n’est pas toujours le réponse.
• LCP ≠ FCP; LCP ≠ total page charger temps.

Outils pour measuring and fixing LCP

Champ données (ce que rankings utiliser)

• PageSpeed Insights — champ tab montre votre real-utilisateur CrUX LCP; Diagnostics flags le LCP element.
• Search Console — Core Web Vitals rapport — LCP status à travers votre URLs, grouped, on real-utilisateur données.
• Chrome Utilisateur Experience Rapport (CrUX) — le underlying champ dataset; as de Feb 2025 inclut le four image-LCP sub-parties via le API.
• web-vitals JS library — log LCP et le LCP element depuis votre propre real-utilisateur monitoring.

Lab données (pour debugging)

• Lighthouse — rapide lab LCP et an opportunities liste (remember: stricter desktop thresholds que le champ).
• Chrome DevTools — Performances panel — marks le LCP node et le complet rendre timeline.
• WebPageTest — waterfall view pour pinning bas qui sub-partie est lent.

SEO robots d’exploration

• Ahrefs Site Audit — surfaces Core Web Vitals / performances problèmes à travers le site at scale.

How the outils themselves score

A actif exemple de le metric ce page décrit — well-known page-speed et monitoring services ranked on leur propre real-utilisateur mobile LCP (Chrome UX Rapport champ données):

LCP fixes que target the incorrect problem

«### Lazy-loading the hero image » (Traduction) (Résumé en français de la section cent seize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«loading="lazy" delays discovery of an above-the-fold image that is likely to become LCP. Load it eagerly, give the likely candidate fetchpriority="high", and reserve lazy loading for below-the-fold images. » (Traduction) (Résumé en français de la section cent dix-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«### Compressing every image before finding the bottleneck » (Traduction) (Résumé en français de la section cent dix-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Image download duration is only one of four LCP sub-parts and may be the smallest. Identify the LCP element and inspect TTFB, load delay, load duration, and render delay before choosing a fix. » (Traduction) (Résumé en français de la section cent dix-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«### Loading the hero through JavaScript » (Traduction) (Résumé en français de la section cent vingt, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

A JS-injected image hides son URL depuis le navigateur’s preload scanner et crée resource charger delay. Put le image dans le initial HTML or preload il quand CSS or JS doit propre il.

Declaring victory from un Lighthouse run

Lighthouse est a controlled diagnostic, pendant que Google’s CWV verdict comes depuis CrUX champ données. Utiliser lab exécute à vérifier le mechanism et wait pour real-utilisateur données à montrer si le p75 résultat improved.

Le LCP resource commence late

Symptom: a long gap apparaît entre TTFB et le LCP resource requête. Probable causer: lazy chargement, JS discovery, a CSS background image, or faible récupérer priority. Corriger: faire le resource discoverable dans initial HTML, supprimer lazy chargement, appliquer fetchpriority="high", or preload il. Confirmer la requête moves précédent dans a trace.

Le resource charge mais LCP encore fires late

Symptom: charger duration ends bien avant le LCP event. Probable causer: rendre-blocking CSS, synchronous JavaScript, a long task, or font rendu pour a texte LCP. Corriger: reduce blocking fonctionner et tester font stratégie pour texte; confirmer element rendre delay shrinks.

«## Lab LCP is good but field LCP is poor » (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.)

«Symptom: Lighthouse passes while CrUX or Search Console does not. Likely cause: real users have different devices, networks, cache states, geography, or LCP elements. Fix: segment field data, capture RUM element/sub-part details, and reproduce the slow segment rather than tuning only the default lab profile. » (Traduction) (Résumé en français de la section cent trente et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## The reported LCP element changes between runs » (Traduction) (Résumé en français de la section cent trente-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Symptom: DevTools identifies different images or text blocks. Likely cause: responsive breakpoints, personalization, late DOM changes, or competing candidates. Fix: test representative viewports and states, then optimize each recurring candidate instead of assuming one desktop hero covers every user. » (Traduction) (Résumé en français de la section cent trente-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Hero image discovery: delayed vs early » (Traduction) (Résumé en français de la section cent trente-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

A simplified delayed implementation hides le image behind JavaScript:

<div id="hero"></div>
<script>
  document.querySelector('#hero').innerHTML = '<img src="hero.webp" alt="">';
</script>

Le navigateur peut découvrir and prioritize ce version pendant que parsing HTML:

<img src="hero.webp" alt="" fetchpriority="high" width="1200" height="675">

«## CSS background image: undisclosed vs preloaded » (Traduction) (Résumé en français de la section cent quarante et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Quand le LCP image doit remain a CSS background, disclose il avant le stylesheet finishes:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

Le preload seulement aide quand son URL et requête attributs match le réel resource.

Liste recent LCP candidates in Chrome DevTools

Paste ce dans le Chrome DevTools Console, reload lune page, et watch chaque candidate le navigateur rapports. Le dernier candidate avant interaction est le pertinent un.

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.table({
      lcp: Math.round(entry.startTime),
      element: entry.element?.tagName,
      url: entry.url || '',
      size: entry.size,
    });
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

Trouver probable lazy-loaded above-the-fold images

Exécuter ce dans le DevTools Console. Il listes lazy images whose top edge begins dans le actuel viewport; vérifier le réel LCP candidate avant removing le attribut.

[...document.querySelectorAll('img[loading="lazy"]')]
  .filter((img) => img.getBoundingClientRect().top < innerHeight)
  .map((img) => ({ src: img.currentSrc || img.src, top: img.getBoundingClientRect().top }));

Extract image priority attributes in a robot d’exploration

Utiliser ce XPath in Screaming Frog custom extraction to retourner images marked as élevé priority:

//img[@fetchpriority='high']/@src

Prove an LCP corriger landed

Discovery-order tester

Tester à exécuter: record a DevTools Performances trace après modification le hero image. Attendu résultat: le LCP requête commence précédent et n’est pas lazy-chargé. Échec interpretation: le resource remains hidden, deprioritized, or bloqué behind un autre dependency. Monitoring window: immediate lab résultat. Rollback trigger: le modifier delays un autre critical resource or rend lab LCP consistently pire.

Render-delay tester

Tester à exécuter: comparer le LCP resource completion et LCP event dans equivalent avant/après traces. Attendu résultat: element rendre delay shrinks sans a nouveau layout or visual regression. Échec interpretation: CSS, JavaScript, or fonts encore bloquer paint. Monitoring window: immediate à travers representative viewports. Rollback trigger: broken rendu, manquant styles, or a pire recurring LCP.

Field-outcome tester

Tester à exécuter: monitor URL-level CrUX or premier-party RUM p75 LCP après deployment. Attendu résultat: p75 moves toward or remains dans le Bon threshold sans regressing INP or CLS. Échec interpretation: le lab cas était pas representative or un autre sub-partie dominates réel visits. Monitoring window: RUM peut lead; CrUX nécessite son rolling 28-day window à turn over. Rollback trigger: a sustained champ regression tied à le release.

LCP metrics worth tracking

Field p75 LCP

Metric: LCP à le 75th percentile par formulaire factor. Ce que il indique vous: si réel utilisateurs meet le Core Web Vitals chargement threshold. Comment pull il: CrUX, Search Console, or premier-party RUM. Benchmark / realistic range: Bon est à or ci-dessous 2,5 seconds; segment mobile et desktop. Cadence: weekly, avec le CrUX rolling window recorded.

LCP sub-part distribution

Metric: TTFB, resource charger delay, charger duration, et element rendre delay pour LCP. Ce que il indique vous: qui stage owns le wait. Comment pull il: representative lab traces et image-LCP subparts depuis CrUX/RUM où disponible. Benchmark / realistic range: utiliser le article’s approximate 40/10/40/10 diagnostic split as a guide, pas a universal performances promise. Cadence: après template releases et monthly pour priority templates.

Good-LCP URL coverage

Metric: important URL groupes with Bon field LCP. Ce que it indique vous: si improvement is broad or limited to a sample page. How to pull it: Search Console CWV groupes plus URL-level CrUX pour priority pages. Benchmark / realistic range: establish a baseline by template; low-traffic URLs may lack individual field données. Cadence: weekly.

Testez vos connaissances: Plus grand affichage de contenu

Five rapide questions on LCP measurement et diagnosis. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

Mon connexe writing

• Ce que Est Plus grand affichage de contenu (LCP) & Comment Améliorer Il — mon complet LCP guide on le Ahrefs blog.
• Ce que Sont Core Web Vitals (CWVs) & Comment Améliorer Les — comment LCP fits avec INP et CLS, et pourquoi c’est le hardest à corriger.
• Le Beginner’s Guide à SEO technique — où page performances sits dans le bigger picture.

Official (Google / Chrome)

• Plus grand affichage de contenu (LCP) et Optimize LCP — le canonical pair.
• Comment CWV thresholds étaient défini — le pourquoi behind 2,5 s.

Depuis others

• Corriger votre site web’s Plus grand affichage de contenu par optimizing image chargement — MDN’s developer-premier prendre, strong on bandwidth contention et le JS-image anti-modèle.
• Performances — 2025 Web Almanac — HTTP Archive’s annual deep-dive; source pour adoption stats on fetchpriority, preload usage, image vs texte LCP splits, et réussir rates par device.
• Plus grand affichage de contenu (LCP) — DebugBear’s docs cover waterfall analysis pour pinpointing sub-parties, progressive JPEG caveats, et iframe/soft-navigation edge cas.
• Plus grand affichage de contenu (LCP): Ce que c’est, Comment Mesurer & Optimize — corewebvitals.io; réel RUM benchmarks, entreprise impact cas studies (Vodafone Italy), et le Google Flights fetchpriority résultat.
• Plus grand affichage de contenu | MDN Web Docs — MDN référence pour le LargestContentfulPaint API, element types, et navigateur compatibility.

Stats worth citing

• LCP est le hardest Core Web Vital à réussir. Il a le la plupart components, qui est pourquoi sites struggle avec il plus que INP or CLS. Source
• Mobile est harder que desktop. Slower CPUs et connections push LCP up, et on 3G/lent connections le 2,5 s threshold est nearly impossible à hit. Source
• Image download temps est souvent le smallest partie de LCP. Chrome’s analysis de HTTP Archive données trouvé download duration frequently n’est pas le bottleneck — TTFB et discovery delay généralement sont. Source
• CrUX coverage est thin. Dans notre study de 42 million pages, seulement ~11,4% avait associated CrUX champ données — la plupart pages ne pas obtenir suffisant real-utilisateur trafic à être mesuré. Source
• 62% de mobile pages vs 74% de desktop pages achieve Bon LCP (2025 Web Almanac). Le mobile gap reflects slower CPUs et network connections. Source
• Seulement 2,1% de mobile pages preload leur LCP image, despite 76% having an image as leur LCP element — a significant missed optimization opportunity (2025 Web Almanac). Source
• fetchpriority="high" adoption grew depuis 0,03% de mobile sites dans 2022 à 17,3% dans 2025, largely driven par WordPress core ajout il (2025 Web Almanac). Google Flights saw a 700 ms LCP improvement depuis ce unique attribut. Source

Videos

• Recherche Google Central (YouTube) — le Core Web Vitals et page-experience explainers, notamment Chrome team walkthroughs de LCP optimization. Channel

Journal des modifications