En mai 2015, il a été annoncé que la spécification pour HTTP2 avait été finalisée et publiée. Offres HTTP2 avantages de performance significatifs à n'importe quel site Web, donc étant donné que la majorité des sites Web sont alimentés par WordPress, ce n'était qu'une question de temps avant que nous ayons besoin de savoir comment le configurer et ce qu'est HTTP2.
Nous voici donc avec un guide complet et / ou un tutoriel complet sur ce qu'est HTTP2, pourquoi vous devriez activer HTTP2 sur votre site Web, quels sont les avantages et enfin - comment le faire.
Commençons donc par les premières choses.
Qu'est-ce que HTTP2?
HTTP2 est la dernière version de HTTP (HyperText Transfer Protocol) qui a été optimisée de manière à accélérer le chargement de votre site Web, sans effort supplémentaire de votre part. Une fois que vous avez configuré HTTP2, il n'est pas nécessaire d'effectuer des optimisations telles que la minification, la combinaison et d'autres hacks que nous avions l'habitude d'effectuer auparavant - ils sont intégrés directement dans le protocole lui-même.
(À CollectiveRay, nous aimons faire de nos sites Web pour créer les plus et vite!)
Avant de passer à HTTP2, revenons un peu sur HTTP et pourquoi une nouvelle version de HTTP était nécessaire.
Qu'est-ce que HTTP?
Le protocole de transfert HyperText (aka HTTP) est simplement un moyen par lequel votre navigateur communique avec le serveur Web du site Web que vous visitez.
Il existe de nombreuses façons dont deux (ou plusieurs) machines communiquent sur Internet. HTTP est celui utilisé pour la navigation sur les sites Web. Avec la montée en puissance de sites tels que YouTube et Twitch qui transportent beaucoup de trafic sur HTTP, ce protocole reste celui qui transporte le plus de trafic. C'est certainement celui qui est le plus "visible" puisqu'il intervient dans toute navigation sur le site.
Après tout, combien de fois tapez-vous https: // chaque jour?
Sans entrer dans les détails, le protocole HTTP est utilisé par le navigateur du visiteur pour demander tout le contenu d'un site Web.
La conversation ressemble à ceci:
Navigateur: Bonjour serveur sur www.collectiveray.com - pouvez-vous me donner le contenu de ce site ?
Server: Bonjour navigateur, voici le contenu HTML de www.collectiveray.com
<html xmlns: og="https://ogp.me/ns#" xmlns: fb="https://www.facebook.com/2008/fbml" long="fr-fr" dir="ltr" classe='com_content vue-article itemid-388 j35 mm-hover'>
...
Navigateur: Super, maintenant je vois que j'ai aussi besoin du contenu de ces fichiers js: collectiverayjs, jquery.min.js, jquery-ui.min.js ... et aussi le contenu de ces fichiers: styles.css, jquery.min.css, ... Veuillez également m'envoyer les images suivantes: favicon.ico, logo.jpg, blog-header.jpg, annonce1.jpg...
Server:
- Voici le contenu du fichier collectiverayjs
- Et voici le contenu du fichier jquery.min.js
- Et voici jquery-ui.min.js
- et voici l'image footer-icon.jpg
En réalité, le serveur et le navigateur jouent au tennis numérique avec les données du site Web que vous visitez.
Chaque va et vient du serveur envoie une petite partie du site Web. Cela continue jusqu'à ce que tout le contenu soit envoyé du serveur du site au navigateur.
Une autre très bonne analogie qui a été utilisée pour décrire HTTP1 est celle d'un serveur qui va chercher des boissons au bar, ne prenant qu'un seul verre à chaque fois qu'il visite le bar.
Bien sûr, cette méthode pour obtenir une «chose» à la fois n'est pas terriblement efficace, et c'est là que les problèmes avec HTTP commencent ...
Le Web s'est développé plus rapidement que les capacités de HTTP
HTTP existe depuis très longtemps. Lorsqu'il a été pensé et créé, Internet était un endroit très différent.
La bande passante a été mesurée en bits et non en dizaines de mégabits. Par conséquent, pour être utilisables, les sites Web ont été principalement constitués de texte et d'hyperliens. Les images étaient rares.
Avance rapide vers les temps modernes.
Les sites Web, les thèmes et toutes sortes de fonctionnalités ont rendu les sites Web de plus en plus lourds en termes de ressources. Votre site Web moyen contient des centaines de fichiers et d'images différents.
Les sites Web qui ont besoin d'utiliser des centaines de ressources sont à l'ordre du jour.
Par exemple, si vous envisagez de créer un site d'adhésion WordPress, utilisez ce guide rédigé par CollectiveRay, vous aurez besoin de thèmes d'adhésion, de plugins et de nombreuses autres ressources, qui nécessitent toutes diverses ressources pour fonctionner correctement.
Pour compliquer les choses, chaque site demande des informations à plusieurs serveurs différents pour toutes sortes de scripts tiers (par exemple, les scripts Google Analytics, les boutons de partage Facebook, Google Ads ou AdSense, le marketing par e-mail et toutes sortes d'autres plates-formes).
Le nombre de fois qu'un navigateur a besoin pour récupérer des fichiers à partir du serveur de site Web ne cesse de croître.
Ce n'est pas un problème en soi, bien que le nombre toujours croissant de fichiers signifie que la taille des données téléchargées ne cesse de croître.
Cela signifie que la quantité de données à télécharger devient de plus en plus grande. Cela rend le chargement des sites plus lent en général.
Pour aggraver les choses, la création d'une connexion entre le navigateur et le serveur est un opération techniquement coûteuse et prend du temps. À mesure que le nombre de ressources différentes requises sur un site Web augmente, le temps de chargement d'un site augmente également.
En effet, en utilisant HTTP version 1, chaque fois qu'un nouveau fichier est nécessaire, une nouvelle connexion (coûteuse) doit être créée.
Cela signifie que les sites qui voulaient se charger rapidement devaient passer par tout un exercice d'optimisation.
Comment rendre un site Web plus rapide (version pré-HTTP2)
Comme on peut le voir à travers notre exemple simple, HTTP v1 présentait un certain nombre de limitations compte tenu de l'état actuel du Web, ce qui entraînait une lenteur des sites Web. Maintenant, vous avez probablement vu des centaines d'articles vous montrant comment faire votre Site Web WordPress plus rapide.
Nous avons nous-mêmes un tel article, car comme Les développeurs de WordPress, nous recherchons toujours le besoin de vitesse - et nous ne sommes heureux que lorsque nous atteignons une cote de vitesse A.
Incidemment, nous proposons de nombreux articles différents pour ceux qui souhaitent en savoir plus sur WordPress, consultez la section tutoriels sur Collectiveray.
Ce que font la plupart de ces articles qui cherchent à accélérer WordPress, c'est de trouver un moyen de contourner les limitations de HTTP1. Ils effectuent des solutions de contournement pour s'assurer que les sites ne sont pas ralentis par toutes ces connexions.
C'est pourquoi il y avait un besoin si pressant de HTTP2, pas seulement pour WordPress, mais pour tous les autres sites Web. Il fallait faire quelque chose pour résoudre les problèmes inhérents à HTTP1 (à la fois au niveau du navigateur et du serveur Web).
Alors, quelles étaient les solutions / solutions de contournement pour rendre un site Web utilisant HTTP v1 plus rapide? Nous les appelons généralement Réduire, Réutilisation, Recycler. Pour plus d'explications à ce sujet, nous vous suggérons de lire notre article sur la création de sites Web plus rapides ci-dessus.
- Créez un site léger qui utilise un quantité minimale de fichiers JS, CSS et image
- Réduisez le nombre de demandes pour différents fichiers CSS et fichiers JS en combinant autant de ces fichiers que possible (réduction des demandes grâce à la combinaison de fichiers)
- Réduire le nombre de demandes d'images en créer une image qui les combine toutes en un seul et en utilisant des sprites CSS
- Supprimez tous les plugins supplémentaires (pour réduire le nombre d'images, de fichiers CSS et de fichiers JS qu'ils ajoutent au site)
- Compresser les données requises de sorte qu'il soit de plus petite taille (et donc plus rapide à transporter) (par exemple, vous activer la compression WordPress GZIP pour réduire la taille des données à transférer)
- Tirez parti de la mise en cache du navigateur dans WordPress à l'aide d'un plugin, de sorte que si un utilisateur visite à nouveau votre site Web dans un court laps de temps, il ne pourra plus télécharger les mêmes fichiers
- D'autres actions...
En substance, nous voulions réduire le nombre de requêtes séparées entre le serveur et le navigateur. Nous voulions également réduire la taille de ces demandes.
Alors, comment HTTP / 2 améliore-t-il tout cela?
Entrez HTTP / 2
HTTP / 2 a été écrit dans le but de résoudre ces problèmes inhérents. L'un des principaux objectifs de HTTP2 est de
Diminuez la latence pour améliorer la vitesse de chargement des pages dans les navigateurs Web. (La source: WikiPedia)
et introduit les améliorations suivantes
- est binaire, au lieu de textuel
- est entièrement multiplexé, au lieu d'être ordonné et bloquant
- peut, par conséquent, utiliser une connexion pour le parallélisme
- utilise la compression d'en-tête pour réduire les frais généraux
- permet aux serveurs de «pousser» les réponses de manière proactive dans les caches clients
Attends quoi? Ne vous inquiétez pas - essayons d'expliquer cela un peu en termes plus simples.
- Binaire au lieu de textuel: c'est quelque chose qui rend le transfert et l'analyse des données beaucoup plus efficaces. Le transfert de données binaires est également beaucoup less sujet aux erreurs. Les données textuelles sont destinées à la consommation humaine. Les données binaires sont conçues pour la consommation de la machine, l'utilisation de binaires pour transférer des données est intrinsèquement plus rapide.
- Entièrement multiplexé: encore une fois, en termes simples, avec HTTP, le problème était que chaque connexion était susceptible de bloquer les connexions qui devaient se produire après. Imaginez-vous dans la file d'attente pour participer à votre match de sport préféré, mais plutôt que d'avoir plusieurs points d'entrée, vous n'aviez qu'un seul tourniquet. Vous pouvez imaginer que les choses peuvent devenir très très lentes. Le multiplexage permet de transférer plusieurs fichiers et demandes en même temps. Dans l'exemple d'un match de football, plutôt que d'avoir une personne à la fois, nous avons 1 portes, avec 10 tourniquets entrant ensemble.
- Utiliser une connexion pour le parallélisme: comme nous l'avons mentionné précédemment, lorsqu'une connexion coûte cher à créer si vous continuez à la créer et à la fermer pour chaque ressource dont vous avez besoin, vous allez créer un sérieux problème de surcharge. Le multiplexage permet à la même connexion d'être réutilisée encore et encore. Imaginez la connexion comme un canal à travers lequel les données continuent de circuler jusqu'à ce que vous n'ayez plus de données. Notez également que pour tout site Web, le navigateur communique généralement avec plusieurs serveurs Web pour divers scripts et ressources tiers (scripts de partage Facebook, Twitter, Google Analytics, réseaux publicitaires, etc.) est plus efficace.
- Compression d'en-tête est également un autre moyen efficace de supprimer plusieurs des frais généraux associés à la nécessité de récupérer plusieurs ressources différentes à partir du même ou de plusieurs serveurs Web. Encore une fois, généralement plutôt que d'avoir à effectuer plusieurs allers-retours, un seul voyage suffit généralement.
- Permet aux serveurs de pousser les ressources de manière proactive: c'est une façon que le serveur, plutôt que d'attendre que le navigateur client demande les différentes ressources comme dans notre premier exemple, enverra de manière proactive les ressources dont le navigateur aura éventuellement besoin ou demandera. Cela s'appelle HTTP / 2 Server push.
Si nous devions revenir à l'analogie du serveur qui apportait un verre à la fois, le plus grand avantage est que maintenant le serveur utilise un plateau de boissons pour prendre toutes les boissons ensemble. Et ils prennent également des boissons au bar dont ils auront probablement besoin lorsqu'ils sont au restaurant.
Qu'est-ce que SPDY? (aka Speedy)
Avant la naissance de HTTP2, quelqu'un d'autre avait en fait essayé de résoudre les problèmes avec HTTP. Il s'agissait d'un projet de recherche mené par deux ingénieurs de Google, qui avaient tenté de résoudre certains des problèmes de HTTP1.1.
Les objectifs de SPDY étaient de
- Autoriser le multiplexage pour autoriser les demandes simultanées - résolvant ainsi les problèmes de latence créés par plusieurs connexions
- Prioriser les ressources telles que les ressources les plus importantes d'un site envoyées en premier
- Compressez les en-têtes HTTP pour améliorer l'efficacité, comme indiqué ci-dessus
- Implémentez également le serveur push comme indiqué ci-dessus
Dans un premier blog publié par les ingénieurs qui ont écrit le protocole, il a été affirmé qu'il le ferait rendre le Web 2 fois plus rapide. Bien que les principaux navigateurs et les principaux serveurs Web prennent en charge SPDY, il y a eu peu d'adoption réelle.
Cependant, ses recherches étaient essentielles à la sortie éventuelle de HTTP2, car la première version de HTTP2 utilisait SPDY comme base de travail.
Que dois-je faire pour activer HTTP / 2?
Avant d'activer HTTP2, vous devez connaître les implications de votre site.
Quels navigateurs prennent en charge HTTP / 2?
Au moment de la rédaction de cet article, les navigateurs clients les plus populaires prennent entièrement en charge HTTP/2. FireFox, Chrome et les navigateurs basés sur Blink (c'est-à-dire Opera et Yandex) prennent en charge HTTP2. Microsoft Edge prend également en charge HTTP2, tandis que Apple le prend également en charge sur Safari. Les statistiques de sites tels que Puis-je utiliser? montrent que la distribution mondiale actuelle du soutien est supérieure à 95%.
Si le navigateur ne prend pas en charge HTTP2 et que le site Web prend en charge HTTP2, il y aura un retour en douceur vers HTTP1, donc il n'y a absolument aucun problème pour les visiteurs si vous activez HTTP / 2. Il ne peut y avoir que des avantages.
Quels serveurs prennent en charge HTTP / 2
Apache, Nginx, LiteSpeed, IIS et les implémentations de serveur les plus populaires prennent en charge HTTP / 2 - vous pouvez vérifier si votre serveur Web préféré ou le serveur Web que vous utilisez prend en charge http2 ici.
Cependant, si vous pouvez utiliser HTTP2 dépend en fait de l'activation ou non de cette fonction par votre hébergeur. Vous devrez donc confirmer la disponibilité réelle de HTTP / 2 auprès de votre hébergeur. L'image ci-dessous est une liste de serveurs prenant en charge http / 2.
En termes simples, le fait que votre site Web prenne actuellement en charge HTTP / 2 dépend entièrement de votre société d'hébergement ou du serveur sur lequel vous hébergez votre site Web. Nous utilisons Hébergement InMotion (et voici notre Examen de l'hébergement InMotion et essentiellement comment notre VPS fares), qui prend entièrement en charge HTTP2 depuis un certain nombre d'années maintenant.
Cependant, nous utilisons également StackPath pour servir nos ressources, qui prend également en charge HTTP / 2.
Aujourd'hui, la plupart des sociétés d'hébergement prennent en charge HTTP2 sur leurs serveurs, cela ne devrait donc pas être un problème.
Vous pouvez utiliser cet outil de KeyCDN pour déterminer si votre site prend actuellement en charge HTTP / 2. Ce test HTTP / 2 peut vous dire si vous devez effectuer des actions supplémentaires ou non.
Votre site Web doit être sécurisé pour activer HTTP2
Actuellement, tous les navigateurs ne prennent en charge que HTTP2 crypté.
Cela signifie que pour que votre site puisse prendre en charge HTTP / 2, vous devez avoir votre site servi via une connexion sécurisée (TLS / SSL). Nous avons approfondi cela dans notre article sur mise en place d'un certificat sécurisé WordPress sur votre serveur.
Pour récapituler cependant
- Les sites sécurisés obtiennent un signal de classement SEO boosté
- Ils protègent les données transférées vers et depuis le site (particulièrement important pour les mots de passe, les données de carte de crédit et autres données sensibles)
- Il y a un fort mouvement vers des sites Web entièrement sécurisés, et si vous n'implémentez pas de sécurité sur votre site, votre site Web sera forcément laissé pour compte.
Vous devrez acquérir un certificat sécurisé via votre société de services d'hébergement. Des sociétés d'hébergement telles que InMotion vous permettent d'utiliser un certificat partagé, mais si vous souhaitez l'utiliser avec votre domaine, il est fortement recommandé d'acheter votre propre certificat.
Besoin d'aide avec votre site Web?
Embauchez un expert de site Web approuvé pour aussi peu que 65 $. Inscrivez-vous aujourd'hui pour commencer à discuter gratuitement.
Discutez avec un expertAutres sites tels que WordPress.com (par opposition à WordPress.org) - lisez la différence ici - fournissez déjà des certificats sécurisés.
L'installation du certificat est généralement effectuée par votre serveur d'hébergement. C'est une chose ponctuelle, vous n'avez donc pas à vous inquiéter.
Une fois que cela est fait, vous devrez simplement effectuer une redirection permanente 301 via votre fichier .htaccess.
Encore une fois, des hôtes tels que Hébergement InMotion peut gérer tout cela pour vous, si vous n'êtes pas enclin à effectuer vous-même ce genre de modifications techniques (ce qui présente un peu de risque de temps d'arrêt s'il n'est pas fait correctement).
Existe-t-il un plugin que je peux utiliser pour HTTP2?
Nous avons mentionné que l'un des avantages de l'utilisation de HTTP2 est la possibilité d'effectuer une poussée du serveur d'éléments qui seront nécessaires par le navigateur. Ceci, bien sûr, doit être fait au niveau du CMS, cela nécessite donc le support de WordPress ou de votre CMS préféré.
Bien que cela ne soit pas encore pris en charge au niveau principal, vous pouvez modifier vos thèmes ou vos plugins afin qu'ils implémentent la possibilité d'envoyer un
Link:<...> rel="prefetch"
en-tête pour chaque script et style mis en file d'attente lorsque WordPress les génère dans la source de la page.
Si vous cherchez à rendre votre site plus rapide en général, en activant la prélecture et d'autres commandes pour rendre votre site rapide, nous vous recommandons vivement WP Rocket - un plugin premium qui augmente considérablement la vitesse de votre site. Si vous voulez un plugin gratuit, vous pouvez utiliser this.
Découvrez WP Rocket pour rendre votre site plus rapide
Cela profite en fait d'un réel avantage supplémentaire des fonctionnalités activées par HTTP / 2.
Recommandation finale
Vous êtes donc ici parce que vous vouliez rendre votre site plus rapide en mettant HTTP2 en place, non?
C'est seulement un parmi beaucoup moyens de rendre votre site Web plus rapide. Outre cette technologie, vous devrez faire un tas d'autres optimisations si vous souhaitez rendre votre site Web plus rapide, comme
- Implémenter un plugin de mise en cache de page
- Activer la mise en cache au niveau PHP comme OpCache
- Optimiser les images pour la performance
- Activer un CDN (gratuit ou autre)
- Activer la mise en cache du navigateur et la compression gzip
- Optimiser les polices Google
- Activer la prélecture DNS
- Activer le chargement paresseux de l'image
- Activer la minification et la concaténation
- etc etc
Cela ressemble à un tas de travail, non? Il est!
At CollectiveRay, nous passons parfois plusieurs jours travailler pour pousser notre site Web quelques fractions de seconde plus vite. En effet, notre site Web fonctionne sur Joomla, nous n'avons donc pas beaucoup de plugins disponibles pour d'autres options CMS populaires telles que WordPress.
Par exemple, pour nos clients, nous installons toujours WP Rocket. Sur les sites Web où l'installer, nous les faisons toujours charger en moins de 3 secondes, les résultats typiques étant que le site Web se charge en moins d'une seconde.
La beauté de celui-ci cependant, c'est que nous n'avons pas à entreprendre le travail manuel que nous devions faire auparavant, alors nous gagner des heures de temps et de frustration, et nous obtenons d’excellents résultats pour démarrer.
Découvrez WP Rocket pour rendre votre site rapide
Foire aux Questions
Dois-je utiliser HTTP2?
Oui, vous devez activer et utiliser HTTP2 sur votre site Web si vous le pouvez. HTTP2 rendra votre site Web plus rapide et il n'y a absolument aucun inconvénient par rapport à la version HTTP 1. Même si un client utilise un ancien navigateur qui ne prend pas en charge HTTP2, il existe un retour en douceur vers HTTP.
Quelle est la différence entre HTTP et HTTP2?
Il existe un certain nombre de différences et d'améliorations entre HTTP et HTTP2. HTTP2 est binaire, au lieu de textuel, ce qui le rend intrinsèquement plus rapide. Il est entièrement multiplexé, au lieu d'être ordonné et bloquant, de sorte que plusieurs connexions peuvent être utilisées simultanément. Il utilise la compression d'en-tête pour réduire la surcharge et permet aux serveurs de «pousser» les réponses de manière proactive dans les caches clients. Toutes ces améliorations rendent HTTP2 beaucoup plus rapide que HTTP.
HTTP2 nécessite-t-il SSL?
Oui, HTTP2 n'est pris en charge qu'en mode crypté, votre site Web doit donc également implémenter des certificats SSL / TLS sécurisés pour pouvoir utiliser HTTP2.
Les navigateurs prennent-ils en charge HTTP2?
Plus de 95% des navigateurs de sites Web utilisés aujourd'hui prennent en charge HTTP2. Même si le navigateur ne prend pas en charge HTTP2, il y aura un retour en douceur vers HTTP.
Conclusion: rendons le Web plus rapide avec HTTP2
At CollectiveRay, nous avons toujours eu pour objectif de rendre nos sites Web rapides. HTTP2 est à la fois une évolution et une révolution, et nous espérons vraiment que cet article vous aidera à avancer vers votre configuration de WordPress HTTP2.
S'il vous plaît laissez un commentaire ci-dessous et dites-nous ce que vous aimeriez savoir d'autre.
Besoin d'aide pour faire avancer les choses? Essayez ces concerts abordables les mieux notés sur Fiverr!
Cliquez ici pour trouver des experts sur l'optimisation de la vitesse WordPress.
Cliquez ici pour créer un site Web WordPress complet.
Veuillez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!
Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.
et beaucoup plus ...