Conseils pour améliorer la vitesse des sites web | Accélérer les sites web

Les performances web sont un concept fourre-tout qui désigne la qualité mesurable et perçue de l'expérience utilisateur d'un site web, et qui s'intéresse particulièrement à la vitesse et la fiabilité de la page.

Les développeurs et les propriétaires de sites web peuvent prendre un certain nombre de mesures pour améliorer les performances de leur site web. Ils ont la possibilité d'optimiser les facteurs de conception web tels que la taille des images, le formatage du code et l'utilisation de scripts externes, ainsi que le choix de bons fournisseurs pour l'hébergement, la mise en cache du contenu et l'équilibrage de charge.

Lorsque les pages web se chargent plus rapidement et de manière plus fiable, elles garantissent non seulement une meilleure expérience utilisateur, mais ont tendance à améliorer le référencement organique, gagnent en visibilité auprès des visiteurs potentiels et affichent souvent des taux de conversion plus élevés.

Comment tester les performances d'un site web

La première étape fondamentale pour améliorer les performances d'un site web consiste à mesurer ses performances actuelles. Divers facteurs déterminent la façon dont les utilisateurs (et d'autres parties) perçoivent la vitesse et la fiabilité d'un site web, et l'évaluation de ces facteurs est le seul moyen de connaître les actions qui entraîneront le plus d'améliorations.

Il existe un certain nombre d'outils gratuits permettant de mesurer les performances, notamment Google Lighthouse (disponible dans la suite DevTools du navigateur Google Chrome) et Cloudflare Observatory (disponible pour tout utilisateur de Cloudflare dans son tableau de bord).

Que doivent évaluer les propriétaires de sites web à l'aide de ces outils ? Il est judicieux de commencer par les Core Web Vitals (signaux web essentiels), un ensemble de trois indicateurs qui mesurent des aspects importants des performances du web :

• Le Largest Contentful Paint mesure la vitesse de chargement du plus grand élément d'une page
• Le First Input Delay mesure la rapidité avec laquelle une page répond à la saisie de l'utilisateur
• Le Cumulative Layout Shift mesure la stabilité visuelle des éléments d'une page

L'amélioration des Core Web Vitals d'une page apportera non des indications précieuses sur l'expérience utilisateur, mais également un meilleur référencement organique dans Google.

