Comment accélérer un site web ? 10 conseils pour réduire le chargement

Tout vient à point à qui sait attendre, sauf sur le web où les internautes font rarement preuve de patience. En matière de pages vues, de satisfaction client et de taux de conversion, une seule seconde peut faire une énorme différence. En outre, la vitesse de chargement d'un site web a un impact sur sa position dans les recherches naturelles, surtout depuis les Core Web Vitals de Google, une raison de plus pour chercher à l'accélérer. Voici 10 conseils pour accélérer votre site, accompagnés de quelques avis personnels de la rédaction.

Pourquoi accélérer son site web est essentiel ?

La performance d'un site web en termes de rapidité de chargement est étroitement liée à la performance de celui-ci en termes marketing. En effet, selon Kissmetrics, on constate que 40 % des personnes abandonnent un site web qui met plus de 3 secondes à charger et que 1 seconde de chargement supplémentaire réduit de 7 % le taux de conversion. Rapportés à l'ensemble du trafic ou au chiffre d'affaires global, ces quelques pourcentages peuvent représenter d'énormes gains s'ils sont corrigés.

Certains CMS, comme le CMS gratuit de HubSpot, disposent de fonctionnalités d'accélération intégrées et offrent ainsi d'excellentes performances par défaut. Mais d'autres systèmes, comme WordPress, exigent une personnalisation des performances et de nombreux correctifs pour proposer des temps de chargement réduits.

Ainsi, pour vérifier qu'un site charge assez vite, il existe des outils pour tester la vitesse et obtenir des conseils d'optimisation détaillés. Il suffit alors de les suivre pour accélérer son site web et améliorer sensiblement les résultats de celui-ci.

1 - Choisir un bon hébergeur

Note du rédacteur : Nous avons constaté par expérience que le choix de l'hébergeur a une importance majeure pour accélérer son site web puisque tous n'offrent pas les mêmes performances, ni les mêmes prix d'ailleurs.

Tout d'abord, il faut choisir le type d'hébergement entre serveur dédié et serveur mutualisé. Le premier offrira de meilleures performances puisque seul le site du client se trouvera dessus mais son coût sera nettement plus élevé. À l'inverse, un serveur mutualisé sera partagé entre plusieurs sites web pour un tarif nettement plus abordable. Dans ce cas de figure, il est alors important de s'assurer que la bande passante n'est pas restreinte car, si l'un des sites hébergé sur le serveur mutualisé en consomme la majorité, les autres sites auront alors peu de ressources et pourraient connaître d'importantes lenteurs.

Puis il faut s'intéresser à la dimension technique de ces serveurs, si l'on a les connaissances requises. En effet, toutes les technologies n'offrent pas les mêmes performances comme, par exemple, les stockage SSD, qui sont beaucoup plus rapides que ceux HDD. De même, certains hébergeurs se sont spécialisés dans l'hébergement de certains CMS, surtout WordPress qui représente 44 % de tous les CMS utilisés. Enfin, il est souvent judicieux de choisir un hébergeur dont les serveurs sont localisés dans le pays des visiteurs ciblés par le site, ou à proximité. Par exemple, un site de mode ciblant une audience française gagnera à être hébergé en France puisqu'ainsi les données auront moins de distance à parcourir entre le serveur et l'ordinateur de l'internaute. Ses délais d'affichage seront alors nettement plus rapides.

2 - Optimiser les images

Les images sont particulièrement gourmandes en bande passante et il est donc important de chercher à les optimiser. Pour cela, il faut suivre différentes étapes dont la première consiste à les redimensionner. En effet, de nombreux webmasters se contentent de définir la taille d'affichage des images dans les déclarations CSS, imposant au navigateur de télécharger l'image originale. Ainsi, si une image mesurant 1 000 x 1 000 pixels est affichée au format 100 x 100 pixels, le navigateur est contraint de télécharger une image dix fois plus lourde que nécessaire. Alors, pour économiser la bande passante des visiteurs, il faut redimensionner les images avant de les charger sur votre site web. On peut par exemple constater la différence de taille entre ces deux fichiers suite au redimensionnement de l'image :

La seconde étape d'optimisation des images consiste à les compresser. Plusieurs outils gratuits, comme tinypng.com, permettent de réduire la taille d'un fichier en préservant une qualité acceptable, pour un taux de compression allant de 25 à 80 %.

3 - Mettre en place le lazy load

Le lazy load est une technologie testée et approuvée par la rédaction : Cette fonctionnalité consiste à différer le téléchargement des médias tant qu'ils n'apparaissent pas à l'écran de l'utilisateur. Par exemple, un site équipé du lazy load n'affichera pas une image ou une vidéo tant que l'internaute n'aura pas scrollé jusqu'au niveau de page où elle se trouve. Ainsi, les ressources non utilisées ne sont pas initialement requises et allègent sensiblement le poids des données à télécharger pour afficher le site à son ouverture.

4 - Utiliser la mise en cache

Pourquoi imposer aux visiteurs de télécharger les mêmes images à chaque chargement de la page ? La durée de stockage dépend à la fois des paramètres du navigateur et de ceux du serveur. Ainsi, activer la mise en cache du navigateur autorise le stockage temporaire de données sur l'ordinateur du visiteur, dans le but de réduire le temps de chargement lors de sa prochaine visite.

5 - Activer la compression

Activer la compression équivaut à archiver un site web dans un dossier .zip. Cette fonctionnalité permet de réduire significativement la taille d'une page web, et donc d'accélérer son chargement. En effet, le taux de compression des fichiers HTML et CSS peut atteindre 50 à 70 % et c'est donc autant de données en moins à télécharger pour le visiteur à l'ouverture d'une page. La compression doit être paramétrée sur le serveur et dépend ainsi de l'hébergeur qui a été choisi car les options diffèrent selon les choix technologiques de ce dernier.

