Comment utiliser l'application "Early Hints"

L'application Early Hints vous permet de précharger efficacement les ressources critiques d'une page, améliorant ainsi les performances de chargement et l'expérience utilisateur de votre site web.

Le Early Hint permet au navigateur de demander à l'avance les ressources critiques, telles que les scripts JavaScript, les feuilles de style CSS, les images et les polices, qui seraient sinon découvertes plus tardivement.

Le Early Hint, en cours de standardisation par le W3C, utilise le header HTTP Link pour précharger les ressources avant même que le premier octet de contenu ne soit reçu. Cela réduit la latence perçue et accélère le chargement des pages.

En savoir plus sur le Early Hint ou comment précharger les assets d’une page non cachable

Comment activer les fonctionnalités ?

Préchargement du JavaScript

Early Hints aide à réduire la latence initiale et à optimiser l'expérience utilisateur en s'assurant que les scripts JavaScript nécessaires sont chargés de manière proactive, avant que le navigateur ne commence à traiter le reste du contenu de la page.

Préchargement du CSS

L'utilisation d'Early Hints pour précharger le CSS aide à minimiser le temps nécessaire pour que la page apparaisse complètement stylisée et fonctionnelle. Cela réduit la latence perçue et améliore les mesures de performance critiques comme le First Paint et le Time to Interactive.

Préchargement des images

Le préchargement des images via Early Hints permet de réduire les temps de chargement perçus, améliorant ainsi les métriques de performance telles que le Largest Contentful Paint (LCP) et le Speed Index.

Préchargement des polices

En préchargeant les polices avec Early Hints, les sites web peuvent éviter les retards dans le rendu des textes, améliorer l'expérience utilisateur par une présentation visuelle immédiate et cohérente.

Avantage webperf

Le préchargement par Early Hints permet un démarrage plus rapide du traitement des ressources essentielles, améliorant significativement des métriques telles que le First Contentful Paint (FCP), le Speed Index, et le Largest Contentful Paint (LCP)

Bon à savoir

Les Early Hints pour les CSS contribuent le plus souvent à une amélioration de la performance web, suivis par ceux des polices. Cependant, selon les spécificités du site, activer une catégorie d’Early Hints, notamment pour les images, peut parfois être contre-productif.