Un regard plus attentif sur HTTP/2 : comment cela fonctionne et ce que cela signifie pour le Web

Qu'est-ce que HTTP/2 ?

Le protocole HTTP/1.1 est utilisé depuis 1999 et au fil du temps a acquis un problème important. Les sites modernes, contrairement à ce qui était populaire en 1999, utilisent de nombreux éléments différents : des scripts JavaScript, des styles CSS et parfois aussi des animations flash. Lorsque vous les transférez tous, le navigateur et le serveur créent plusieurs connexions.

Le protocole HTTP/2 accélère considérablement la vitesse des sites Web grâce aux fonctionnalités suivantes :

• Connexions : plusieurs requêtes peuvent être envoyées via une seule connexion TCP et les réponses peuvent être reçues dans n'importe quel ordre. Il n'est pas nécessaire de conserver plusieurs connexions TCP.
• Priorités des threads : le client peut définir les priorités du serveur — quel type de ressources est plus important pour lui que les autres.
• Compression d'en-tête : la taille de l'en-tête HTTP peut être réduite.
• Push-envoi des données du côté serveur : le serveur peut envoyer au client les données qui n'ont pas encore été demandées, par exemple, en fonction des données sur la prochaine page que les utilisateurs vont ouvrir.

Le développement du protocole HTTP 2 était basé sur le protocole SPDY, développé par Google. Mais Google a déjà annoncé qu'il refuserait davantage de support SPDY à un HTTP/2 plus prometteur.

Lire : Pourquoi votre site WordPress est-il lent et comment l'accélérer ?

Fonctionnalités clés de HTTP/2

• Multiplexage
• Poussée du serveur
• Compression d'en-tête
• Priorisation des flux
• Contrôle de flux

Différence entre HTTP et HTTP 2

Les modifications apportées au premier protocole ne nécessitent pas beaucoup de modifications dans le fonctionnement des applications. Cependant, il existe un avantage pour les nouvelles applications qui fonctionneront à une vitesse accrue. Les principales différences entre les deux protocoles ont été comparées ci-dessous :

