Nos conseils pour améliorer le temps de chargement de son site

1
279
views

La vitesse de chargement d’un site internet est un des facteurs qui peut soit améliorer, soit pénaliser votre position sur Google. Nous allons voir dans cet article, avec un exemple concret, comment il est possible d’améliorer la vitesse de chargement de son site.

Votre contenu peut être le plus pertinent du monde et d’une qualité sans égale. Vos concurrents directs peuvent présenter un contenu médiocre et à la limite du diffusable, si le temps de chargement de vos pages est excessivement lent et celui de votre concurrent très rapide, il sera très probable que ce dernier obtienne plus de trafic que vous.
Et oui, Google aime les sites qui se chargent rapidement. Point barre.

Par chance, plusieurs moyens existent pour connaître ce fameux temps de chargement et aussi pour obtenir quelques précieux conseils pour l’améliorer.
Ces moyens sont Pingdom Tools et Google PageSpeed Insights.

Qu’est-ce donc Pingdom Tools

Pingdom Tools est un connu qui tout le monde peut utiliser. Pour cela, il suffit d’indiquer l’adresse de son site et de laisser cet outil faire son travail.
Ce dernier analysera l’URL saisie et vous fournira une note de performance (perfomance grade) entre A et F (et chiffrée entre 0 et 100). A (ou 100) étant la note maximale.

Nous n’allons pas entrer trop en profondeur dans cet outil, car il est plus technique que le second. Mais dans le cadre de l’optimisation que nous allons effectuer dans cet article, il est important de connaître sa valeur avec et après les actions appliquées.

Qu’est-ce donc Google PageSpeed Insights ?

Google PageSpeed Insights, comme son nom l’indique, a été développé par Google. Il est destiné aux webmaster (mais pas seulement) désireux de connaître et d’améliorer la vitesse de chargement d’un site.
Jusque là, je pense que vous me suivez.

Cet outil fournit 2 résultats:

  1. le temps de chargement de votre site en mode mobile,
  2. le temps de chargement de votre site en mode desktop (ordinateur).

Il vous indiquera, pour ces 2 modes, ce qui cloche et vous fournira les pistes pour améliorer ces points.
Les résultats vont jusqu’à 100 (100 = le mieux). Donc, l’objectif est de s’approcher le plus possible de 100.

Cette introduction est maintenant terminée, je vais m’atteler à la tâche qui vous intéresse le plus, soit essayer de trouver les solutions afin d’améliorer la vitesse de chargement d’un véritable site internet.

Le but étant d’obtenir des scores Google PageSpeed Insights et Pingdom Tools qui soient les plus élevés possibles.

Comment améliorer les résultats Google Page Speed et Pingdom Tools de year-off.ch ?

Dans quel état se trouve mon site ?

Avant de commencer, il nous faut savoir dans quel état se trouve le site que nous avons décidé d’optimiser (ou de rendre plus rapide).

Le site choisi est https://www.year-off.ch, un blog retraçant l’aventure de la famille Tranquille en Australie.
Au 29 septembre 2018, https://www.year-off.ch possédait 48 articles, 5 pages et 620 images. Un petit site donc.

En effectant une première analyse avec Pingdom Tools et Google PageSpeed Insights, nous obtenons les résultats suivants. Pour Google PageSpeed :

Avant de commencer l’optimisation de Year-off.ch, le résultat Pingdom Tools est de 73 (grade C), temps de chargement 1.99s.

Avant de commencer l’optimisation de Year-off.ch, le résultat Google PageSpeed est de 55 pour le mode Desktop et 61 pour celui Mobile.

Ces premiers résultats ne sont pas catastrophiques, mais nous allons tout de même essayer de les améliorer.
Le temps de chargement de Year-off.ch reste toutefois lent (1.91 seconde) et Google n’aime pas ça. Je vais donc retrousser mes manches et apporter les solutions pour améliorer sa vitesse d’affichage.

Ce site utilise WordPress, donc ce test se fera autour de ce CMS et en utilisant des plugins d’optimisation adaptés à celui-ci.

Les points d’amélioration, fournis par Google PageSpeed Insights, sont donc:

  1. Optimiser les images
  2. Exploiter la mise en cache du navigateur
  3. Éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison
  4. Afficher en priorité le contenu visible
  5. Réduire le temps de réponse du serveur
  6. Réduire la taille des ressources CSS
  7. Réduire la taille des ressources Javascript

