3 astuces pour accélérer le temps de chargement d’une page web

vitesse chargement page web
Un mobinaute sur deux quitte un site web qui charge en plus de trois secondes, selon une étude publiée par Google. Un site lent est désastreux en terme d’expérience utilisateur, mais pas seulement. Le temps de chargement des pages a également un impact sur le classement d’un site internet dans les résultats des moteurs de recherche. Découvrez trois solutions simples pour améliorer la vitesse de chargement d’un site internet intégré sous WordPress.

Pourquoi mon site rame-t-il ?

Quand un internaute se connecte une page web, il demande à un serveur distant de lui transférer du contenu : images, page HTML, polices de caractère, fichiers Javascript, etc. Ces composants sont ensuite assemblés par un navigateur qui permet d’afficher la page demandée. Le transfert et l’interprétation de ces données, suivant la qualité de la bande passante, peuvent prendre plus ou moins de temps. Il est donc important d’alléger au maximum ces fichiers pour réduire le temps de réponse du serveur.

Quelles conséquences pour mon SEO ?

La raison d’être des moteurs de recherche est de trouver des réponses. Ils classent donc les sites web en fonction de leur pertinence sur une question donnée, notamment en analysant la richesse de leur sémantique. Si la réponse tarde à venir, aussi juste soit-elle, c’est un mauvais point. En effet, tout ce qui perturbe l’affichage d’un site web dans les SERP, notamment sur smartphone, est un signe négatif envoyé aux moteurs de recherche.

Qu’est-ce que la bande passante ?

La bande passante désigne la quantité de données qu’un serveur web peut transmettre. Elle est mesurée en bits par seconde (bits/s). La majorité des sites internet sont hébergés sur des serveurs mutualisés – et non dédiés. La bande passante est plus limitée dans ce cas de figure, car elle est partagée par plusieurs utilisateurs. Un serveur sous-dimensionné peut provoquer des lenteurs, notamment si un grand nombres d’utilisateurs le sollicitent en même temps. Il est donc important de vérifier la quantité de bande passante allouée par votre hébergeur.

Cas concret de problème de vitesse de chargement

Une police peut ralentir l’affichage d’un site web. J’ai été confronté au problème en utilisant le thème WordPress Astra, pourtant réputé très rapide. Après analyse, il est apparu que la webfont astra.woff, intégrée dans le cœur du thème, ralentissait le chargement. Or, quand la requête d’un élément-clé peine à aboutir, les navigateurs attendent de longues secondes pour afficher le site internet. Or, c’est très agréable pour les utilisateurs. Pour résoudre le problème, j’ai dû précharger cette police en intégrant la balise <link « preload »> dans l’en-tête de mon site.
Ici, il est question d’une police de caractère, mais une image surdimensionnée, un fichier Javascript ou une feuille de style peut aussi provoquer des lenteurs.

Comment accélérer le mouvement ?

Voici plusieurs réflexes à adopter pour accélérer le temps de chargement de votre blog ou de votre boutique e-commerce sur WordPress :

1/Définissez des règles de cache efficaces

Réduire la charge du serveur est une bonne manière d’économiser de la bande passante. Pour y parvenir, il est conseillé de mettre en cache certaines ressources pour éviter qu’elles soient chargées à chaque consultation. Le cache est une mémoire située sur l’ordinateur de l’utilisateur. Elle permet de stocker temporairement les éléments les plus utilisés d’un programme ou d’un site internet.
En gros, lorsqu’un internaute se connecte pour la première fois à votre site, certaines ressources sont enregistrées pour une durée limitée par son navigateur. À chaque nouvelle visite, elles sont chargées localement, ce qui réduit le temps de réponse du serveur.
Pour activer la mise en cache sous WordPress, il est nécessaire de définir des règles dans le fichier .htaccess de votre site internet pour paramétrer combien de temps les ressources vont rester dans le navigateur de l’utilisateur.
Par exemple, pour mettre en cache des images, j’indique le type de fichier et la date d’expiration :

ExpiresByType image/jpg « access plus 2592000 seconds »

Cette technique fonctionne pour les fichiers Javascript, CSS, HTML, etc. Voici l’ensemble règles que j’ai définies pour mon site :

expire headers code source

2/ Utilisez des images au format .webp

Les images représentent environ 50 % du poids d’un site web. Il est donc important d’optimiser leur taille pour accélérer leur temps de chargement. Le premier réflexe est d’éviter de publier des visuels surdimensionnés, mais cela coule de source pour vous, j’en suis sûr 🙂 La seconde chose à faire est de diffuser vos images au format Webp. Créé en 2010 par Google, il permet de réduire de moitié le poids d’une image .jpeg ou .png, et donc d’accélérer le temps de réponse du serveur.
Pour optimiser vos images et les convertir au format Webp sous WordPress, il est nécessaire d’utiliser une extension. Vous pouvez utiliser Imagify, si vous le souhaitez. Ce plugin permet de compresser l’ensemble les images déjà publiées sur un site internet et de gagner de précieuses secondes au chargement. Pour cela, il suffit de créer un compte, afin d’obtenir une clé API. Différents niveaux d’optimisation sont disponibles : normal, agressif et ultra. Attention toutefois, cette extension devient payante si vous avez un grand nombre d’images.

3/ Optimiser votre code source

WordPress est un système de gestion de contenu qui permet de créer un blog ou un site e-commerce assez facilement grâce à la richesse de ses extensions. Ces programmes permettent d’ajouter de nombreuses fonctionnalités (systèmes de paiements en ligne, galeries, formulaires de contact, etc.). Mais ces plugins ont un inconvénient. Ils utilisent des scripts qui consomment de la bande passante pour fonctionner. Pour limiter leur impact, il est important de les utiliser avec parcimonie. Ensuite, il est conseiller d’optimiser leur poids. Pour cela, il existe une solution freemium : Autoptimize.
Cette extension – indispensable – permet de réduire très rapidement et sans connaissances le nombre de lignes des fichiers HTML, CSS, Javascript en supprimant les espaces inutiles. Cette concaténation accélère le transfert de ces ressources.

Conclusion

Optimiser la vitesse d’un site web est indispensable pour bien figurer dans les résultats des principaux moteurs de recherches. Il existe des différentes solutions pour y parvenir, et ce post ne prétend pas être exhaustif sur la question. Néanmoins, ces astuces devraient vous permettre d’améliorer sensiblement le temps de chargement de votre site web et l’expérience utilisateur de vos visiteurs.

Laissez un commentaire