Dimension Core/Dash : LCP Priority

Dimension : Ressource : LCP Priority

La dimension LCP Priority segmente les données de performance selon la façon dont le navigateur a découvert et priorisé la ressource du 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 principal outil d'audit pour le Load Delay. Il révèle si votre ressource LCP lutte pour la bande passante ou est artificiellement retardée 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 du LCP à l'un des cinq états de chargement spécifiques, classés du plus destructeur (Lazy Loaded) au plus optimal (Texte/High Priority).

Contexte : Lorsqu'un utilisateur retourne sur votre page via le bouton "Précédent" ou "Actualiser", 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. À la place, le navigateur mesure le plus grand élément dans la fenêtre d'affichage actuelle. 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 ce groupe, 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 scanner de préchargement rapide). L'attribut loading="lazy" ordonne au navigateur de mettre en attente le téléchargement jusqu'à ce que la mise en page soit calculée et que l'élément soit proche de la fenêtre d'affichage.

Le Correctif : Vous devez retirer cet attribut de chargement. L'élément LCP ne devrait jamais être en lazy-loaded.

<!-- 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 code 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 vitesse de la page (pagespeed) dépend de la complexité de votre page web. L'image du LCP entre dans une file d'attente de contention des ressources. Si votre page comporte de nombreux scripts, polices, d'autres images non-lazy ou des styles à télécharger, le navigateur peut retarder le téléchargement de cette image, ce qui augmente le Load Delay.

3. Preloaded

Cela indique que la ressource a été découverte via une balise <link rel="preload"> dans la section head du document. Ces liens de préchargement (preload links) signifient fondamentalement 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 (préchargement) est le moyen le plus efficace de forcer un téléchargement précoce, il nécessite de maintenir une balise link séparée qui doit correspondre exactement à l'URL de l'image. S'ils divergent, vous téléchargez une ressource en double.

4. High fetchpriority

Il s'agit de la norme d'ingénierie moderne. Le navigateur a été instruit via l'attribut fetchpriority="high" de traiter cette image spécifique comme une ressource critique.

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

5. Pas une Image

Statut : Nœud de 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'engendre 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 des polices (font-display: swap), puisqu'il n'y a pas de fichier image à télécharger.

Flux de travail : Optimiser le Load Delay

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

1. Éliminer le Lazy Loading : Filtrez par Lazy Loaded. Si cette valeur est supérieure à 0 %, trouvez le composant qui ajoute loading="lazy" à la hero image et retirez-le. C'est courant dans les modèles de CMS qui appliquent le lazy loading globalement à tous les médias.
2. Migrer 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 associe la logique de priorité directement au composant.
3. Auditer 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 vers une balise HTML <img> avec fetchpriority="high" ou forcer un en-tête de Preload.

Règle Empirique d'Ingénierie

Votre objectif de distribution pour cette dimension est strict :

• <10% Lazy Loaded
• > 90% High fetchpriority (pour les LCP en Image)
• 100% Pas une image (pour les LCP en 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.