C’est point par point que nous allons commencer l’optimisation du site https://www.year-off.ch.
Et après chaque action, nous allons refaire une analyse du site avec Pingdom Tools et Google PageSpeed Insights afin de voir si cette dernière aura été bénéfique ou non.
Pour rappel, au départ les résultats étaient les suivants:

  • Résultat Pingdom Tools : 73 (Grade C) – Temps de chargement 1.91 secondes
  • Résultat Google PageSpeed : 55 (mode Desktop) et 61 (mode Mobile)

Optimiser les images

Avec l’optimisation des images, je vous garantis que l’on va vite entrer dans le vif du sujet.

En lisant les recommandations de PageSpeed Insights, je vois ceci :

Beaucoup d’images doivent être optimisées. Ces dernières sont trop lourdes et donc, elles ralentissent le chargement du site.

Je récupère l’ensemble des URL’s des images concernées et les téléchargent sur mon ordinateur. Le but étant de les optimiser.
Pour cela, j’utilise un outil qui s’appelle Irfan. Une fois que cette tâche est effectuée, je dois les recharger toutes ces images maintenant optimisées sur mon site WordPress.
Au préalable, j’ai installé le plugin Enable Media Replace qui permet de remplacer une image sans devoir la supprimer et surtout qui m’évite de devoir ré-éditer toutes les pages de mon site qui contiennent un lien vers une image concernée.

Je ne vous le cache pas, ce travail est long et fastidieux, mais en opérant de la sorte vous êtes sûr de taper dans le 1000.

Dans tous les cas, j’en profite aussi pour installer un le Plugin Smush Image Compression and Optimization.
Celui-ci optimisera les images au moment de l’upload dans WordPress et devrait limiter la casse. Cela dit, rien ne vaut Irfan (et une optimisation au préalable des images me semble être la meilleure des solution. ABE!).
La configuration de Smush n’est pas compliquée, mais étant donné qu’il s’agit d’une version gratuite, l’optimisation des 620 images du site est un peu longue.

Le résultat au niveau de Pingdom Tools et Google PageSpeed Insights après ce long labeur est le suivant :

  • Résultat Pingdom Tools : 74 (Grade C) – Temps de chargement 1.61 secondes
  • Résultat Google PageSpeed : 75 (mode Desktop) et 60 (mode Mobile)

Il y a déjà une nette amélioration pour le résultat Google PageSpeed en mode Desktop après cette première action. L’incidence de l’optimisation pour le mode Mobile et sur le résultat Pingdom est moins flagrant, mais il a évolué dans le bon sens, c’est déjà ça.

Exploiter la mise en cache du navigateur

La notion de mise en cache du navigateur peut être un plus compliqué à comprendre. Pour faire simple, dès qu vous appelez une page web depuis votre navigateur préféré, ce dernier doit télécharger une multitude de fichier afin d’afficher une page correctement: les fichiers HTML, les CSS, les JavaScript, les images ou encore les polices de vos textes.
Le temps que tout ceux-ci soient interprété par navigateur s’appelle le temps de chargement. Plus ce temps est élévé, moins Google apprécie votre site.
C’est pourquoi, il est important de réduire ce temps en exploitant la mise en cache dans son navigateur de ces différents fichiers.
Vous me suivez encore ?

Pour cela, j’ai décidé d’installer le plugin Hummingbird Page Speed Optimization qui va nous aider pour cela (et probablement aussi pour d’autres choses, je vais y revenir).
Hummingbird, après avoir fait un premier diagnostic, propose différentes solutions pour corriger les problèmes de mise en cache du navigateur (Browser Caching).
Pour cela, il propose de modifier le temps d’expiration d’un fichier. Google recommande 8 jours et Hummingbird s’adapte à cette recommandation.
En validant cette option, Hummingbird va modifier le fichier .htaccess de votre site.

Cela dit, si vous êtes un utilisateur avancé, vous pouvez vous passer de Hummingbird et modifier directement le fichier .htaccess selon les recommandations que vous trouverez ici par exemple https://gist.github.com/jordinebot/d2b5400f7016ba10ca71bc17568c77cd.

Cette modification a une incidence nette sur mes résultat Google PageSpeed.

  • Résultat Pingdom Tools : 76 (Grade C) – Temps de chargement 1.51 secondes
  • Résultat Google PageSpeed : 86 (mode Desktop) et 74 (mode Mobile)

Éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison

La ligne de flottaison correspond à la séparation (fictive…) entre le contenu visible sans utiliser les barres de défilement du navigateur et le reste de la page appelée dans votre navigateur.
Pour faire plus simple, il s’agit de ce que vous voyez au moment où la page se charge.

Google, au moment du chargement du site, veut voir quelque chose. Bien souvent, rien ne se passe (page blanche pendant quelques millisecondes), car votre navigateur est entrain de charger une ribambelle de Javascript ou autres CSS.

Dès lors pour revenir à bout de ce problème, nous allons installer un nouveau plugin : Autoptimize.
Après son installation, il est important de bien tester l’ensemble de son site. Autoptimize va effectivement faire en sorte que votre site s’affiche rapidement, mais il peut très facilement casser complètement tout son visuel.
La configuration que je vous propose ici, fonctionne donc pour mon site https://www.year-off.ch, mais je ne garantis pas, qu’il en sera de même avec le votre.

Au niveau des Google PageSpeed, l’installation de ce plugin n’est pas vraiment convaincant (baisse pour le Mobile). Cependant, il l’est au niveau du Pingdom Tools où le temps de chargement de la page passe à 1.38s.

  • Résultat Pingdom Tools : 82 (Grade B) – Temps de chargement 1.38 secondes
  • Résultat Google PageSpeed : 86 (mode Desktop) et 66 (mode Mobile)

A la lecture du résultat Google PageSpeed, je constate que les fonts de Google pose toujours problème :

Autoptimize permet de gérer ce problème, dans l’onglet “Extra”, je coche l’option “Combine and preload in head (fonts load late, but are not render-blocking)”.

Et là, BINGO, la progression est nette au niveau des Google PageSpeed, mais du coup (étrange), le temps de chargement (Pingdom) de la page augmente (1.70s).

  • Résultat Pingdom Tools : 89 (Grade B) – Temps de chargement 1.70 secondes
  • Résultat Google PageSpeed : 92 (mode Desktop) et 88 (mode Mobile)

Installation d’un système de cache Serveur

Les performances se sont déjà nettement bien améliorées. Mais continuons un peu plus loin pour voir si un système de cache côté serveur peut encore améliorer le chargement de Year-Off.
Ainsi, j’installe le plugin W3 Total Cache.

Et là, la progression est mitigée au niveau des Google PageSpeed, légère progression côté Desktop et légère baisse pour le Mobile.
Le temps de chargement (Pingdom) diminue (906ms, soit une demi-seconde) et son grade atteint la note suprême de A.

  • Résultat Pingdom Tools : 93 (Grade A) – Temps de chargement 906 millisecondes
  • Résultat Google PageSpeed : 93 (mode Desktop) et 87 (mode Mobile)

Conclusion

Les chiffres parlent d’eux-mêmes. Avant de prendre ce problème à bout de bras, le score de mon site était de 55/100 sur Desktop. Maintenant, il se monte à 93/100.
Ainsi, je pense que cela vaut la peine de passer un peu de temps pour améliorer le temps de chargement des pages de son site.

Le temps de chargement de son site peut être efficacement améliorer en ajoutant à son site des images correctement optimisées. Je dirais même que ceci est le facteur le plus important.
Suite à l’optimisation du site https://www.year-off.ch, je me suis aussi rendu compte que le chargement des Fonts Google était un autre point très consommateur en temps de chargement. Ainsi, les supprimer ou différer leur chargement impactera la vitesse d’affichage d’un site.
La mise en cache, côté serveur, des pages ne semblent pas avoir une grande influence sur le Google Pagespeed, par contre, il aura toute son importance pour le Pingdom.

Atteindre 100 est évidemment réalisable, mais en vous lançant dans une telle opération, vous risquez de perdre un temps de fou et surtout, à vouloir tendre vers ce score, vous allez probablement pénaliser votre site au niveau de son rendu visuel. Ainsi, un juste milieu est à trouver, donc, mon conseil serait de viser les 85 dans les différents Google PageSpeed, le surplus étant du bonus.

Maintenant à vous de jouer et évidemment, si vous avez des questions c’est avec plaisir que j’essaierai d’y répondre.

MrTranquille
@TranquilleCH

Vignette : unsplash-logoMarc Sendra martorell

1 COMMENTAIRE

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here

*

code