Les mots utiles, en clair
- LCP : contenu principal
- Le temps nécessaire pour afficher le plus grand élément visible, souvent l’image ou le titre principal.
- CSS : présentation
- Les règles qui définissent les couleurs, les tailles et la disposition de votre page.
- Préchargement
- Préparer ou demander un élément à l’avance pour réduire l’attente au moment où il devient utile.
Suivre la chaîne de chargement
Une image définie dans une feuille CSS peut n’être découverte qu’après le téléchargement et l’analyse de cette feuille. Si elle porte le premier écran, ce délai peut contribuer au LCP. Le poids de l’image n’explique alors qu’une partie du problème : son heure de départ compte également.
Choisir la bonne représentation
Lorsqu’une image transmet une information, une balise image peut être plus adaptée qu’un fond décoratif. Le choix ne doit pas être dicté uniquement par un score. Il faut préserver la composition, le texte alternatif pertinent et la façon dont le contenu se comporte dans les différentes mises en page.
Tester une amélioration ciblée
Un préchargement peut aider lorsque le fond doit rester en CSS, mais il doit correspondre à la variante réellement affichée. Mesurez le démarrage de la requête avant et après. Vérifiez aussi que la priorité donnée à ce visuel ne retarde pas les styles ou polices indispensables à son rendu.