Blog LiveMentor
améliorer la vitesse de chargement de son site pour le seo

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.

vitesse de chargement communauté livementor

Le temps 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 ! 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 et donc optimiser son référencement naturel.

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 le poids des images pour améliorer 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

La subtilité de cet exercice est de trouver le juste-équilibre entre un faible poids de ficher et un niveau acceptable.

Voici ci-dessous, un exemple de ce qui arrive si vous compressez trop une image.

Version originale, légèrement compressée :

Photo originale : 622 KB
faible niveau de compression : 622 KB

Version trop compressée :

photo de chat trop compressé
Niveau important de compression : 38 KB

La version originale possède une bien meilleure qualité, mais la taille du fichier est bien plus importante.

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 pénalise 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.

Nous avons donc repris l’image originale avec un taux de compression moyen.

Voici le résultat :

photo de chat après optimisation pour améliorer la vitesse de chargement
Niveau de compression optimal : 96 KB

Comme vous pouvez le constater, la qualité est meilleure que la deuxième version et la taille du fichier est bien plus basse que la première version. L’équilibre est juste et cette belle photo de chat n’est pas dégradée !

Pour cette version finale, nous avons atteint 96 KB ce qui est très bien. La taille du fichier est presque 6 fois plus petite que l’original !

Maintenant, voyons comment faire pour optimiser le poids de ses images !

Il existe de nombreux outils, à 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 !

outil pour optimiser les images communauté livementor

Personnellement, j’aime beaucoup Affinity Photocar 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é.

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.

optimiser ses images sur imagify depuis wordpress

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.

tarifs imagify pour améliorer la vitesse de chargement de son site

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 un plugin sur WordPress n’a rien de compliqué. Il vous suffit de cliquer sur « extensions » dans la colonne de gauche, puis sur « ajouter ».

installer une extension sur WordPress

Une fois que cela est fait, vous pouvez rechercher le plugin de votre choix, directement dans la barre de recherche sur votre WordPress.

télécharger une extension depuis 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 33 euros 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.

minimiser ses fichiers sur WordPress avec WP Rocket

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.

optimisation des images sur WP Rocket
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

Avec WP Rocket, il est possible de simuler une visite pour pré-charger le cache.

option de préchargement du cache sur WP Rocket

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 améliorer votre SEO

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.

plugin amp sur word press vitesse de chargement
Ç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.

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 :

optimiser vitesse de chargement de son site

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 ! ?

Si votre contenu répond aux enjeux de lecture rapide, il sera favorisé dans les résultats des moteurs de recherche.

En commentaire de cet article, je vous propose de :

      1. Tester la vitesse de chargement de votre site avec GT Metrix.
      2. 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 WordPress avancée qui peut être financée à 100% par les organismes de formation !

Vous avez trouvé une faute d’orthographe dans cet article ? Vous pouvez nous en faire part en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée .

Avatar

Thomas Meyer

  • Je témoigne pour mon site inspirationsenpulpe.com. Avant optimisation il était à 5.31 sec. J’ai installé Imagify et AMP, optimisé les 2 première pages de ma bibliothèque de médias existante et je suis passée à 4.3 sec. Après 4 pages de médias je suis désormais à 4 sec…. MERCIIIIIII ! Je continue à optimiser toutes les médias existants.

  • Testé sur mon dernier article, je suis à 2.8 B/D. Pour l’image, je le fais en général en mode hardcore en modifiant le nombre de pixels via l’outil de visualisation du mac…

    Sinon, le truc qui a amélioré ma perf il y a quelques mois, c’est de supprimer Disqus pour le remplacer par le module de commentaires de base. Avec Disqus, mon temps de chargement était de 9, je suis descendu à 3 !

  • j’avais déjà Imagify. mais je suis quand même passée de 6.8 sec à 4.5 pour mon site de cours de pastels. j’ai un point rouge qui est « différer l’analyse de javascript.. ???
    et sur le site de ma fille, je suis passée de 6sec à 4,7 avec apparemment un probleme d’image qui seraient redimensionnées en html ou Css.. je vais les traiter une par une.. merci en tous cas.
    ATTENTION, j’ai eu 20% sur wp-rocket car j’avais imagify ! il faudrait préciser de l’acheter avant…

    • Hello @isabelle_vauch:disqus,
      Pour le point concernant l’analyse de Javascript, comme je le disais à Esther, je ne suis pas un expert sur la partie technique. Je te conseille d’en parler à Edouard, à l’occasion d’un coaching 🙂
      Merci pour l’info sinon ! 🙂

  • Bonjour, merci pour tous ces conseils ! J’avais essayé pas mal de plugin de mise en cache et de compressions de HTML/JS/CSS et à chaque fois que je retestais la rapidité du site, c’était beaucoup plus long ! J’aimerais investir dans WP Rocket, ce plugin améliore la vitesse de chargement du site pour sur ?
    Merci !

    • Hello Roxane,
      Oui WP Rocket boost de manière considérable la vitesse de chargement de ton site. En appliquant également les autres best practices bien évidemment 🙂

  • Do NOT follow this link or you will be banned from the site!
    shares

    Rapport de faute d’orthographe

    Le texte suivant sera envoyé à nos rédacteurs :