Aujourd’hui on aime que tout aille plus vite que la musique, y compris un site web.
Vous vous en doutez, le temps de chargement influe directement sur la qualité de l’expérience utilisateur. Avec un site lent vous risque de faire chou blanc. Saviez-vous que plus de la moitié des visiteurs quittent le site web si la page met plus de 3 secondes à charger ? Plutôt court, mais véridique.
En tant que Consultante SEO, je vous propose 6 conseils aux petits oignons à mettre en place pour améliorer le temps de chargement de votre site web !
Plugins et widgets : une pincée seulement
Toutes ces propositions d’extensions sur les hébergeurs sont bien tentantes et parfois très utiles, mais c’est comme les chocolats gare à ne pas en abuser. Elles prennent généralement beaucoup de place dans le code, et ralentissent ainsi le chargement de vos pages.
Certains plugins restent intéressants pour votre site web, même s’ils peuvent être assez lourds et impacter directement la performance de votre page. Coupez la poire en deux et tentez de garder uniquement le nécessaire, en réfléchissant à ceux que vous pourriez enlever.
Compresser les fichiers pour un peu de légèreté
Plus les images d’une page web seront lourdes, plus la page entière mettra du temps à charger. En clair, votre site va pédaler dans la choucroute… Optimisez vos images en choisissant le format adéquat : .png ou .jpeg.
Le format .png présente des qualités graphiques plus évoluées pour ajouter des effets par exemple, mais la qualité se détériore rapidement avec la compression. C’est le format à choisir pour des images travaillées et plus graphiques : logo, icônes, texte ou illustrations entre autres.
Le format .jpeg est le plus connu. Avec un très bon rendu, il peut être lu par tous les navigateurs : à choisir pour des images de haute qualité.
Mettez la main à la pâte : redimensionner et compresser vos images. Cependant, il est déconseillé de les compresser au-delà de 60-70 % au risque de perdre en qualité. Pour les fichiers lourds tels que les vidéos, utilisez des plateformes de stockage externe – hébergez par exemple vos vidéos sur YouTube.
Minifier le code mais sans en perdre une miette
Le code joue également un rôle important dans le temps de chargement du site, que ce soit en HTML, en CSS ou en JavaScript. Votre but est alors de réduire le plus possible le poids de votre code source, en serrant les éléments de votre code comme des sardines ! Ce procédé, qu’on appelle minification ou compression du code source, ne change pas le format du fichier.
La minification supprime tout ce qui n’est pas nécessaire au fonctionnement du code : sauts de ligne, commentaires, espaces, séparateurs… Tous ces éléments sont présents, car ils permettent aux développeurs de relire et bien comprendre le code.
Ne le faites pas à la main ! Utilisez un logiciel en ligne qui vous le fera en deux coups de cuillère à pot.
Dans le cas où vous auriez besoin de relire votre code et d’y voir plus clair, vous pouvez utiliser un formateur de code source, ou source code beautifier, pour y remettre de l’ordre.
Réduire le nombre de requêtes HTTP
Lorsqu’un internaute envoie une requête au serveur web par le biais d’un navigateur, il reçoit immédiatement une réponse de ce serveur et la page demandée s’affiche. Le navigateur envoie une demande HTTP pour chaque fichier du site web : le téléchargement sera très rapide si le site web contient peu de fichiers, cependant la plupart des sites ont beaucoup de fichiers.
Vous pouvez utiliser des outils tels que Chrome DevTools pour voir le contenu de votre page, et déterminer les éléments qui mettent du temps à charger. Vous saurez ainsi combien de requêtes sont exigées par votre site web, et déciderez de garder ou non certaines ressources. Supprimez les fichiers lourds et longs à charger, que vous jugez inutiles ou qui comptent pour du flan.
Votre site web évolue avec le temps. Lorsqu’il commence à prendre de la bouteille, il faut veiller à garder une structure ordonnée : des pages peuvent devenir obsolètes, ou l’interface utilisateur change. Les redirections s’accumulent et des chaînes de redirection se créent. Plus votre site redirige des liens, plus le visiteur doit attendre avant d’atteindre la page voulue. Si vous devez mettre en place des redirections, évitez alors de rediriger vos pages vers d’autres URL qui présentent déjà une redirection.
Pensez aussi à la mise en cache : le principe est de « stocker » un contenu pour éviter de recharger les fichiers chaque fois qu’un navigateur envoie une requête au serveur.
Trier et gérer les ressources bloquantes
Les ressources sont des fichiers nécessaires à l’affichage de vos pages : les fichiers CSS pour la mise en forme ou les fichiers JS pour les interactions, entre autres. Elles doivent être entièrement chargées avant d’obtenir le 1er rendu de la page.
Le problème, c’est qu’elles peuvent ralentir le chargement de votre page selon leur position dans le code HTML. C’est pourquoi vous devez y mettre votre grain de sel.
Ce code HTML est lu par les navigateurs de haut en bas. Exemple : si un script JavaScript est situé en début de page, le navigateur bloquera sur le chargement de ce script et le reste du contenu ne s’affichera pas.
Idéalement, vous pouvez les placer en bas de page, ou différé leur chargement avec l’attribut « defer » : cet attribut HTML permettra de modifier les balises et de différer son exécution à la fin du chargement.
Vous l’aurez compris, le temps de chargement ne compte pas pour des prunes dans le domaine du SEO. Ne perdez plus vos visiteurs à cause de quelques secondes de trop. Appliquez ces conseils dès maintenant et votre site sera comme un coq en pâte !