Image LCP préchargée

Silktide vérifie si l’image principale de votre page — la plus grande chose que les visiteurs voient au chargement — pourrait apparaître plus tôt si le navigateur était invité à la récupérer plus tôt. Les pages paraissent chargées lorsque leur contenu le plus volumineux apparaît, de sorte que cette seule image détermine souvent à quelle vitesse l’ensemble de la page est perçu.

Le moment où cette image apparaît est mesuré par la métrique 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. Résultat : la page construit rapidement son cadre puis laisse un trou à l’endroit où le contenu le plus important devrait se trouver.

Comme les visiteurs jugent la vitesse au moment d’apparition du contenu principal, et que Google prend le LCP en compte dans le classement de recherche, indiquer au navigateur de prioriser ce fichier fait partie des optimisations de vitesse les plus rentables.

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 immédiatement l’image principale -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">

Sinon, si l’image est un simple élément <img>, ajoutez-lui directement fetchpriority="high".
Ne de cette image — loading="lazy" sur l’image principale retarde précisément ce qui devrait arriver en premier.
Préférez un simple élément <img> à 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 teste cela

Charger la page dans un vrai 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 ferait apparaître plus tôt, le signaler avec l’économie de temps estimée.

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 pour mobile. La logique des modèles peut émettre le bon préchargement par page, et les attributs media et imagesrcset de l’indice gèrent les variantes responsives.

J’ai préchargé l’image, mais le constat persiste

L’URL de 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 comptent pas. Vérifiez aussi que l’indice figure bien dans l’en-tête de la page, et non ajouté plus tard par un script, ce qui en annule l’intérêt.