Early Hints

Early Hints est une norme web que vous pouvez mettre en œuvre pour améliorer les temps de chargement des pages jusqu’à 30 %. Cette norme web définit un nouveau code d’état HTTP : 103 Early Hints.

Lorsque la fonction Early Hints est activée et qu’un visiteur charge votre site dans un navigateur compatible, des réponses 103 sont envoyées au navigateur (avant les réponses 200) avec des informations sur les éléments liés qui peuvent apparaître dans la réponse finale du serveur. Grâce à ces informations, le navigateur peut commencer à préparer la page avant de recevoir la réponse 200 OK du serveur. Le navigateur peut ainsi préparer plus efficacement le chargement de la page pendant que le serveur « réfléchit »

Le mécanisme Early Hints peut être utilisé avec tout type d’en-tête Link ou de ressource hint, tel que preload et preconnect. Il aide à améliorer les performances des pages web en permettant aux navigateurs de commencer à récupérer ou à préparer les ressources avant que la réponse finale ne soit reçue.

Dans le cadre de l’intégration Cloudflare de Kinsta, Early Hints peut être activé pour votre site WordPress dans MyKinsta pour votre domaine personnalisé. Vous ne pouvez pas utiliser Early Hints avec un domaine kinsta.cloud temporaire.

Préchargement et préconnexion

Early Hints est principalement conçu pour fonctionner avec des indications de ressources telles que preload et preconnect. Il peut être utilisé pour améliorer l’efficacité de preload et preconnect en envoyant ces indications au navigateur dès que la requête initiale est effectuée.

• Preload: Indique au navigateur de charger une ressource dès que possible. Early Hints envoie des préchargements au navigateur à l’avance, ce qui lui permet de commencer immédiatement à récupérer les ressources essentielles (par exemple, CSS, JavaScript). Cela réduit les temps de blocage du rendu et améliore les performances.
• Preconnect: établit des connexions anticipées avec des origines tierces importantes. Early Hints envoie des préconnexions à l’avance, ce qui permet au navigateur d’établir des connexions réseau (recherche DNS, négociation TLS) à l’avance. Cela réduit la latence quand les requêtes réelles sont effectuées, ce qui accélère le temps de chargement des pages.

Pour utiliser efficacement preload et preconnect, vous devez ajouter des en-têtes de lien spécifiques aux ressources que vous souhaitez marquer pour le préchargement. Vous pouvez utiliser une extension WordPress pour ajouter des en-têtes preload ou preconnect à vos ressources dans WordPress, comme WP Rocket, Perfmatters ou Pre* Party Resource Hints.

Remarques importantes

1. Votre site devra avoir l’en-tête de réponse Link: avec le type de relationpreload ou preconnect pour indiquer les ressources que vous voulez inclure dans la réponse Early Hints. Vous pouvez utiliser une extension WordPress pour ajouter des en-têtes preload ou preconnect à vos ressources dans WordPress.
2. Le code d’état 103 Early Hints est compatible avec les dernières versions de Chrome, Edge, Safari et Firefox. Si un navigateur ne prend pas en charge Early Hints et qu’un en-tête de réponse 103 lui est envoyé, rien ne se passera ; le navigateur l’ignorera simplement.
3. Si votre site compte plus de 20 domaines, l’activation de Early Hints peut prendre 5 minutes ou plus, en fonction du nombre total de domaines.
4. Vous ne pouvez pas utiliser Early Hints avec un domaine kinsta.cloud temporaire.

Activer les Early Hints

1. Pour activer les Early hints, connectez-vous à MyKinsta et allez sur Sites WordPress > Nom du site > Outils.
2. Sous Early Hints, cliquez sur le bouton Activer.

Une notification indiquant que les Early Hints sont activés apparaîtra dans le coin supérieur droit.

Testez Early Hints

Pour confirmer que Early Hints fonctionne, inspectez les en-têtes HTTP d’une page de votre site, et recherchez tout en-tête Link: avec le type rel de preload ou preconnect que vous avez ajouté. Pour inspecter les en-têtes HTTP de votre site, vous pouvez utiliser l’un des outils suivants :

• Notre vérificateur gratuit d’état HTTP et de redirection.
• Les outils de développeur intégrés à votre navigateur web.
• La commande curl dans Terminal (ligne de commande), en remplaçant l’URL à la fin de cet exemple par l’URL de la page que vous voulez tester :

curl -L -s -o /dev/null -D - https://kinstaexample.com

Désactiver les Early Hints

1. Pour désactiver les Early hints, connectez-vous à MyKinsta et allez dans Sites WordPress > Nom du site > Outils.
2. Sous Early Hints, cliquez sur le bouton Désactiver.

Une notification indiquant que les Early Hints sont désactivés apparaîtra dans le coin supérieur droit.