Early Hint : qu’est-ce que c’est ?
Toutes les pages HTML contiennent des liens vers des ressources statiques externes qui doivent être extraites avant leur utilisation. Le fait de mettre ces liens à la disposition du navigateur le plus tôt possible contribue à minimiser la latence perçue.
Le header “Link” peut ainsi être utilisé pour véhiculer ces liens dans l’en-tête d'une réponse HTTP.
L’objectif du Early Hint est de tirer parti du moment où l’on optimise la réponse de l’origine pour envoyer des headers “Link” au navigateur afin qu’il puisse préloader ces ressources statiques.
Comment fait-on ? Dès réception des headers de l’origine, on y ajoute les headers “Link” qu’on a calculé et préalablement cachés. Cela permet au navigateur de pré-charger ces ressources, sans attendre le contenu de la page.
Cette optimisation est une première étape pour Fasterize. Notre objectif, à terme, est de renvoyer les headers “Link” sans même attendre une réponse de l’origine.
Early Hint : quels gains ?
Cette nouvelle fonctionnalité Fasterize permet à notre moteur de gagner encore quelques centaines de millisecondes précieuses sur le chargement d’une page web.
En effet, grâce au Early Hint, les ressources peuvent se pré-charger en parallèle du travail d’optimisation de notre moteur. Prenons un exemple :
Voici un site web sans Early Hint :
Ce premier schéma montre que sans le Early Hint, le navigateur attend que l’ensemble des données de la page soit reçu avant de charger les assets. Dans le cas présent, cela représente environ 350ms.
Et voici ce même site web avec la fonctionnalité Early Hint activée :
Ce second schéma montre que lorsque le Early Hint est activé, le navigateur commence à charger des assets dès qu'il a reçu les en-têtes et avant d'avoir reçu tout le code HTML de la page.
On constate donc que grâce au Early Hint, les ressources commencent à être chargées plusieurs centaines de millisecondes en amont.
Early Hint : comment configurer l’optimisation sur votre plateforme Fasterize ?
Vous souhaitez tester cette fonctionnalité pour en voir l’impact sur votre site web ? Le mieux est de vous rapprocher de votre Customer Success Engineer dédié ou de contacter notre support.
Comment savoir si cette optimisation est faite pour vous ?
C’est simple ! Vous avez une page non cachable ? Alors le Early Hint peut être intéressant pour vous. Votre Customer Success Engineer vous aiguillera pour la mise en place.
Le Early Hint dans votre boîte à outils webperf
Comme pour toutes nos optimisations, nous avons tenu à ce que le Early Hint soit applicable facilement sur les pages et les ressources que vous définissez.
Dans la configuration du Early Hint, il est donc possible :
- d’activer / désactiver le Early Hint
- de whitelister / blacklister les pages sur lesquelles vous souhaitez (ou non) appliquer le Early Hint
- d’activer le Early Hint par type de ressource : image, CSS, font ou JS
Le Early Hint vient ainsi compléter l’ensemble des fonctionnalités déjà mises à votre disposition pour optimiser les pages dynamiques !
Découvrez l’ensemble de nos fonctionnalités pour réduire vos temps de chargement !
