Quand un internaute surfe sur le web, il utilise un navigateur. L'internaute communique avec le navigateur dans un langage qu'il maîtrise : il renseigne des mots-clés dans un moteur de recherche, ou il indique directement l'adresse URL d'un site. Pour faire apparaître le résultat requis, le navigateur en fait la demande auprès d'un serveur web.
Pour communiquer avec le serveur, le navigateur utilise le protocole HTTP. Le navigateur envoie sa demande via une requête HTTP, le serveur renvoie une réponse HTTP. Il existe plusieurs types de requêtes HTTP, en fonction de l'action à effectuer. La configuration des requêtes HTTP influe sur la performance du site web : le développeur peut les optimiser.
Sommaire :
Qu'est-ce qu'une requête HTTP ?
Une requête HTTP est une demande que le navigateur envoie au serveur pour qu'il effectue une action. Plusieurs méthodes de requête existent. La méthode GET, par exemple, permet au navigateur d'obtenir un document HTML, pour afficher la page web requise sur l'écran de l'internaute.
Comment fonctionne une requête HTTP ?
1 - Un internaute navigue sur le web
C'est l'internaute qui déclenche le processus. Il formule une demande depuis son navigateur web (Google Chrome, Mozzila Firefox…) : il tape des mots-clés dans la barre de recherche, il entre une adresse URL, il clique sur une commande interactive sur un site ou il remplit un formulaire sur une page web, par exemple.
2 - Le navigateur appelle le serveur
Pour appeler le serveur qui héberge les ressources pertinentes, le navigateur utilise un protocole de communication client-serveur (le « client » désigne le navigateur) : le protocole HTTP.
Le navigateur fait une requête HTTP pour obtenir une ressource stockée sur le serveur. Si l'internaute entre une URL, par exemple, le navigateur fait une requête HTTP pour afficher à l'écran la page correspondant à l'URL. Le navigateur peut également faire une requête HTTP pour envoyer des données : c'est l'exemple type de l'internaute qui remplit un formulaire en ligne.
3 - Le serveur effectue l'action requise
Le serveur répond au navigateur en fonction du type de la requête HTTP. Sur une requête de type GET, par exemple, le serveur envoie au navigateur les fichiers HTML du site. Ainsi, le navigateur peut afficher sur l'écran de l'internaute tous les éléments de la page web : texte, images et fichiers multimédia.
Il est important de comprendre que le navigateur doit envoyer une demande HTTP séparée pour chaque ressource requise. Si la page web contient une image et si elle est mise en forme avec un fichier CSS, par exemple, le navigateur envoie deux requêtes HTML : une pour récupérer le fichier image, et une pour récupérer le fichier CSS. Quand le navigateur doit appeler de nombreuses ressources, il fait de nombreuses requêtes : la durée de chargement de la page web augmente en conséquence.
Quels sont les 3 types de requêtes les plus courants ?
- GET
- HEAD
- POST
1 - GET
La méthode GET, littéralement « obtenir », est la requête HTTP la plus utilisée. Avec la méthode GET, le navigateur demande au serveur de lui transmettre des ressources. Le navigateur récupère ainsi toutes les données de la page web, et les affiche à l'écran.
2 - HEAD
Comme la méthode GET, la méthode HEAD permet de récupérer des données auprès du serveur. Mais ici, la requête HTTP porte uniquement sur les données d'en-tête du fichier HTML. La méthode HEAD permet ainsi au navigateur de lire les informations d'en-tête avant d'afficher la ressource. C'est utile par exemple si le navigateur doit charger une ressource volumineuse : il en connaît préalablement la taille.
3 - POST
La méthode POST inverse le sens de la requête HTTP : le navigateur ne récupère pas des données, il en envoie au serveur. La méthode de type POST sert notamment à envoyer des données de formulaire HTML, lorsqu'un internaute remplit un formulaire sur un site web.
La méthode PUT, similaire, permet également de transmettre des données au serveur, pour ajouter ou remplacer une ressource sur le serveur. À l'inverse, la méthode DELETE est une requête HTML pour supprimer une ressource.
Quel est l'effet des requêtes HTTP sur l'expérience utilisateur ?
Lors d'une requête HTTP, tout se passe entre le navigateur et le serveur : l'internaute a priori ne voit rien. Les requêtes HTTP ont néanmoins un impact non négligeable en termes d'expérience utilisateur (UX) : plus le site web contient de fichiers, plus le navigateur doit envoyer de requêtes HTTP. Et plus il y a de requêtes, plus le temps de chargement du site est long. Le transfert de fichiers volumineux, en outre, ralentit encore le processus.
Un temps de chargement trop long peut constituer une expérience négative et frustrante pour les utilisateurs du site web, voire un frein à la navigation. Pour preuve : selon Orson.io, 53 % des visiteurs d'un site web le quittent s'il prend plus de 3 secondes pour se charger.
Afin de contourner le problème, certains développeurs sont tentés d'utiliser un seul fichier JavaScript pour contrôler l'ensemble d'une page web. Mais la taille des fichiers affecte aussi le temps de chargement. Ainsi, pour les sites complexes, ce fichier unique atteindrait une taille ingérable.
Il est difficile de déterminer le nombre de requêtes HTTP idéal. Des solutions existent néanmoins pour réduire facilement la durée de chargement des pages d'un site web, de manière à optimiser l'UX.
Quelle est la structure d'une requête HTTP ?
La méthode
La première ligne de la requête HTTP indique la méthode à utiliser. Si le navigateur doit récupérer des données pour afficher une page web, par exemple, la première ligne mentionne la méthode GET.
Cette première ligne indique en outre :
- L'URL simplifiée de la ressource que le navigateur veut récupérer dans le serveur.
- La version du protocole HTTP.
Exemple de première ligne de requête HTTP : « GET / HTTP/1.1 ».
L'en-tête
L'en-tête de la requête HTTP est optionnel. L'en-tête sert à fournir au serveur des informations supplémentaires, de type Host, User-Agent, Cookies ou encore Connection.
Le corps
Pour certaines méthodes de requêtes HTML, telles que la méthode POST, le navigateur envoie des données au serveur. Les données sont renseignées dans le corps de la requête HTML.
Si le navigateur, à l'inverse, reçoit des données : ces données apparaissent dans le corps de la réponse HTTP fournie par le serveur.
Comment réduire le nombre de requêtes HTTP ?
Pour augmenter la vitesse d'un site web, il est nécessaire de réduire au maximum le nombre de requêtes HTTP. Voici quelques conseils à suivre pour optimiser une page.
1 - Vérifier le nombre de requêtes HTTP généré par le site web
Le panneau Network de Google Home permet de visualiser le contenu de la page et ce qui met du temps à charger.
Il indique tous les fichiers qu'un navigateur a dû demander et transférer afin de charger la page, ainsi que la chronologie de chacune de ces opérations. L'API peut par exemple indiquer précisément quand la requête HTTP d'une image a démarré et quand le dernier octet de l'image a été reçu.
Pour visualiser le panneau Network d'une page web, il faut ouvrir la page dans Google Chrome puis lancer les Outils de développement.
Le panneau Network enregistre toute l'activité réseau lorsque les outils de développement sont ouverts, il peut donc être vide à l'ouverture. Il faut recharger la page pour lancer l'enregistrement, ou attendre une activité réseau. Ainsi, il est possible de savoir combien de requêtes sont exigées par un site web.
2 - Supprimer les images inutiles
À ce stade, les fichiers les plus longs à charger, y compris les fichiers image, sont identifiés. Le moyen le plus simple pour réduire le nombre de fichiers demandés consiste souvent à supprimer les images inutiles.
Les images sont des ressources précieuses pour une page web, car elles offrent une expérience visuelle forte. Toutefois, si certaines images de la page n'apportent pas de valeur ajoutée, il vaut mieux s'en débarrasser, surtout si elles sont très volumineuses.
3 - Réduire la taille des fichiers des images restantes
Pour les images à conserver, il est recommandé d'utiliser des photos de haute qualité et dont la taille de fichier a été compressée. Cela réduira le temps nécessaire pour effectuer une requête HTTP, et donc le temps de chargement.
Des outils tels que TinyPNG et Compressor.io permettent de redimensionner et de compresser les images sans perte de qualité.
4 - Déterminer quelles autres parties de la page allongent le temps de chargement
Supprimer et compresser les images constituent un bon point de départ pour réduire le nombre de requêtes HTTP et le temps de chargement des pages, mais le panneau Network peut faire apparaître d'autres éléments clés.
Par exemple, l'intégration d'une vidéo ou de messages issus de Twitter peut ajouter une ou deux secondes au temps de chargement. Il faut alors décider de conserver ou non ces ressources.
5 - Utiliser du code JavaScript asynchrone
Si le code JavaScript de la page n'est pas asynchrone, il est pertinent de demander au développeur de le modifier, voire de le supprimer purement et simplement de la page web, si possible.
Il s'agit là encore d'optimiser l'expérience utilisateur : lorsqu'un navigateur charge une page web, il en charge les ressources de haut en bas. S'il atteint un fichier JavaScript à charger, le navigateur interrompt le chargement des autres composants de la page jusqu'à ce que ce fichier JavaScript soit entièrement chargé.
Si le code JavaScript est asynchrone, le navigateur le charge alors en même temps que les autres éléments de la page. L'expérience utilisateur s'en trouve ainsi nettement améliorée.
6 - Combiner les fichiers CSS
Chaque fichier CSS utilisé dans le site web augmente le nombre de requêtes HTTP nécessaires et allonge par conséquent le temps de chargement des pages. Il est souvent possible de regrouper deux fichiers CSS ou plus (l'aide d'un développeur sera probablement nécessaire).
En effet, le code CSS peut se trouver n'importe où sur le site ou dans n'importe quel nombre de fichiers sans que son fonctionnement en soit affecté. En réalité, de nombreux sites disposent de plusieurs fichiers CSS simplement pour des raisons de simplicité, les concepteurs estimant souvent qu'il est plus facile de travailler avec des fichiers séparés.
L'outil Website Grader de HubSpot permet d'obtenir un rapport plus détaillé sur la performance globale du site. Il fournit un rapport personnalisé gratuit pour évaluer le site en fonction d'indicateurs clés tels que la performance, la compatibilité sur mobile, le SEO et la sécurité.
Pour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil Website Grader ; ou découvrez les modèles de site web gratuits de HubSpot.
