HTTP/2 Ça ne change pas grand chose... sauf que

Dragon

Par

HTTP/2 Ça ne change pas grand chose... sauf que

  1. L'historique du protocole HTTP ?
  2. Les problèmes de HTTP 1.1
  3. Techniques pour améliorer la performance
  4. Les fonctions de HTTP/2
  5. Impacts sur le développement Web
  6. Exemples de configurations de serveurs Web
  7. Perspectives pour HTTP/2

À propos de moi

Benoit Piette

La ligne de vie du protocole HTTP

HTTP 0.9 en 1991, HTTP 1.0 en 1996, HTTP 1.1 en 1999 et HTTP2 en 2015
Ligne de vie de HTTP
HTTP 1.0HTTP 1.1
  • Une seule requête par connexion TCP
  • Peu de fonctionalités pour le caching
  • en-tête Host facultative
  • Plusieurs requêtes par connexion TCP (Keep Alive)
  • Plus de fonctionalités pour le caching (if-modified-since, etags, if-non-match)
  • en-tête Host obligatoire
  • Authentification Digest et Proxy
  • Verbe OPTIONS
  • Mise à niveau du protocole en-tête upgrade
  • Négotiation de contenu plus avancée (qualité)

L'évolution de l'utilisation de HTTP

Cette image n'est pas accessible, contient un graphe de nombre de connexions et de la taille des objets dans une page Web de 2012 à 2016. Nous voyons que le poids des objets augmente beaucoup et que celle du nombre de connexion, moins
Évolution de la taille et du nombre d'objets par page (http://httparchive.org)

Problèmes avec HTTP 1.0 et HTTP 1.1

Problèmes avec HTTP 1.0 et HTTP 1.1

Illustration du pipelining
Connexions HTTP 1.1 et Pipelining

Problèmes avec HTTP 1.0 et HTTP 1.1

Illustration du blocage en tête de file
Blocage en tête de file (Head of line blocking)

Problèmes avec HTTP 1.0 et HTTP 1.1

Les bénéfices d'une augmentation de la bande passante diminuent - une diminution de la latence a plus d'impact
Latence et bande passante

Statistiques sur la composition des pages Web

Statistiques composition d'une page Web - mobile Statistiques composition d'une page Web - bureau
Poids moyen d'une page Web - Mars 2016 (source: http://httparchive.org)

N'oublions pas nos utilisateurs !

Perception de vitesse

Pour améliorer les performances avec HTTP 1.1

Maximum de connexions par domaine pour les navigateurs bureau Maximum de connexions par domaine pour les navigateurs mobile
Maximum de connexions par domaine selon les navigateurs

Pour améliorer les performances avec HTTP 1.1

Le domain sharding

Pour améliorer les performances avec HTTP 1.1

Le domain sharding

Illustration du maximum de connexion par domaine Illustration des avantages du sharding
Exemple d'utilisation de la technique de domain sharding

Pour améliorer les performances avec HTTP 1.1

Compression des données

Pour améliorer les performances avec HTTP 1.1

Fusionner plusieurs fichiers

Pour améliorer les performances avec HTTP 1.1

Lutins

Drapeau en format lutin
Exemple d'utilisation de la technique de lutins avec des drapeaux

Autres bonnes pratiques

Évolution de HTTP

Les objectifs de HTTP/2

Ce qui change avec HTTP/2

Le protocole est maintenant binaire

À quoi ressemble HTTP/2 ?

L'unité de base du protocole est la trame (frame)

Représentation d'une trame HTTP/2
La trame / frame HTTP/2

À quoi ressemble HTTP/2 ?

L'unité de base du protocole est la trame (frame)

Les types de trames