6 - Optimiser les fichiers CSS

Les déclarations CSS sont chargées avant l'affichage d'une page et plus leur téléchargement est long, plus les visiteurs attendent. Optimiser les fichiers CSS permet donc d'offrir un accès plus rapide aux pages du site et d'améliorer l'expérience utilisateur.

Comme ce type de détail a vite fait de s'accumuler et de parasiter les performances d'un site web, il faut examiner les feuilles de style CSS pour supprimer les déclarations superflues. Puis, une fois les déclarations inutiles supprimées, il s'agit de réduire la taille des fichiers CSS. Cette opération consiste essentiellement à éliminer les espaces superflus afin d'alléger le fichier au maximum. Pour ce faire, il faut d'abord vérifier si le CMS utilisé dispose d'une fonctionnalité d'optimisation CSS, et si celle-ci est activée. Par exemple, HubSpot optimise par défaut les fichiers CSS, mais ce n'est pas le cas de Wordpress. Si le CMS ne propose pas cette option, il est possible d'opter pour un service en ligne gratuit comme csscompressor.com. Il suffit de copier et coller les déclarations CSS dans l'outil, puis de cliquer sur « Compresser » pour obtenir une feuille de style optimisée.

7 - Déférer le chargement du fichier JavaScript

JavaScript est un langage informatique dit de « script orienté objet ». Il va donc commander au navigateur l'exécution de différentes tâches comme des animations ou des mises en forme graphiques. Mais plus celles-ci sont nombreuses, plus le fichier est lourd et donc, plus le temps de chargement de la page est long. En déférant le chargement de ce fichier, il est ainsi possible d'accélérer l'affichage initial d'une page web. On distinguera pourtant les requêtes critiques de celles non critiques afin de ne pas bloquer l'exécution d'éléments qui dégraderaient l'expérience de l'internaute sur la page.

8 - Placer les scripts sous la ligne de flottaison

Sur de nombreux sites, les scripts se trouvent en haut de page, obligeant les visiteurs à patienter. La solution la plus simple consiste à placer ces fichiers externes en bas de page, juste avant la balise. La majeure partie du contenu peut alors se charger avant les scripts.

Une autre manière de contrôler le chargement des scripts consiste à associer des attributs defer ou async aux fichiers .js intégrés au site web.

Ces balises ont chacune leur utilité, qu'il est important de bien distinguer.

• Les balises async autorisent le chargement simultané de la page et des scripts, mais ces derniers sont chargés dans le désordre. En règle générale, les fichiers les plus légers sont chargés en premier mais pour certains scripts, cette option peut s'avérer désastreuse.
• L'attribut defer repousse le chargement des scripts jusqu'à ce que l'intégralité du contenu ait été chargée. Les scripts sont ensuite chargés dans l'ordre et il faut vérifier que ce chargement différé n'entrave pas le fonctionnement de la page.

Pour utiliser ces attributs, il suffit de les ajouter aux balises de la manière suivante :

<script type=”text/javascript” src=”/path/filename.js” defer></script>

<script type=”text/javascript” src=”/path/filename.js” async></script>

Le choix de l'attribut se fait en fonction de l'importance relative de chaque script. L'attribut async convient aux scripts prioritaires, qui doivent être chargés rapidement sans gêner l'accès au contenu. Le chargement des scripts secondaires peut être différé afin d'accélérer l'affichage de la page. Bien entendu, il est important de tester chacun des scripts pour éviter tout dysfonctionnement.

Les pages web se développent proportionnellement aux attentes des internautes : les fichiers JavaScript, les déclarations CSS et les outils d'analytics tiers se complexifient et alourdissent les sites web. Les marketeurs n'ont pourtant aucune raison de s'alarmer : quelques réflexes simples suffisent à optimiser la vitesse de chargement, et donc à éviter que les leads ne fassent demi-tour en arrivant sur votre site web. Pour aller plus loin, il est possible d'utiliser l'outil gratuit Website Grader pour évaluer un site web en quelques secondes et obtenir des pistes d'amélioration gratuites.

9 - Réduire le nombre de plugins et widgets

Certains CMS, comme WordPress, proposent l'ajout d'extensions (appelées plugins) et widgets pour améliorer les fonctionnalités proposées par un site web. Les formulaires de contact sont par exemple souvent générés par une extension dont la plus connue est Contact Form 7. De même, la gestion de la mise en cache peut être gérée par une extension, tout comme la sécurisation du site. Mais cumulés, tous ces plugins et widgets alourdissent le temps de chargement de chaque page.

Il est donc important de les choisir judicieusement et s'interroger régulièrement sur le bien-fondé de leur présence. Certains peuvent être tout simplement inutiles quand d'autres seront en doublon. Pour reprendre l'exemple des formulaires de contact, il serait inutile d'avoir deux extensions pour gérer ceux-ci. Enfin, les CMS évoluent en permanence et offrent parfois des fonctionnalités jusque-là prises en charge par des plugins ou widgets. C'est notamment le cas du lazy load qui est apparu sur la version 5.5 de WordPress, permettant de supprimer une extension.

10 - Paramétrer un CDN

Un CDN, pour Content Delivery Network, est un réseau de distribution de contenu constitué de nombreux serveurs répartis en différents lieux du globe. Lorsqu'un site utilise un CDN, son contenu est dupliqué sur l'ensemble de ces serveurs. Ainsi, lorsqu'un internaute basé à Bangkok consulte le site de Forbes, c'est la version hébergée en Asie qui lui sera servie plutôt que celle hébergée en Amérique du Nord. Le délai de chargement du site est ainsi grandement amélioré.

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.