La plus grande peinture de contenu correspond à la durée pendant laquelle le contenu principal reste vide. L’interaction avec Next Paint correspond à la durée pendant laquelle un clic semble ignoré. N'hésitez pas à ouvrir Chrome DevTools et à consulter les chiffres réels sur votre propre page avant de faire confiance à un audit. Voici les correctifs dans l’ordre dans lequel ils sont habituellement payés.

LCP : arrêtez de faire deviner le navigateur

  1. Le navigateur ne télécharge votre image hero qu'une fois qu'il en voit une. Ajouter fetchpriority="high" à cet img l'avance dans la file et, mesuré ici, déplace le LCP plus que n'importe quelle librairie.
  2. Préchargez l'URL exacte du héros une fois sur la page exacte qui l'utilise, et non sur chaque page du site.
  3. Expédiez le héros pré-redimensionné, pré-formaté et hébergé sur un CDN. Un JPEG de 3 Mo sur 4G est le point de naissance des sites Web lents.
  4. Auto-hébergez vos polices, ou au moins préchargez uniquement les graisses que vous utilisez réellement sur le texte LCP.
<img src="/img/hero.webp" fetchpriority="high" decoding="async" />

INP : arrêtez de bloquer le thread principal

  • Montrez quelque chose dans le cadre après le robinet et terminez ensuite le travail. Un bouton qui se transforme en "Travail..." dans un cadre peint est très bien.
  • Un auditeur assidu est pire que dix auditeurs légers. Combinez le travail avec requestIdleCallback lorsque rien n’a besoin d’être instantané.
  • Expédiez moins de JavaScript. Un bundle de 300 Ko est une file d'attente et non un emplacement pour stocker la logique.
btn.addEventListener("click", () => {
  setState("saving");
  requestAnimationFrame(() => doHeavyWork());
});
Personne ne visite pour le cadre. Ils visitent pour la page et la vitesse.

Ensuite, mesurez à nouveau, dans Lighthouse et sur un téléphone moyen, car les simulateurs pardonnent des choses que la vraie 4G ne pardonne pas. Une amélioration de vingt pour cent des deux signes vitaux est normale pour cet après-midi.