Google Chrome, Firefox, Caddy, et Apache ont récemment intégré le code HTTP 103 Early Hints pour accélérer le chargement des sites web et des applications. Symfony 6.3 et le tout nouveau SAPI FrankenPHP prennent également en charge cette fonctionnalité. Découvrons en quoi le code 103 diffère des autres techniques de pré-chargement, et comment l’utiliser pour optimiser vos applications PHP.
Date : 13/10/2023 de 12h25 à 12h45
Nom des conférenciers : Kévin DUNGLAS
Tout part d’un constat
Lorsque vous consultez une page web, votre navigateur envoie une requête HTTP et attend une réponse HTTP avec le code de statut 200. Toutefois, le chargement de la page peut être lent. En effet, de nombreuses ressources telles que les CSS, les images et les fichiers JavaScript doivent être chargées séquentiellement.
Un traitement est considéré comme terminé lorsque tous les appels ont répondu. Et cela, sans compter la latence réseau.
Bref, c’est lent, et plus un site est lent, plus il perd d’utilisateurs.
A noter, la vitesse de réponse d’un site est un des points d’attention du moteur d’indexation de Google. Ce dernier va les favoriser dans les classements de recherche, car considéré comme meilleur pour « l’expérience utilisateur »
Il faut absolument tenter de diminuer la latence perçue par l’utilisateur pour l’affichage.
Une première tentative, abandonnée par Google
Google avait expérimenté les Server Push pour accélérer le chargement des ressources. Mais cette approche, trop complexe, a été abandonnée.
L’arrivée du code HTTP 103 Early Hints
Le code HTTP 103 Early Hints répond à ce défi en permettant au navigateur de pré-charger les ressources essentielles en cache, ce qui contraste avec l’approche du Server Push. Contrairement à cette dernière, le code 103 évite de pré-charger des ressources déjà en cache, ce qui en fait une option plus efficace.
Il appartient à la classe 1xx des statuts informatifs, qui se caractérisent par des réponses temporaires envoyées par le serveur au client, avant la réponse finale. Il est principalement utilisé pour des informations temporaires directement pris en compte par le navigateur.
Le code 103 fonctionne en parallèle, ce qui signifie que les ressources nécessaires au rendu de la page, telles que le CSS et le JavaScript, sont collectées dès que possible. Il introduit une dimension asynchrone dans les requêtes HTML, améliorant ainsi la réactivité et la vitesse.
Son utilisation se traduit par une amélioration du Largest Contentful Paint (LCP) de l’ordre de 30 %. Cette amélioration a un impact direct sur l’expérience utilisateur et le référencement, comme cela a été évoqué précédemment. Par ailleurs, les principaux navigateurs prennent en charge cette fonctionnalité, garantissant une utilité étendue.
Quelques considérations
- Expérimental sur Firefox et Safari (sortira relativement prochainement), mais déjà disponible sur les Chromium (Chrome, Edge et Opéra).
- Faisable avec Caddy, mais nécessite quelques manipulations sur Apache pour le moment, tandis qu’il n’est pas encore supporté sur Nginx.
- Les tentatives d’intégration via une Pull Request ont échoué en raison de l’architecture de PHP FPM et FastCGI, qui suit un modèle de « 1 requête = 1 réponse ».
- Ne fonctionne pas directement avec PHP, car PHP-FPM ne gère pas la communication directe avec le navigateur. Toutefois, son utilisation est possible avec FrankenPHP, une solution qui dialogue directement avec le navigateur. De plus, il est compatible avec des frameworks populaires tels que Symfony et Laravel.
En conclusion
Le code HTTP 103 Early Hints devrait progressivement être pris en charge par tous les navigateurs, ce qui encouragera probablement Apache et Nginx à l’intégrer.
En tant que préchargeur facultatif, il ne pose pas problème sur les navigateurs ne le gérant pas encore, il est simplement ignoré.
Son impact positif sur les performances, l’expérience utilisateur et le référencement en font une solution précieuse pour les développeurs et les administrateurs de serveurs web.
