Comment optimiser la vitesse de chargement de son site ?
La vitesse de chargement de votre site n’est pas un sujet à prendre à la légère, surtout si vous avez beaucoup de contenu.
C’est un point qui suscite beaucoup d’interrogations sur le groupe Facebook de la communauté des élèves LiveMentor.
Après avoir réalisé l’installation de WordPress ainsi que sa configuration, vous pouvez commencer à vous intéresser à la vitesse de chargement qui est essentielle !
Dans ce guide, je vais vous expliquer étape par étape, comment améliorer le temps de chargement d’un site WordPress.
Le vitesse de chargement d’un site ou d’un blog a un important impact sur:
1. L’expérience utilisateur
Quand je parle de temps de chargement, je ne parle pas de minutes, mais bien de secondes. Il faut optimiser la rapidité d’affichage de son contenu à la seconde prêt !
Il nous est tous arrivé de zapper une page Web qui mettait trop de temps à charger..
2 secondes : c’est cool !
3 secondes : c’est correct, je reste
4 secondes : ça commence à devenir pénible..
5 secondes : aller, je vais voir ailleurs !
2. Votre classement dans les résultats de recherche Google (SEO)
C’est quelque chose dont on se doute moins, mais qui a une importance capitale dans une stratégie SEO ! Google prend en compte le temps de chargement de votre site dans son algorithme de classement et met en avant les sites les plus rapides dans les résultats de recherche.
Heureusement, il existe des techniques et des outils vraiment pratiques pour améliorer la vitesse de chargement de son site sans compétences techniques.
C’est ce que je vais vous partager dans cet article !
I. Optimiser le poids des images pour améliorer la vitesse de chargement de son site
II. Mettre ses fichiers en cache pour réduire le temps de chargement de son site
III. Google AMP pour accélérer l’affichage de ses articles sur smartphones
IV. Tester la vitesse de chargement de son site
I/ Optimiser les images améliore la vitesse de chargement de son site !
C’est le nerf de la guerre quand on parle de vitesse de chargement ! Heureusement, vous pouvez réduire la taille de vos fichiers pour améliorer les performances de votre site.
Ça peut paraître simple dit comme ça, mais de nombreux entrepreneurs rencontrent souvent le même problème lorsqu’ils optimisent leurs images : une qualité dégradée suite aux modifications.
Cela représente un risque qui peut faire fuir les internautes de votre site !
Les deux principaux éléments à prendre en compte sont le type de format et le type de compression de l’image. En choisissant la bonne combinaison, vous pouvez réduire jusqu’à 5 fois la taille de votre image !
1. Choisir le bon format
Avant de commencer à optimiser le poids de vos images, assurez-vous d’avoir choisi le meilleur type de ficher. Il existe plusieurs formats que vous pouvez utiliser :
- JPEG : C’est le type de fichier le plus utilisé pour les pages web et les newsletters. Lorsque vous avez des images qui contiennent beaucoup de couleurs, il faut utiliser ce format.
- PNG : Ce format produit des images de meilleure qualité, mais a également une plus grande taille de fichier. Le PNG peut engendrer de grosses pertes de qualité suite à une compression. Il faut donc l’utiliser pour les images simples, pas trop colorées (type logo).
- GIF : C’est le meilleur choix pour les images animées. Il utilise uniquement la compression sans perte.
Idéalement, vos images en PNG doivent être en dessous de 100 KB ou moins et les images en JPEG en dessous de 200 KB ou moins pour de meilleures performances.
Il existe d’autres types de fichier tels que le JPEG XR ou le WebP, mais je ne vous conseille pas de les utiliser, car ils ne sont pas universellement pris en charge par tous les moteurs de recherche.
2. Optimiser la taille de ses fichiers images
La subtilité de cet exercice est de trouver le juste-équilibre entre un faible poids de ficher et un niveau acceptable.
C’est un élément essentiel pour améliorer la vitesse de chargement de son site.
Voici une photo d’un chat mignon après optimisation.
La photo reste très nette, malgré la compression qu’elle a reçue (11KB face à 300KB). Et votre vitesse de chargement ainsi que votre SEO vous en remercieront.
Idéalement, une page ne doit pas dépasser les 2MB. Si on conserve la première photo, on a déjà atteint plus d’un quart du poids toléré d’une page, ce qui peut pénaliser votre référencement naturel !
La deuxième image a un niveau de compression bien plus important. La taille du fichier est faible, mais la qualité fait mal aux yeux..
Ce qu’il faut donc faire, c’est trouver un juste-milieu entre ces deux niveaux de compression.
Maintenant, voyons comment faire pour optimiser le poids de ses images !
Il existe de nombreux outils SEO, à la fois gratuits ou payants, que vous pouvez utiliser pour optimiser vos images. Certains vous donnent les outils pour effectuer vos propres optimisations et d’autres font le travail pour vous.
Nombreux sont les élèves à la recherche du bon outil !
Personnellement, j’aime beaucoup Affinity Photo, car il est peu coûteux et offre des fonctionnalités presque identiques à celles d’Adobe Photoshop.
François-Xavier, Product Designer chez LiveMentor apprécie particulièrement ImageOptim, qu’il utilise quotidiennement pour son activité.
Enfin, nous pourrons également citer l’excellent Kraken.
Voici quelques outils supplémentaires que vous pouvez checker :
– JPEG Mini (JPEG)
– FileOptimizer (JPEG)
– OptiPNG (PNG)
– GIGsicle (GIF)
Pour les articles du blog de LiveMentor, nous utilisons Imagify. Il s’agit d’un plugin WordPress qui bénéficie de trois niveau de compression : Normal, Agressif et Ultra.
Cet outil optimise automatiquement vos images grâce à sa fonction d’optimisation globale.
Si vous n’êtes pas satisfait de la qualité, vous pouvez restaurer et re-compresser vos images en un clic, à un niveau qui convient mieux à vos besoins.
Vous pouvez le faire directement depuis la page où vous rédigez votre article sur WordPress. Lorsque vous insérez votre image, cela se trouve juste en dessous des paramètres de description de l’image.
La version gratuite de ce plugin est limitée à un quota de 25 Mo d’images (environ 250 images) par mois. Si vous créez beaucoup de contenu, il faudra passer sur une version payante.
Chez LiveMentor, nous avons opté pour la version Basic avec 2Gb de données par mois.
Il existe également d’autres plugin WordPress pour optimiser vos images. Parmi ceux qui fonctionnent bien, nous avons :
– WP Smush (plugin WordPress)
– Optimus Image Optimizer (plugin WordPress)
– ShortPixel Image Optimizer
Installer une extension WordPress n’a rien de compliqué. Il vous suffit de cliquer sur « extensions » dans la colonne de gauche, puis sur « ajouter ».
Une fois que cela est fait, vous pouvez rechercher le plugin de votre choix, directement dans la barre de recherche sur votre WordPress.
II/ Mettre ses fichiers en cache pour réduire le temps de chargement de son site
Utiliser une mise en cache réduira considérablement le temps de chargement de votre site. Sans cela, il sera ralenti par le nombre de requêtes lancées simultanément.
Pour mettre vos fichiers en cache, il existe un formidable plugin sur WordPress nommé WP Rocket. Il est reconnu comme étant le plugin de cache le plus complet. Son coût est seulement de 49 dollars par an (valable pour un seul site).
Ce qui caractérise cet outil, c’est bien sa simplicité d’utilisation. En fait, vous n’avez pas besoin d’activer des options pour que le plugin fonctionne. Installez-le, activez-le, et le tour est joué, WP Rocket fera le travail à votre place !
WP Rocket travaille automatiquement sur votre site. Il active immédiatement les options qui sont le plus adaptées à votre site. Il applique 80% des bonnes pratiques de performances web.
L’activation des autres options n’est pas obligatoire, il s’agit de bonus. Cependant, si vous souhaitez bidouiller un peu et activer ces autres options, il vous faudra être très vigilant car cela peut casser temporairement votre site web.
D’après les membres de la team WP Rocket, “si vous remarquez des problèmes après l’activation de l’une de ces options, désactivez-la d’abord, puis résolvez le problème”.
Certaines options fonctionneront parfaitement pour un site, mais pas forcément pour le vôtre.
Parmi ces options, il y en a principalement 3 qui impactent positivement la vitesse de chargement de votre site.
1. La possibilité de compresser ses fichiers
Cet outil réduit le poids des fichiers HTML, JavaScript et CSS. Ces éléments seront plus rapides à charger, car ils seront bien plus légers. Si cela n’est pas préalablement activé, nous vous conseillons de le faire.
La démarche est simple. Il faut cliquer sur la colonne « Optimisation des fichiers » et cocher « Minifier » pour le HTML, le CSS et le Javascript.
Cela améliore fortement votre score de performance, mais il faut agir avec prudence dans cette section en vérifiant l’affichage du contenu de votre site, instantanément après avoir coché ces options.
2. La possibilité de ne pas charger directement toutes ses images
Seules les images visibles sur une page seront chargées. Celles qui ne sont pas visibles apparaîtront au gré de la navigation (comme sur Facebook).
Cela améliore le temps de chargement réel et perçu, car les images et les vidéos ne seront chargées que lorsqu’elles entreront (ou sur le point d’entrer) dans l’espace consulté par l’utilisateur.
La plupart des sites web utilisent cette techniques pour améliorer leur temps de chargement. Cela s’appelle le « LazyLoad » sur WP Rocket.
3. Le pré-chargement du cache pour améliorer la vitesse de chargement de son site
Avec WP Rocket, il est possible de simuler une visite pour pré-charger le cache.
Cette pratique rend votre site plus rapide en quelques clics et améliorer l’indexation de votre site par les moteurs de recherche.
La mise en cache est indispensable pour optimiser le SEO de son site.
Pour rappel, tous ces éléments techniques concernant le temps de chargement d’un site WordPress ne sont disponibles uniquement sur une version WordPress.org.
III/ Google AMP pour accélérer l’affichage de ses articles sur smartphones
L’AMP (Accelerated Mobile Page) proposé par Google est un format de pages mobiles destiné à accélérer considérablement l’affichage des articles sur smartphones.
Cette extension est gratuite et très simple à mettre en place. Il suffit de l’installer via WordPress, comme nous l’avons vu plus haut.
Ça y’est, vos articles sont au format AMP !
En utilisant le Google AMP, vous êtes en adéquation avec les exigence de l’algorithme de Google et vous serez donc mieux positionné dans les résultats de recherche.
Petit détail : cette fonctionnalité fonctionne uniquement avec les articles. Le Google AMP ne s’applique pas pour les pages de votre site / blog.
Dernier point, pensez à bien supprimer toutes les extensions WordPress que vous n’utilisez pas ou plus.
Certaines sont gourmandes en ressources et peuvent donc ralentir fortement le temps de chargement de votre site. Si vous n’en avez pas l’utilité, supprimez ces extensions inutiles !
Veillez aussi à bien garder à jour, les extensions que vous utilisez.
PS : le choix de son hébergement sur WordPress a un impact sur le temps de chargement de son site. Certain seront plus rapide que d’autres. Je recommande OVH si vous êtes accro à la vitesse de chargement 🙂
IV/ Tester la vitesse de chargement de son site
Sachez qu’il existe des outils pour tester la vitesse de chargement de votre site et ainsi, voir les progrès que vous faites.
Grâce à ces outils, il est possible de connaître les points à améliorer pour bénéficier d’un meilleur temps de chargement.
Les outils favoris d’Edouard, notre spécialiste WordPress sont les suivants :
Comme vous avez pu le voir, il est possible d’améliorer la vitesse de chargement de son site avec des petites techniques, sans pour autant être un pro du codage informatique !
En commentaire de cet article, je vous propose de :
-
-
- Tester la vitesse de chargement de votre site avec GT Metrix.
- M’indiquer si vous parvenez à améliorer votre score de départ grâce à ces astuces.
-
J’ai hâte de lire vos commentaires et de vous aider sur ce sujet capital pour votre référencement naturel ! ?
Si vous avez envie d’aller plus loin et d’avoir le regard d’un expert sur la performance de votre site, nous avons mis en place une formation SEO avancée made in LiveMentor.
Commentaires