DATA DonnéesContient des données associées à un signal / stream
HEADERS en-têtesUtilisé pour créer un nouveau signal et contient des combinaisons clés / valeurs. Équivalents aux en-têtes HTTP 1.1
PRIORITY PrioritésDéfinit du point de vue de l'expéditeur, une recommandation sur la priorité d'un signal
RST_STREAM Réinitialiser le signalPermet de terminer un signal pour des raisons anormales
SETTINGS ParamètresContient des paramètres de configuration sur la communication réseau entre deux points de terminaison (endpoints)
PUSH_PROMISE (Promesse de futur stream)Notifie le récepteur en avance des prochains streams que l'expéditeur va envoyer
PINGMécanisme pour mesurer le délai allez-retour ainsi que pour vérifier si une connexion ne recevant plus de données est encore active
GOAWAY (Va-t'en)Sert à initier la fin d'une connexion où lorsqu'il y a une erreur irrécupérable
WINDOW_UPDATEContrôle du flux de données sur les stream ou sur la connexion
CONTINUATIONSert à spécifier l'envoi de plusieurs fragments d'en-têtes ou de PUSH_PROMISE pour un même stream

Petit récapitulatif pour comprendre la suite

Comparaison réseau HTTP 1 et 2
Comparaison réseau HTTP 1 et 2

Stream / ou signal

Un stream est une séquence logique de plusieurs trames, représentant par exemple un fichier HTML

Une seule connexion HTTP/2 peut avoir plusieurs stream en court

Exemple de communication avec les stream
Exemple de communication avec des signaux et trames

Stream / ou signal

En utilisant les streams et trames, nous pouvons atteindre le multiplexage de requêtes en une seule connexion

Exemple de communication avec les stream
Exemple de communication avec des signaux et trames

"Server push"

Permet de pousser du contenu qui sera fort probablement nécessaire.

Par exemple, lorsque le client demande une page HTML, le serveur peut aussi envoyer en même temps le CSS et le Javascript.

Diagramme serveur push
Exemple de server push

Priorités et dépendances

Compression des en-têtes

Compression des en-têtes HPACK

Comparaison des en-têtes
Comparaison des en-têtes

TLS et négociation

impact sur le développement Web

Prise en charge de HTTP/2

Comment utiliser HTTP2 maintenant ?

Vous avez un blogue Wordpress et vous contrôlez votre serveur (AWS, VPS, etc.). Vous pouvez configurer HTTP2 dès aujourd'hui !

Plusieurs façons d'installer et de configurer des serveurs HTTP, mais regardons-en quelques-unes :

Première étape, se procurer un certificat SSL

Nginx CentOS 7

Nginx CentOS 7


                server {
                    listen 80;
                    server_name test.benoitpiette.com;
                    return 301 https://$host$request_uri;
                }
                server {
                        server_name  test.benoitpiette.com;
                        root /srv/test.benoitpiette.com/html;

                        listen 443 ssl http2;

                        ssl_certificate /etc/letsencrypt/live/test.benoitpiette.com/fullchain.pem;
                        ssl_certificate_key /etc/letsencrypt/live/test.benoitpiette.com/privkey.pem;
                      ...
                 }

                    
Exemples de configuration nginx avec http2

Apache 2 et Ubuntu 15.10

Apache 2 et Ubuntu 15.10


                         NameVirtualHost *:80
                         <VirtualHost *:80>
                            ServerName test.benoitpiette.com
                            Redirect permanent / https://test.benoitpiette.com/
                         </VirtualHost>
                         listen 443
                         <VirtualHost *:443>
                             ServerName test.benoitpiette.com
                             SSLEngine On
                             SSLCertificateFile "/etc/letsencrypt/live/test.benoitpiette.com/fullchain.pem"
                             SSLCertificateKeyFile "/etc/letsencrypt/live/test.benoitpiette.com/privkey.pem"

                             Protocols h2 http/1.1
                         </VirtualHost>

                     
Exemples configuration apache2 avec http2

Apache 2 et Ubuntu 15.10


                         <Location /index.html>
                             Header add Link "</css/site.css>;rel=preload"
                             Header add Link "</images/logo.jpg>;rel=preload"
                         </Location>

                     
Exemples configuration apache2 avec http2

Configurer http2 avec IIS sous Windows 10

Configurer http2 avec IIS 7 sous Windows 10

Étapes de configuration IIS Étapes de configuration IIS Étapes de configuration IIS Étapes de configuration IIS
Étapes de configuration IIS

Outils de validation

HTTP/2 et les CDN

HTTP/2 : Bon pour :

HTTP/2 : Ne change rien ou mauvais pour :

HTTP/2 : Il manque d'informations pour prendre des décisions d'architecture

Un dernier point important : QUIC !

Conclusion

Merci !

Logo Résoeuvra

Références

Lexique

Statistiques