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.

>> Évaluez gratuitement votre site web et découvrez comment l'améliorer avec  Website Grader.

Ceux-ci 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.

Comment réaliser un audit du SEO technique ?

Téléchargez ce guide gratuit et définissez une stratégie de SEO technique efficace pour optimiser les performances de votre site.

Comment fonctionne 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.

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.

Requête HTTP et 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 Orson.io, 53 % des visiteurs d'un site web le quittent s'il prend plus de 3 secondes pour se charger.

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.

Toutefois, pas de panique ! Il existe plusieurs solutions pour réduire facilement la durée de chargement des pages de votre site web et, ainsi, optimiser l'expérience utilisateur des internautes. 

Réduire le nombre de requêtes HTTP pour optimiser son site web

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

1 - Vérifier 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.

Panneau Network

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 - Supprimer 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éduire 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 qui vous permettent de redimensionner et de compresser vos images sans perte de qualité.

4 - Déterminer 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 de Twitter peut ajouter une ou deux secondes à votre temps de chargement. Vous pouvez alors décider de conserver ou non ces ressources.

5 - Utiliser 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 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 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 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 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.

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 aller plus loin, utilisez cet outil gratuit pour évaluer votre site web en quelques secondes et obtenir des conseils gratuits pour l'améliorer.Website Grader

Publication originale le 9 novembre 2020, mise à jour le 09 novembre 2020

Sujet(s):

Performance web