Dimension Core/Dash : Priorité du LCP

Dimension : Ressource : Priorité du LCP

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

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

La hiérarchie des priorités

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 (Texte/Haute Priorité).

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 cette catégorie, vous avez identifié un problème. Les images en chargement différé (lazy loading) sont mises en file d'attente beaucoup plus tard (par le lent parseur du DOM et non par le rapide scanner de préchargement). L'attribut loading="lazy" ordonne au navigateur d'attendre pour le téléchargement 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 supprimer cet attribut de chargement. L'élément LCP ne doit jamais être chargé de manière différée (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 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 dépend de la complexité de votre page web. L'image LCP entre dans une file d'attente de contention des ressources. Si votre page comporte de nombreux scripts, polices, autres images non différées ou 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 l'en-tête du document. Ces liens de préchargement signifient essentiellement une découverte anticipée, 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 préchargement est le moyen le plus efficace de forcer un téléchargement anticipé, mais il nécessite de maintenir une balise de lien distincte qui doit correspondre exactement à l'URL de l'image. Si elles divergent, vous téléchargez la ressource deux fois.

4. High fetchpriority

C'est la norme 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. Cela signale son 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 liée aux balises de préchargement manuelles.

5. Not an 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'entraîne aucun Load Delay (il est déjà présent dans le document HTML).

L'optimisation : Si votre LCP appartient à 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/JavaScript) ou votre stratégie de chargement de polices (font-display: swap), car il n'y a aucun fichier image à télécharger.

Workflow : Optimisation du 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" à l'image hero et supprimez-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 refondre cela vers une balise HTML <img> avec fetchpriority="high" ou forcer un en-tête Preload.

Règle d'or en ingénierie

Votre objectif de distribution pour cette dimension est strict :

• <10% Lazy Loaded
• > 90% High fetchpriority (pour les LCP basés sur des images)
• 100% Not an image (pour les LCP basés sur du 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.