5 outils pour améliorer la vitesse de chargement de votre site web ou blog

Le temps de chargement d’un site web ou blog est aussi important que son design ou son contenu. En effet, cela a un impact sur le référencement Google, mais aussi sur l’appréciation des visiteurs. Je vous propose donc 5 outils/étapes pour améliorer la vitesse de chargement de votre site web / blog.

Suite au changement de thème WordPress sur ce blog en août 2015, j’ai remarqué qu’il est devenu d’un coup très lent à charger. Le nouveau thème étant beaucoup plus graphique, je me doutais bien que les images y étaient pour quelque chose.  Voici les étapes et les outils que j’ai utilisé pour améliorer les choses.

Analyser avec Pingdom Tools

Pingdom Tools est un outil pour mesurer les performances d’un site web. Pour cela, il suffit de saisir l’url de votre site, de sélectionner une localisation du serveur de test et de lancer l’analyse.

En France, le serveur recommandé se situe en Suède.

On obtient en résultat des informations sur la page testée tels que le temps de chargement, le poids de la page chargée, le nombre de requêtes demandées par la page au serveur pour se charger.

Plus bas, un détail permet de voir en détail les éléments du site qui sont les plus lourds et impactent le temps de chargement. Dans mon cas, le doute a été levé puisque les photos représentaient près de 50% du poids de la page chargée. La prochaine étape sera donc de les optimiser.

Pour en savoir plus, je vous invite à lire cet article détaillé sur Pingdom Tools.

Compresser les images avec WpSmush

WpSmush est un plugin gratuit (avec une version payante) pour Worpress qui permet de compresser les images téléversées sur WordPress. Il est possible de les compresser au moment de leur ajout ou par la suite via le bouton « bulk smush » .

La limite de la version gratuite concerne les images de plus de 1Mo qui ne sont pas traitées.

Si vous utilisez un thème avec beaucoup de visuels , je vous recommande de ne pas dépasser 100ko en poids par image. Il faut aussi bien configurer les tailles des miniatures dans « Réglages > Médias ».

Si vous n’utilisez pas Wordpress, d’autres services d’optimisation d’images existent telles que Imagify. Je vous en dirai quand je l’aurai essayé, mais je suis preneur de vos avis.

Compresser les scripts et feuilles de styles avec Autoptimize

La plupart des thèmes utilisent des scripts pour ajouter des fonctionnalités et des fichiers de styles pour personnaliser le rendu graphique du site. A cela s’ajoute encore les scripts et les feuilles de styles des plugins ajoutés. Le chargement de tous ces fichiers ralentit le chargement de la page web.

Le plugin Autoptimize permet de compresser tous ces fichiers en 2 ou 3 fichiers qui sont certes plus lourds, mais se chargent une fois.

C’est comme lors d’une copie sur Windows : 1024 fichiers de 1ko se copient plus lentement que 1 fichier de 1 Mo.

Il suffit pour cela de cocher dans le panneau de gestion ce qu’on souhaite compresser (CSS, JS, et même le contenu HTML). Les fichiers compressés sont mis en cache afin d’être directement utilisés lors du chargement du site web.

Mettre en place le cache avec WP SuperCache

Un cache permet de créer des fichiers statiques de votre site qui seront envoyés aux internautes qui le consultent. Cela évite donc au serveur d’envoyer chaque élément du site (textes, images, fichiers) depuis la base de données. Ainsi, une page web uniquement en html déjà toute prête est envoyée à l’internaute.

Il est possible depuis l’interface de définir une fréquence de génération du cache. Cela vous permet de toujours proposer une version à jour de son site. Cette fréquence est donc à adapter à votre rythme de publication.

Pour configurer ce plugin, j’ai suivi les recommandations de ce tutoriel complet WP Super Cache.

Tester à nouveau avec PageSpeed Insights de Google

Une fois les premières modifications faites, ce second outil d’analyse vous permet d’identifier d’autres pistes d’optimisations sur des fichiers précis. Ainsi, l’outil PageSpeed Insights teste la vitesse de votre site sur ordinateur et sur mobile. Vous retrouvez les principales catégories qui ralentissent le site (images / mise en cache) avec une liste précise des fichiers qui posent problème. A chaque catégorie, un lien vers une page d’aide vous aide à approfondir le problème pour y trouver une solution.

Avec ces outils et en suivant les différentes étapes, vous serez en mesure d’améliorer la vitesse de chargement de votre site web ou de votre blog.

Retrouvez d’autres outils pratiques et astuces dans la section Outils pour améliorer votre productivité ou simplifier votre vie numérique.