Vous trouverez ci-dessous une bonne représentation visuelle de la différence fondamentale entre HTTP/1 et HTTP/2 (avec la permission de : http://ruzhekov.com)

Avantages et inconvénients de HTTP/2

Pourquoi le monde avait-il besoin de HTTP/2 ?

• HTTP a été décrit pour la première fois en 1991 et sa dernière version, HTTP/1.1, a été approuvée en 1999 et est toujours utilisée aujourd'hui.
• La taille des sites Web a considérablement augmenté au fil des ans, entraînant des temps de chargement lents et des limitations du nombre de connexions simultanées utilisant HTTP/1.1.
• Des solutions temporaires telles que l'optimisation de la charge du site Web ont été mises en place, mais elles n'offrent qu'une solution à court terme.
• Les ingénieurs de Google ont commencé à travailler sur l'amélioration du protocole en 2009, ce qui a conduit à la création du protocole SPDY, qui est plus rapide et pris en charge par la plupart des navigateurs mais nécessite une prise en charge côté serveur.
• HTTP/2 est basé sur SPDY et est rétrocompatible avec HTTP/1.1. Il n'y a pas de besoin immédiat de mise à niveau, mais éventuellement, les sites peuvent se charger plus lentement sur l'ancien protocole.

HTTP/2 est-il vraiment plus rapide ?

Les experts HttpWatch ont effectué plusieurs tests et ont trouvé une sérieuse accélération avec HTTP 2.

La capture d'écran ci-dessous montre la vitesse de téléchargement de la page en utilisant HTTP/1.1 :

Et sur cette capture d'écran — le résultat de l'utilisation de HTTP 2 :

La vitesse de téléchargement a augmenté de 23 %. Les experts de HttpWatch notent également que la technologie n'est pas encore totalement optimisée, et s'attendent à une réelle accélération pouvant aller jusqu'à 30%.

Pourquoi HTTP/2 fonctionne plus rapidement ?

• Plusieurs requêtes envoyées au sein de la même connexion en HTTP/2 (multiplexage) entraînent un chargement plus rapide des éléments statiques
• La compression des en-têtes HTTP dans HTTP/2 réduit la quantité de données entre le serveur et le navigateur, libérant ainsi des ressources
• Sécurité améliorée avec des connexions cryptées pour la prise en charge HTTP/2 par les navigateurs avant-gardistes (Google Chrome, Mozilla Firefox)
• L'ordre de priorisation change dans HTTP/2, la priorisation étant une méthode souhaitable pour un bon fonctionnement du multiplexage
• L'absence de configuration de priorisation dans HTTP/2 peut entraîner une réduction de la vitesse car les ressources qui peuvent être chargées ultérieurement prendront une bande séparée et une partie de l'alimentation.

Pourquoi est-il important d'accélérer le chargement des pages du site ?

• La prise en charge de HTTP 2 n'est pas un facteur de classement direct pour Google
• La vitesse de téléchargement est un facteur de classement important pour Google
• HTTP/2 peut avoir un impact positif sur la vitesse du site Web et sur le classement en raison de facteurs comportementaux
• Les pages plus rapides ont un taux d'échec inférieur et peuvent entraîner une augmentation de l'engagement des utilisateurs
• Google Bot prendra bientôt en charge HTTP/2
• HTTP 2 pourrait devenir un facteur de classement à l'avenir, car les moteurs de recherche changent d'algorithmes.

Les avantages pour les développeurs web

HTTP 2 vous permet de vous débarrasser des anciennes astuces, conçues pour accélérer le chargement de la page sans HTTP/2. Nous listons les :

• Partage de domaine ou utilisation de plusieurs domaines associés pour télécharger des fichiers afin de permettre l'établissement d'un plus grand nombre de connexions TCP.
• Sprites d'images - combinant des images dans un seul fichier pour réduire le nombre de demandes. Cependant, un tel fichier doit d'abord être complètement chargé pour être affiché. De plus, le traitement de fichiers volumineux consomme plus de mémoire.
• Combinez les fichiers CSS et JavaScript, ce qui est également fait pour réduire le nombre de requêtes et également augmenter l'utilisation de la mémoire.
• Inclusion en ligne ou insertion de CSS et de JavaScript, et parfois même d'images dans le fichier HTML, pour réduire le nombre de connexions. En même temps, la page ne s'affiche pas tant que le fichier entier n'est pas chargé.
• Domaines sans fichiers de cookies : téléchargez des images, CSS et JavaScript à partir d'un autre domaine où les cookies ne sont pas utilisés.

Comment implémenter HTTP 2 ?

Pour mettre en œuvre HTTP 2, vous devez suivre ces étapes :

1. Vérifiez la prise en charge du serveur : assurez-vous que votre logiciel serveur prend en charge HTTP 2. Les logiciels serveur populaires comme Apache, Nginx et IIS ont une prise en charge intégrée de HTTP 2.
2. Activer HTTP 2 : Une fois que vous avez confirmé que votre serveur prend en charge HTTP 2, vous devrez l'activer. La méthode d'activation de HTTP 2 varie selon le logiciel serveur que vous utilisez.
3. Utiliser HTTPS : HTTP 2 nécessite une connexion sécurisée utilisant HTTPS, vous devez donc avoir un certificat SSL installé sur votre serveur.
4. Mettez à jour votre code : si vous utilisez une bibliothèque ou un framework qui gère les connexions HTTP, assurez-vous qu'il prend en charge HTTP 2. Certaines bibliothèques peuvent nécessiter des mises à jour pour fonctionner avec HTTP 2.
5. Testez votre site : Après avoir apporté les modifications nécessaires, testez votre site pour vous assurer qu'il fonctionne avec HTTP 2. Vérifiez la console du navigateur pour toute erreur ou avertissement.
6. Surveiller les performances : surveillez régulièrement les performances de votre site pour vous assurer qu'il fonctionne correctement avec HTTP 2.
7. Envisagez des optimisations de performances : la mise en œuvre de HTTP 2 améliorera les performances de votre site, mais il peut encore y avoir des possibilités d'optimisation supplémentaire. Par exemple, combiner des images dans des sprites, compresser des images et réduire le nombre de requêtes HTTP peut encore améliorer les performances.

Conclusion

HTTP 2 est rétrocompatible avec HTTP 1.1 et ne nécessite pas de migration. Cependant, à mesure que les serveurs Web et les navigateurs adoptent HTTP 2, les techniques d'optimisation du site peuvent devoir être mises à jour pour éviter de ralentir le site Web.

Lire : Un guide complet sur la migration HTTP vers HTTPS dans WordPress

La fusion d'images dans des sprites améliore la compression et réduit le téléchargement de données tout en évitant l'utilisation de l'URI de données pour incorporer des images peut améliorer la mise en cache. Le partitionnement de domaine n'est plus nécessaire dans HTTP 2, car il permet des demandes directes de ressources et peut réduire les performances en créant des connexions supplémentaires.

Questions fréquemment posées