Image LCP préchargée

Silktide vérifie si l’image principale de votre page — le plus grand élément que les visiteurs voient lors du chargement — pourrait apparaître plus tôt si le navigateur était invité à l’extraire plus tôt. Les pages semblent chargées lorsque leur plus grand contenu apparaît; cette seule image détermine donc souvent à quelle vitesse l’ensemble de la page paraît se charger.

Le moment où cette image apparaît est mesuré par le Largest Contentful Paint (LCP), l’une des de Google.

Pourquoi c’est important

Les navigateurs téléchargent les fichiers à peu près dans l’ordre où ils les découvrent, et l’image principale est souvent découverte tard — enfouie derrière des feuilles de style et des scripts, référencée depuis le ou insérée par un script. Il en résulte une page qui construit rapidement son cadre puis laisse un trou à l’endroit où devrait se trouver le contenu le plus important.

Comme les visiteurs jugent de la vitesse en fonction de l’apparition du contenu principal, et que Google intègre le LCP dans le classement de recherche, indiquer au navigateur de prioriser ce fichier fait partie des améliorations de vitesse les plus payantes.

Comment corriger

Préchargez l’image pour que le navigateur la récupère dès le début du chargement :

<!-- Dans <head> : récupérer l’image principale immédiatement -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">

Autrement, si l’image est un simple élément <img>, ajoutez-lui directement fetchpriority="high".
Ne chargez jamais cette image en différé () — loading="lazy" sur l’image principale retarde précisément ce qui doit arriver en premier.
Préférez un élément <img> simple à une image d’arrière-plan CSS pour le visuel principal, afin que le navigateur puisse la découvrir tôt de lui-même.

Comment Silktide le teste

Charger la page dans un véritable navigateur, en utilisant le type d’appareil, la vitesse de connexion et l’emplacement de test configurés pour vos tests de vitesse.
Identifier le plus grand élément de contenu visible pendant le chargement de la page. S’il s’agit d’une image, vérifier quand le navigateur l’a découverte et téléchargée.
Si récupérer l’image plus tôt la faisait apparaître plus tôt, le signaler avec le gain de temps estimé.

Dépannage

L’image principale change selon les pages ou les appareils

Les indices de préchargement sont propres à chaque page, et l’élément « le plus grand » peut différer entre les mises en page pour ordinateur et mobile. La logique du gabarit peut émettre le bon préchargement pour chaque page, et les attributs media et imagesrcset de l’indice gèrent les variantes adaptatives.

J’ai préchargé l’image, mais le signalement demeure

L’URL du préchargement doit correspondre exactement à ce que la page affiche au final — une variante de taille différente ou une URL réécrite par un ne compte pas. Vérifiez aussi que l’indice figure dans l’en-tête de la page elle-même, et non ajouté plus tard par un script, ce qui va à l’encontre du but recherché.