Retour en haut

Dernière mise à jour : 23 mars 2022

Optimiser la vitesse de chargement de votre site web est essentiel pour améliorer l'expérience des utilisateurs et améliorer le classement de votre site dans les moteurs de recherche. Les internautes sont de plus en plus impatients et attendent des charges rapides et fluides lorsqu'ils visitent un site web. Si votre site prend trop de temps à charger, ils partiront et choisiront de visiter un autre site. De plus, les moteurs de recherche favorisent les sites qui chargent rapidement et ceux qui prennent plus de temps sont pénalisés. Par conséquent, en optimisant la vitesse de chargement de votre site web, vous améliorez l'expérience des utilisateurs et augmentez le classement de votre site dans les résultats de recherche.
La première raison d'un chargement de page trop long est le poids de la page et de ses éléments. Plus vous chargez des ressources sur une page, plus elle mettra du temps à charger. Il serait contre-productif pour le SEO de réduire les textes ou d'enlever des images mais il existe des solutions simples.

Les images

Lazyloading images

Les images représentent en moyenne plus de 60% du poids d'une page web. C'est pour cela qu'il faut y prêter une attention particulière.
Il est inutile par exemple d'utiliser des images plus grandes que ce dont on a besoin pour l'affichage. Il est donc judicieux de les redimensionner.
De plus, pour éviter un poids trop important, il faut utiliser le bon format d'image.

Quelle extension utiliser pour ses images ?
  • GIF pour les images animées,
  • PNG pour les images contenant des textes ou des éléments transparents,
  • SVG pour les images qui doivent être de bonne qualité,
  • JPEG pour toutes les autres.

Vous pouvez d'ailleurs facilement modifier le format d'une image le web.

Enfin, vous pouvez retarder le chargement des images qui ne sont pas visibles immédiatement par l'utilisateur sans qu'il fasse défiler la page. Pour cela, vous pouvez utiliser le lazyloading. La balise loading="lazy" n'est pas encore pris en charge par tous les navigateurs mais cela ne saurait tarder. Il existe cependant d'autres solutions en Javascript.

Ces règles sont valables pour toutes les images de votre page web même la favicon. En effet, celle-ci doit être la plus légère possible. Le mieux étant qu'elle soit inférieure à 10ko.

Les scripts JS

Javascript

Les scripts JS peuvent considérablement ralentir le chargement d'une page. C'est pour cela qu'il est important de :

  • Placer les scripts en fin de page, le mieux étant avant la fermeture du body.
  • Séparer les scripts importants pour le chargement de la page des autres.
  • Garder le fichier de tout ce qui doit être chargé le plus tôt possible le plus petit possible et différer le chargement des autres scripts.
  • Afin de réduire le temps de chargement, vous pouvez les minifier.
  • Eviter de charger plusieurs fois le même script. Cela peut arriver si vous utilisez des widgets par exemple.

Le CSS

Réduire CSS

Tout d'abord, il vaut mieux totalement éviter le CSS dans le code et préférer un fichier séparé. Pour l'import du fichier, il vaut mieux préférer la balise link plutôt que les @import. En effet, cela pourrait ralentir l'affichage de la page car les navigateurs ne peuvent pas les télécharger en parallèle.
Il est aussi important de nettoyer votre CSS en supprimant tout ce qui est inutile.
Et il peut être bien, si le fichier est trop important, de le minifier.

De même, s'il y a une partie du CSS qui n'est utilisé que sur une partie des pages, il serait dommage de la charger pour rien sur toutes les autres.

Les Cookies

Cookies

N'utilisez pas trop de cookies ou des cookies trop longs.
En effet, les cookies sont envoyés au serveurs à chaque chargement de la page afin de personnaliser l'expérience des utilisateurs. Ils ont un impact sur le temps de chargement et plus vous en mettez, plus cela ralenti le chargement.
Dans l'idéal, il faudrait qu'aucun cookie ne dépasse les 100ko.

La Mise en cache

Autoriser la mise en cache

En général, tous les scripts de plus 1500 caractères devraient être dans des fichiers distincts. Il est préférable de permettre la mise en cache, surtout pour les fichiers importants et ceux qui sont récurrents sur toutes les pages (le logo par exemple), afin de réduire le temps de chargement.
Pensez cependant à vider le cache lorsque vous faites des modifications importantes sur votre site. Sinon, vous ne pourrez pas les voir.

Les En-têtes HTTP

Headers

En spécifiant le jeu de caractères utilisé dans l'en-tête HTTP Content-Type, vous permettez au navigateur d'analyser immédiatement la page.
Lorsque le navigateur reçoit des octets, il doit identifier la collection de lettres et de symboles qui ont été utilisés pour écrire le texte qui a été converti en ces octets, ainsi que le codage utilisé pour cette conversion, afin de l’inverser.
Si aucune information de ce type n’a été transmise, le navigateur tentera de trouver des motifs reconnaissables dans les octets pour déterminer l’encodage lui-même, et éventuellement essayer certains jeux de caractères courants, ce qui prendra du temps, retardant le traitement ultérieur de la page.

En règle générale

Les fichiers trop lourds sont à proscrire sur une page web. Assurez vous que tous les éléments du fichier sont nécessaires au chargement de la page, vérifiez que toutes les ressources sont accesibles et supprimez toutes les ressources inutilisées.
Voici 2 sites qui vous permettront de tester la vitesse de chargement de vos pages :

Pagespeed Insights

Pagespeed Insights

Cette page vous donnera un résultat sous forme de score sur 100 avec de nombreuses explications point par point des défauts.

Tester mon site

Dareboost

Dareboost

Avec un compte gratuit avec possibilité de faire jusqu'à 5 analyses de votre site, les résultats seront très détaillés et vous aurez la possibilité de télécharger le rapport en PDF.

Tester mon site

Il existe d'autres solutions naturellement mais ce sont celles recommandée par Google. Si cela ne suffit pas, je vous conseillerais dans ces cas-là de vous adresser à un professionnel qui pourra vous aider.

Vous avez aimé cet article ? N'hésitez pas à le partager.

Commentaires

Pas de commentaire pour le moment.

Que pensez-vous de cet article ?

Articles connexes

Derniers articles