Dès que vous surfez sur le web, de nombreux mécanismes techniques se mettent en marche dans les coulisses. Cet univers appartient typiquement aux développeurs et aux ingénieurs, tandis les marketeurs préfèrent généralement se tenir à l'écart de ces questions techniques.

[Guide] Comment planifier et réussir la refonte d'un site web ?

Ces derniers doivent toutefois avoir une compréhension générale de ce qu'il se passe. En effet, les indicateurs dont les marketeurs ont la charge peuvent dépendre en grande partie du développement en arrière-plan d'un site web. Par exemple, le nombre de requêtes HTTP exigées par votre site a un impact sur le temps de chargement des pages, ce qui affecte l'expérience utilisateur, le taux de rejets et d'autres indicateurs clés.

Qu'est-ce qu'une requête HTTP ?

Chaque fois qu'une personne visite une page web, voici généralement ce qu'il se passe : le navigateur web de cette personne (Chrome, Firefox, etc.) appelle le serveur web qui héberge la page qu'elle essaie de consulter. Ce navigateur demande au serveur de lui envoyer les fichiers renfermant le contenu de ce site. Ces fichiers contiennent le texte, les images et les fichiers multimédias présents sur cette page web.

Cette requête est appelée une requête HTTP, acronyme de « Hypertext Transfer Protocol », un nom technique qui fait référence à l'envoi par un navigateur d'une demande de fichier, ainsi qu'au transfert du fichier du serveur au navigateur.

Dès que votre serveur reçoit une requête HTTP de la part du navigateur d'un utilisateur, il répond et lui transmet les fichiers. Le navigateur de l'utilisateur peut alors afficher la page web.

Il est nécessaire de préciser que le navigateur doit envoyer une demande HTTP séparée pour chaque fichier de votre site web. Si ce dernier n'en contient pas beaucoup, la demande et le téléchargement de son contenu seront rapides, mais la majorité des sites web de qualité comprennent beaucoup de fichiers, notamment à cause des images de haute définition.

Comment les requêtes HTTP affectent-elles l'expérience utilisateur ?

Plus vous hébergez de fichiers sur votre site, plus le navigateur de l'utilisateur doit envoyer de requêtes HTTP. Plus il y a de requêtes, plus le temps de chargement de votre site est long (le transfert de fichiers volumineux ralentit davantage le processus).

Un temps de chargement trop long peut constituer une expérience négative et frustrante pour vos utilisateurs. C'est le cas en particulier pour les utilisateurs de mobiles, car la plupart d'entre eux devront attendre que toutes les ressources d'une page soient téléchargées avant que la page ne commence à apparaître sur leur navigateur.

Les recherches montrent également que le temps de chargement joue un rôle crucial dans la performance d'un site web. Selon Kissmetrics, 47 % des consommateurs attendent d'une page web qu'elle se charge en moins de deux secondes et 40 % abandonnent un site dont le temps de chargement est supérieur à trois secondes.

Il convient de s'interroger sur le nombre de requêtes HTTP idéal. Si certains pensent résoudre le problème en n'utilisant qu'un seul fichier JavaScript pour contrôler l'ensemble d'une page web, il ne faut pas oublier que la taille des fichiers affecte aussi le temps de chargement, ainsi, pour les sites complexes, ce fichier unique atteindrait une taille ingérable.

Même s'il est difficile de définir le nombre optimal de fichiers auxquels vous devriez réduire votre page web, Jeffrey Vocell, Directeur marketing à HubSpot, suggère d'en avoir entre 10 et 30. Cet objectif est généralement difficile à atteindre et Steve Souders, ancien expert en performance internet chez Yahoo et Google, a indiqué que le nombre moyen de requêtes HTTP par page était supérieur à 99.

Comment réduire le nombre de requêtes HTTP de votre site web ?

Pour augmenter la vitesse de votre site web, il est donc nécessaire de réduire au maximum le nombre de requêtes HTTP de votre site web. Voici donc quelques conseils à suivre pour l'optimiser : 

1 - Vérifiez le nombre de requêtes HTTP généré par votre site web

Pour cela, utilisez le panneau Network de Google Chrome. Vous y verrez le contenu de votre page et ce qui met du temps à charger.

Il vous montre tous les fichiers qu'un navigateur a dû demander et transférer afin de télécharger la page, ainsi que la chronologie de chacune de ces opérations. Par exemple, l'API peut vous dire 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 voir le panneau Network d'une page web, ouvrez-la dans Google Chrome puis lancez les Outils de développement.

Chrome

Le panneau Network enregistre toute l'activité réseau lorsque les outils de développement sont ouverts, il peut donc être vide lorsque vous l'ouvrez. Rechargez la page pour lancer l'enregistrement ou attendez une activité réseau dans votre application. Vous pourrez ainsi savoir combien de requêtes sont exigées par votre site web.

2 - Supprimez les images inutiles

À ce stade, vous devriez savoir quels fichiers sont les plus longs à charger, y compris les fichiers image. 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 votre page n'apportent pas de valeur ajoutée, il vaut mieux vous en débarrasser, surtout si elles sont très volumineuses.

3 - Réduisez la taille des fichiers des images restantes

Pour les images que vous conservez, utilisez des photos haute qualité 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.

Vous pouvez utiliser un outil tel que TinyPNG ou Compressor.io et si vous utilisez déjà HubSpot, notez que le système d'optimisation de contenu redimensionne et compresse automatiquement les images.

4 - Déterminez quelles autres parties de votre page allongent le temps de chargement

Supprimer et compresser les images constitue 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 Twitter peut ajouter une ou deux secondes à votre temps de chargement. Vous pouvez alors décider de conserver ou non ces ressources.

5 - Utilisez du code JavaScript asynchrone

Si le code JavaScript de votre page n'est pas asynchrone, demandez à votre développeur de le modifier, voire de le supprimer purement et simplement de votre page web, si possible.

Il s'agit là encore de 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 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 - Combinez les fichiers CSS

Chaque fichier CSS utilisé dans votre site web augmente le nombre de requêtes HTTP nécessaires pour votre site, et allonge par conséquent le temps de chargement de vos pages. Si cela est parfois inévitable, vous pouvez regrouper dans la plupart des cas 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 votre site ou dans n'importe quel nombre de fichiers sans que son fonctionnement en soit affecté. En fait, 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.

Pour obtenir un rapport plus détaillé sur la performance globale de votre site, essayez l'outil Website Grader de HubSpot. Vous recevrez un rapport personnalisé gratuit qui évaluera votre site en fonction d'indicateurs clés tels que la performance, la compatibilité sur mobile, le SEO et la sécurité. Pour découvrir d'autres techniques pour améliorer le référencement de votre site web, n'oubliez pas non plus de télécharger gratuitement votre guide d'introduction au SEO

Guide pour les moteurs de recherche

Publication originale le 20 juillet 2017, mise à jour le août 28 2018

Sujet(s):

Performance web