D'autres indicateurs importants à évaluer sont le temps jusqu'au premier octet (TTFB) (délai à partir duquel une page commence à se charger), la vitesse de résolution DNS (vitesse à laquelle le service de noms de domaine d'une page convertit un nom de domaine en adresse IP) et le délai avant interaction (délai au bout duquel un utilisateur peut interagir avec une page).

Les exemples suivants illustrent les effets concrets de la prise en compte de ces indicateurs :

• Une page web dont le Largest Contentful Paint important est trop élevé, à savoir le composant le plus volumineux met beaucoup trop de temps à s'afficher pour l'utilisateur. Le propriétaire de la page web peut chercher l'existence d'un code inutile qui serait chargé avant ce composant, et, le cas échéant, le supprimer.
• Une page web avec un temps jusqu'au premier octet (TTFB) lent met trop de temps à récupérer
les ressources du site web à partir de son serveur d'origine. Le propriétaire de la page web peut examiner les temps de réponse de son fournisseur de DNS et de l'hébergeur de son site web, afin de reconfigurer ou de remplacer l'un ou l'autre de ces services.

Comment améliorer les performances d'un site web

Il n'existe pas de « recette magique » pour garantir de bonnes performances sur le web, cependant les propriétaires de sites web peuvent commencer par appliquer les bonnes pratiques suivantes pour tenter d'améliorer la vitesse et la fiabilité de leur site :

Optimiser les images

Les images sont souvent les plus longues à charger sur un site web, car les fichiers images ont tendance à être plus volumineux que les fichiers HTML et CSS. Par chance, le temps de chargement des images peut être réduit grâce à l'optimisation des images qui implique généralement de réduire la résolution et les dimensions de l'image ou de compresser le fichier image lui-même.

Limiter le nombre de requêtes HTTP

La plupart des pages web exigent des navigateurs qu'ils effectuent plusieurs requêtes HTTP pour appeler les différents éléments de la page, à savoir les images, les scripts et les fichiers CSS. En réalité, dans de nombreuses pages web des dizaines de requêtes de ce type sont nécessaires. Chaque requête implique un aller-retour avec le serveur hébergeant la ressource, ce qui peut allonger le temps de chargement global d'une page web.

En raison de ces problèmes potentiels, le nombre total de ressources à charger pour chaque page doit être limité au minimum. De plus, un test de vitesse doit permettre d'identifier les requêtes HTTP les plus longues.

Utiliser la mise en cache HTTP du navigateur

La cache du navigateur est un espace de stockage temporaire où les navigateurs enregistrent des copies des fichiers statiques afin de pouvoir charger beaucoup plus rapidement les pages web récemment visitées. Les développeurs peuvent demander aux navigateurs de mettre en cache des éléments d'une page web qui ne changent pas souvent. Les instructions relatives à la mise en cache du navigateur figurent dans les en-têtes des réponses HTTP du serveur hôte. Cela réduit considérablement la quantité de données que le serveur doit transférer au navigateur, en raccourcissant ainsi les temps de chargement pour les utilisateurs qui visitent souvent certaines pages.

Supprimer le code JavaScript inutile qui bloque le rendu

Il arrive que les pages web comportent du code inutile qui se charge avant le contenu plus important de la page, ce qui ralentit le temps de chargement global. C'est souvent le cas avec les grands sites web, dans lesquels de nombreux propriétaires ajoutent du code et du contenu de manière indépendante. Les propriétaires de pages web peuvent utiliser un outil d'analyse des performances web pour identifier le code inutile sur les pages peu performantes.

Limiter le recours à des scripts externes

Tout élément faisant l'objet d'un script dans une page web et qui est chargé depuis une autre source, comme les systèmes de commentaires externes, les boutons d'incitation à l'action, les formulaires contextuels de génération de leads, doit être chargé à chaque chargement de la page.

Selon la taille du script, ceux-ci peuvent ralentir une page web ou empêcher le chargement simultané de la page (on parle alors de ce « saut de contenu » ou de « décalage de la mise en page », ce qui peut s'avérer particulièrement frustrant pour les utilisateurs mobiles, qui doivent souvent faire défiler la page web pour la voir dans son intégralité).

Limiter l'utilisation de la redirection

On parle de redirection lorsque le visiteur d'une page web est redirigé vers une autre page. Les redirections ajoutent quelques fractions de seconde, voire des secondes entières, au temps de chargement des pages. Les redirections sont parfois inévitables, mais elles peuvent être utilisées de manière excessive et s'accumuler au fil du temps sur les sites web de grande taille aux propriétaires multiples. Les propriétaires de sites web doivent établir des directives claires pour le recours aux redirections et examiner régulièrement les pages web importantes pour détecter les redirections inutiles.

Réduire les fichiers CSS et JavaScript

La minification du code correspond à la suppression de tout ce dont un ordinateur n'a pas besoin pour comprendre et exécuter le code, par exemple les commentaires sur le code, les espaces et les points-virgules inutiles. Les fichiers CSS et JavaScript sont ainsi légèrement plus petits, de sorte qu'ils se chargent plus rapidement dans le navigateur et occupent moins de bande passante. La minification n'apporte généralement qu'une amélioration marginale des performances, mais cela n'enlève rien à l'importance de cette bonne pratique.

Utiliser des services tiers efficaces pour les fonctions importantes du site web

• Hébergement : un site web, aussi bien conçu soit-il, se chargera lentement si son serveur d'origine répond lentement aux requêtes. Les propriétaires de sites web doivent choisir un serveur dont le temps de réponse moyen est inférieur à 200 ms et dont la fiabilité est reconnue.
• DNS : le DNS est un système qui convertit les domaines (par ex. example.com) en adresses, opération importante dans le processus de chargement des pages. Les propriétaires de sites web doivent choisir des services DNS qui fournissent des résultats (« résolvent ») rapidement et de manière fiable, au lieu de dépendre du DNS de leur hébergeur.
• Mise en cache : plus le contenu du site web est proche des personnes à l'origine de la requête, plus vite il sera servi.Les propriétaires de sites web doivent utiliser un réseau de diffusion de contenu (CDN) pour mettre en cache le contenu web en de nombreux endroits dans le monde, pour éviter aux requêtes des utilisateurs de parcourir des centaines ou des milliers de kilomètres (et de traverser de nombreux réseaux autonomes) avant d'atteindre le serveur d'origine du site web.
• Cybersécurité : les attaques DDoS, les bots et autres cyberattaques peuvent dégrader les performances d'un site web. Ce sujet est trop vaste pour être traité en détail ici, mais les propriétaires de sites web doivent choisir un fournisseur de sécurité des applications web qui filtre le trafic malveillant sans ralentir le trafic légitime.

Comment Cloudflare contribue à améliorer les performances des sites web

Cloudflare est une plateforme mondiale consacrée à la sécurité et aux performances de l'Internet. Grâce à la plateforme, les sites web, quelles que soient leur taille et leur complexité, ont la possibilité d'améliorer leurs performances en se connectant à un réseau mondial de 330 villes.

Pour les sites web personnels et les petites entreprises, Cloudflare propose une offre gratuite et une offre à bas prix qui entrent en action en quelques minutes et qui contiennent automatiquement d'importantes améliorations des performances du site web :

• Services DNS performants
• Réseau de diffusion de contenu (CDN)
• Optimisation des images
• Optimisation mobile
• Protection contre les attaques DDoS et les bots malveillants courants

Pour les plus grandes entreprises, Cloudflare propose également des services d'amélioration des performances de niveau professionnel qui fonctionnent avec n'importe quel type d'application ou d'infrastructure web.