Dimension Core/Dash : LCP Priority

Dimension : Ressource : LCP Priority

La dimension LCP Priority segmente les données de performance selon la manière dont le navigateur a découvert et priorisé la ressource LCP. Alors que la dimension "Element Type" vous indique ce qu'est l'élément (Texte vs Image), cette dimension vous explique pourquoi le navigateur a retardé son chargement.

C'est votre outil d'audit principal pour le Load Delay. Il révèle si votre asset LCP lutte pour la bande passante ou s'il est artificiellement retardé par des attributs HTML incorrects.

La hiérarchie de priorité

Le navigateur attribue une priorité de téléchargement à chaque ressource. Cette dimension associe l'élément LCP à l'un des cinq états de chargement spécifiques, classés du plus destructeur (Lazy Loaded) au plus optimal (Text/High Priority).

Contexte : Lorsqu'un utilisateur revient sur votre page via le bouton "Précédent" ou "Recharger", la plupart des navigateurs le ramènent à sa position verticale précédente. Si cette position est en dessous de la ligne de flottaison, votre Hero Image optimisée n'est plus le LCP. Au lieu de cela, le navigateur mesure le plus grand élément dans le viewport actuel. Cela crée un ensemble inévitable d'événements "Not Preloaded" dans votre jeu de données. Et c'est tout à fait normal !

1. Lazy Loaded 

Si plus de 10 % de vos éléments LCP apparaissent dans cette catégorie, vous avez identifié un problème. Les images en lazy loading sont mises en file d'attente beaucoup plus tard (par le parseur DOM lent et non par le preload scanner rapide). L'attribut loading="lazy" ordonne au navigateur d'attendre avant de lancer  le téléchargement jusqu'à ce que la mise en page soit calculée et que l'élément soit proche du viewport.

La solution : Vous devez supprimer cet attribut de chargement. L'élément LCP ne doit jamais être chargé en lazy loading.

<!-- INCORRECT -->
<img src="hero.jpg" loading="lazy" alt="Hero Image" />

<!-- CORRECT -->
<img src="hero.jpg" fetchpriority="high" alt="Hero Image" />

2. Not Preloaded

Cela représente le comportement par défaut du navigateur. Le navigateur a découvert l'image dans le HTML lors de l'analyse initiale mais n'a reçu aucun signal pour la prioriser par rapport aux autres images.

L'impact sur la pagespeed dépend de la complexité de votre page web. L'image LCP entre dans une file d'attente de contention de ressources. Si votre page contient de nombreux scripts, polices, autres images non-lazy ou styles à télécharger, le navigateur peut retarder le téléchargement de cette image, augmentant ainsi le Load Delay.

3. Preloaded

Cela indique que la ressource a été découverte via une balise <link rel="preload"> dans le head du document. Ce lien preload signifie essentiellement une découverte précoce, même si la référence de l'image est enfouie profondément dans le DOM ou cachée dans un fichier CSS (image d'arrière-plan).

Le preloading est le moyen le plus efficace de forcer un téléchargement précoce, mais il nécessite de maintenir une balise de lien séparée qui doit correspondre exactement à l'URL de l'image. S'ils divergent, vous téléchargez l'asset en double.

4. High fetchpriority

C'est le standard d'ingénierie moderne. Le navigateur a reçu l'instruction via l'attribut fetchpriority="high" de traiter cette image spécifique comme une ressource critique.

La stratégie : C'est l'état cible pour un LCP basé sur une image. Il signale l'importance directement sur l'élément, le propulsant au-dessus des autres assets dans la file d'attente de téléchargement, sans la surcharge de maintenance des balises preload manuelles.

5. Not an Image

Statut : Nœud Texte / SVG

L'élément LCP est un bloc de texte (h1, p) ou un SVG brut. C'est l'état architectural idéal car le texte n'entraîne aucun Load Delay (il est déjà présent dans le document HTML).

L'optimisation : Si votre LCP est dans cette catégorie mais reste lent, le goulot d'étranglement est exclusivement le Render Delay. Vous devez optimiser votre chemin de rendu critique (blocage CSS/JS) ou votre stratégie de chargement de polices (font-display: swap), car il n'y a aucun fichier image à télécharger.

Workflow : Optimiser le Load Delay

Utilisez cette dimension pour valider votre stratégie de ressources frontend.

1. Éliminez le Lazy Loading : Filtrez par Lazy Loaded. Si cette valeur est supérieure à 0 %, trouvez le composant ajoutant loading="lazy" à la hero image et supprimez-le. C'est courant dans les modèles de CMS qui appliquent le lazy loading globalement à tous les médias.
2. Migrez vers Fetchpriority : Déplacez le trafic de Not Preloaded et Preloaded vers High fetchpriority. Remplacer <link rel="preload"> par fetchpriority="high" nettoie votre <head> et couple la logique de priorité directement au composant.
3. Auditez les images d'arrière-plan : Si vous avez un volume élevé dans Not Preloaded et que votre LCP est une image d'arrière-plan, le navigateur la découvre trop tard (seulement après l'analyse du CSS). Vous devez refactoriser cela en une balise HTML <img> avec fetchpriority="high" ou forcer un en-tête Preload.

Règle empirique d'ingénierie

Votre objectif de distribution pour cette dimension est strict :

• <10 % Lazy Loaded
• > 90 % High fetchpriority (pour les LCPs image)
• 100 % Not an image (pour les LCPs texte)

Tout trafic tombant dans "Not Preloaded" représente un état non optimisé où vous abandonnez le contrôle de la priorité des ressources aux heuristiques par défaut du navigateur.