Le temps de chargement d’un site revêt aujourd’hui une importance capitale, tant en terme d’expérience utilisateur, de marketing que de référencement. Il est donc important de mesurer cette métrique et d’améliorer, si possible, ce paramètre.
Vous voulez savoir si votre site est lent à charger ? Apprendre les techniques pour améliorer son temps de chargement ? Faisons le point dans cet article !
Pourquoi améliorer le temps de chargement d’un site ?
Pour bien mettre en place les techniques qui permettent l’amélioration du temps de chargement d’un site, il est primordial de comprendre pourquoi cela compte.
Expérience utilisateur
Tout d’abord, avoir un site qui se charge rapidement, c’est important pour l’expérience utilisateur. Un utilisateur n’est pas patient, et encore moins sur mobile. Si un site met trop de temps à charger, il le quittera. On parle en général de la règle des 3 secondes : plus de la moitié des utilisateurs quitterait un site s’il met plus de 3 secondes à charger.
Un site mal optimisé conduira donc à une perte de visiteurs. C’est encore plus important s’il s’agit d’un site de type e-commerce, dont les ventes dépendent directement du nombre de visiteurs.
Pour le référencement
Google, pour référencer les pages web dans son moteur de recherche, essaye de plus en plus d’adopter le comportement d’un utilisateur. Pour faire simple, un site qui plait à un visiteur sera mieux référencé qu’un site difficile à utiliser. On rejoint donc le point précédent, une page web avec une expérience utilisateur dégradée verra son référencement se détériorer.
Donc, pour un SEO (Search Engine Optimization) efficace, il est important d’avoir un site qui se charge rapidement.
Comment améliorer le temps de chargement d’une page web ?
Maintenant que nous compris l’importance qu’a le temps de chargement d’un site, il est temps de savoir comment l’optimiser !
Comment savoir si mon site est lent ?
Avant toute chose, pour ne pas partir à l’aveugle, il faut savoir à quel point un site est lent. De même, un site lent à charger peut l’être pour de nombreuses raisons ; il faut connaître l’origine exacte de ces problèmes.
Pour cela, il existe beaucoup d’outils, nous allons en présenter deux.
PageSpeed Insights
PageSpeed Insights est un outil mis en place par Google, qui permet de facilement connaître le niveau d’optimisation d’un site, en simulant un chargement depuis un ordinateur et un mobile (les temps de chargement seront alors généralement plus longs).
Pour chaque problème detecté, PageSpeed Inisghts donne des recommandations, voire de la documentation, expliquant comment corriger ces problèmes
Google Lighthouse
L’autre outil existant, là aussi développé par Google mais moins accessible aux néophytes (mais parfait pour les développeurs freelance !), c’est Google Lighthouse.
Google Lighthouse est un outil intégré à la console développeur de Google Chrome, permettant de tester un site web, en mobile ou desktop, et d’obtenir des résultats dans plusieurs domaines, notamment :
- Les performances (ce qui nous intéresse le plus ici) ;
- Les bonnes pratiques ;
- L’accessibilité ;
- le SEO.
Bien plus complet, il donnera beaucoup plus d’informations, et aidera également à optimiser le SEO de manière générale (balises HTML, liens, etc.).
Attention toutefois, les résultats donnés par Google Lighthouse peuvent être influencés par votre session navigateur (les extensions Chrome installées, par exemple). Il est donc recommandé d’exécuter le diagnostic en utilisant une navigation privée.
Les 8 conseils pour améliorer le temps de chargement
Si ces outils permettent de connaître exactement ce qui pose problème lors du chargement d’un site web, il y a des règles universelles, valables et applicables sur toute page web, qui sont à mettre en place quoi qu’il arrive. Voyons les 8 principales.
Bien choisir son hébergeur
L’hébergeur a évidemment une importance capitale dans le temps chargement d’un site web. C’est en effet lui qui stocke les sources qui vont être renvoyées au navigateur de l’utilisateur.
Et il ne suffit pas de choisir l’hébergeur adéquat, mais aussi de prendre la bonne formule, et de paramétrer l’hébergement pour faire en sorte que le site web réponde rapidement.
Minifier et compresser les fichiers : images, CSS et JavaScript
Ce qui prend le plus de temps lors du chargement d’un site, c’est le téléchargement de ses sources, notamment les images, le CSS et le JavaScript.
Pour améliorer cela, il faut compresser les images, voire changer leur format (passer de .jpeg ou .png à .webp, par exemple), tout en faisant en sorte qu’elles s’affichent toujours bien.
Concernant le code chargé, que cela soit du CSS ou du JavaScript, il faut le minifier. La minification du code consiste à supprimer ou remplacer tout ce qui prend de la place inutile dans un fichier de code : commentaires, espaces, saut de lignes, etc.
Si vous voulez en savoir plus, nous avons écrit un article complet sur la minification du code.
Minimiser les requêtes HTTP
Une autre bonne pratique consiste à minimiser les requêtes HTTP. Car même si vos fichiers sont minifiés, les requêtes, qui vont en faire la demande et les récupérer sur le navigateur, sont gourmandes en temps.
Ce qu’il faut faire ici, c’est fusionner les fichiers, et notamment ceux minifiés : le CSS et JavaScript. Il vaut mieux charger 1 fichier de 100ko, que 10 fichiers de 10ko ; chaque requête prenant un certain temps incompressible .
Éviter les imports de ressources inutiles
Lorsque l’on a un site web, notamment créé via un CMS (tel que WordPress, PrestaShop ou WooCommerce), il arrive que certaines ressources inutiles soient importées. Ces ressources peuvent être des fichiers CSS ou JavaScript qui n’ont aucun effet sur la page affichée, mais aussi des plugins installés, chargés, mais qui ne servent pas ou plus.
Il est important, et notamment en utilisant les outils cités plus haut, de repérer ces ressources, et de les supprimer.
Mettre en place un chargement asynchrone
Concernant les ressources qui doivent obligatoirement être incluses, il peut être intéressant de mettre en place un chargement asynchrone. On parle alors de chargement différé, ou lazy loading.
Il est souvent possible de le faire avec des images, qu’on chargerait alors seulement lorsqu’elles deviennent visibles à l’écran (via le scroll). Cela évite de charger toutes les images d’un coup.
Mettre en place un cache
Le cache est une composante importante lorsque l’on parle de vitesse de chargement. La mise en place d’un cache empêche le re-téléchargement de tous les fichiers lorsqu’un utilisateur retourne sur un site déjà visité. Certains fichiers sont stockés en local sur le navigateur de l’utilisateur, et n’auront pas besoin d’être téléchargés. Le temps de chargement du site en sera ainsi amélioré lors des visites suivantes.
Utiliser les CDN
Utiliser un CDN (Content Delivery Network) est un très bon moyen d’améliorer la vélocité d’un site web. Les CDN permettent de stocker des copies d’un site web, en cache, sur de nombreux serveurs partout dans le monde.
Cela permet non seulement un chargement rapide – via le cache, mais aussi une distribution plus rapide. En effet, si votre site est hébergé en France mais qu’un utilisateur veut y accéder depuis le Canada, le temps de réponse sera plus court si une copie de votre page web est stockée en cache en Amérique du Nord, via un CDN.
Optimiser le site pour le mobile
De plus en plus d’utilisateurs naviguent sur le web depuis leurs smartphones. Et, bien qu’ils soient de plus en plus puissants et rapides, notamment avec la 5G, il faut adapter le site web à ce type d’internaute.
La première étape ici consiste à utiliser le RWD (Responsive Web Design) pour avoir un site qui s’affiche bien sur un mobile (cela est pris en compte par Google lors du référencement).
Mais il faut également passer du temps à optimiser l’interface, les scripts (HTML, CSS et JavaScript) et images, pour du mobile. Un smartphone n’aura peut-être pas besoin d’afficher certaines images, ou de les afficher dans une taille réduite (et donc plus rapides à charger). De même, ce n’est pas la peine d’inclure les fichiers CSS propres à l’affichage desktop lorsque l’on est sur une interface mobile.
Conclusion
Comme nous l’avons vu, la vitesse de chargement d’un site est très importante, aussi bien pour un utilisateur que pour les moteurs de recherches. De plus, la non optimisation d’un site peut avoir des conséquences, financières notamment, en cas de plateforme e-commerce.
Heureusement, il existe des outils pour savoir ce qu’il est possible d’améliorer sur un site, et des conseils qui sont applicables dans tous les cas.
Et vous, avez-vous déjà eu à travailler sur l’optimisation du chargement d’un site web ? Avez-vous d’autres conseils à donner pour optimiser le temps de chargement d’une page web ? Dites-nous tout en commentaire !
