Les statistiques montrent que votre page d'accueil a un LCP de cinq secondes sur mobile mais elle semble correcte sur votre portable. Comment abordez-vous le sujet ?

Partez des données de terrain, pas de votre machine : trouvez quel élément est l'élément LCP et découpez le temps en time to first byte, délai de chargement de la ressource, temps de chargement de la ressource et délai de rendu. Ça vous dit si le problème est la réponse serveur, la découverte tardive de l'image, la taille de l'image elle-même, ou le thread principal. Ensuite bridez vers un appareil de milieu de gamme et un réseau lent en local pour reproduire avant de changer quoi que ce soit.

D'abord j'arrête de faire confiance à mon portable. Je récupère les données de terrain pour voir quel élément est vraiment l'élément LCP et sur quelles pages, puis je reproduis en local avec bridage du processeur et une connexion lente. Ensuite je décompose le chiffre, parce que chaque partie a une correction différente. Si le time to first byte domine, c'est un problème serveur ou de cache et aucun travail sur les images n'aidera. S'il y a un long délai de chargement, l'image est découverte tard, en général parce qu'elle est définie en CSS ou injectée par JavaScript, donc je la mets dans le HTML avec fetchpriority high et je la précharge. Si le temps de chargement domine, c'est le fichier, donc format moderne, bonnes dimensions et un srcset correct. Si c'est le délai de rendu, le thread principal est occupé à parser des scripts. Je suis tombé exactement là-dessus une fois où l'image principale avait loading lazy, ce qui retardait la seule image qui ne doit pas être retardée. Enlever ça et ajouter fetchpriority high a fait passer le LCP d'environ 4,8 secondes à 2,1 sur mobile bridé.