Comment améliorer votre résultat Google Page Speed

7
541
views

La vitesse de chargement d’un site est un facteur pouvant soit améliorer, soit pénaliser le classement de votre site Internet sur Google.
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 respectable, si le temps de chargement de vos pages est excessivement lent et celui de votre concurrent très rapide, il est très probable que ce dernier obtienne plus de trafic que vous.
Et oui, Google aime les sites qui se chargent rapidement.

Par chance, un moyen existe pour connaître le temps de chargement de son site et obtenir quelques conseils pour l’améliorer. Ce moyen est Google PageSpeed Insights.

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.

google-page-speed-insights

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.

Il vous indiquera 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.

Ainsi, je vais m’atteler à cette tâche et essayer de trouver les solutions afin d’améliorer la vitesse de chargement de mon site. Le but étant d’obtenir un score Google PageSpeed Insights qui soit le plus élevé possible.

Comment améliorer le résultat Google Page Speed de Tranquille.ch ?

 

Dans quel état se trouve mon site ?

Tant qu’à faire autant essayer d’améliorer la vitesse de chargement de mon site.
Au 28 février 2016, Tranquille.ch possédait 166 articles, 136 pages et 475 images.

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

Le constat de départ de mon site fait peur. Très peur même. Voici donc le résultat Google PageSpeed Insights avant toute intervention de ma part :

tranquille-ch-premier-page-insights

L’image ci-dessus parle d’elle-même.

  1. Vitesse de chargement en mode mobile: 10/100
  2. Vitesse de chargement en mode desktop: 11/100

Le temps de chargement de mon site est terriblement lent et Google n’aime pas ça. Je retrousse mes manches et je vais apporter des solutions pour améliorer tout cela.

Les points d’amélioration sont donc:

  1. Optimiser les images
  2. Autoriser la compression
  3. Exploiter la mise en cache du navigateur
  4. Réduire le temps de réponse du serveur
  5. Éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison

Volontairement, je ne commence pas par l’optimisation des images. Je la garde pour la fin, car je pense qu’il sera celui qui prendra le plus de temps à résoudre.

Autoriser la compression

Ainsi, la 1ère étape pour essayer d’améliorer ce temps de chargement sera d’autoriser la compression. Pour cela, j’ai décidé d’installer le plugin gratuit appelé WP Performance Score Booster.

Après avoir installé ce plugin, le résultat est le suivant :

page-insights-page-speed-booster

C’est pas franchement le délire. Histoire de pouvoir comparer l’efficacité de ce plugin avec un autre, j’ai décidé d’installer Autoptimize. Ainsi, je désactive WP Performance Score Booster.

Le résultat est le suivant avec Autoptimize:

page-insights-page-speed-booster-Autoptimize

Nous passons cette fois à 15/100. Pas rassurant cette affaire. Mais continuons tout de même.
Je décide de revenir à WP Performance Score Booster et donc je désactive et supprime Autoptimize.

Installation d’un système de cache

Vu les résultats peu encourageants de la 1ère étape, j’ai décidé d’installer un système de cache sur mon site.
Le plugin choisit est WP Super Cache. Pour le configurer, je suis parti du tutoriel de site No Tuxedo tutoriel WordPress : le plugin WP Super Cache pour un site plus rapide.

Le résultat après avoir activé et configuré WP Super Cache est le suivant (avec WP Performance Score Booster) :

page-insights-wp-super-cache

Du coup, le temps de chargement est passé à 19/100 pour Mobile et 18/100 sur Desktop. Pas de quoi se pavaner.

Optimiser les images

Comme indiqué en début de test, je garde pour la fin l’optimisation des images. A noter que ce point est le seul qui reste en rouge après avoir installé WP Performance Score Booster et WP Super Cache dans les résultats PageSpeed Insights de Google.

L’optimisation des images est clairement mon point noir. Mes images sont trop lourdes et je n’ai aucune idée de comment les optimiser.
J’aimerais bien utiliser Photon de Jetpack, mais ce dernier provoque un souci de redimensionnement sur mon site et du coup mon design perd en qualité de rendu. Il y a bien certains plugins qui pourraient faire l’affaire soit EWWW Image Optimizer, Resize Image After Upload ou encore, WP Smush It.
Mais ne sachant pas vraiment les effets de bord que cela peut causer sur Tranquille.ch, je préfère ne pas me lancer dans ce genre d’exercice.

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

page-insights-image-trop-lourde

Une des images de mon site est trop lourde. Beaucoup trop lourde même. Sa compression et son redimensionnement permettraient de gagner 3,1 Mo.
Tentons.

image-redimension

La réponse est sans équivoque. Une seule image plombait complètement le score de PageSpeed Insights. Le score s’est amélioré de manière significative (de 18 à 62 sur Desktop). Sur Mobile, suite à cette modification, la vitesse de chargement est maintenant en orange (67).
PageSpeed Insights me suggère d’ailleurs d’en compresser d’autres. Chose que je m’empresse de réaliser.

Après avoir repris nombreuses images, le résultat commence à devenir intéressant sur Desktop. Le score de 82 est atteint. Par contre, il a diminué pour le Mobile (60).

optimisation-image

Que faire encore pour améliorer le tout ?

Les scores ne sont rarement les mêmes. En effet, si j’effectue plusieurs tests, sans toucher, à mon site, les résultats diffèrent. J’ai l’impression qu’ils dépendent de l’état des serveurs.

Minifier les fichiers JS et CSS

J’ai des doutes de la façon dont son minifier mes fichiers JS et CSS. Ainsi, j’ai décidé d’installer le plugin WP Super Minify du même auteur que WP Performance Score Booster. Voyons voir ce qui se passe après son activation :

wp-minify

Le score de chargement sur Desktop passe à 83 et sur Mobile, il atteint 70.
Ce plugin a été toutefois désactivé, car après l’avoir activé, le comportement de ma navigation a changé.

Tentons aussi le Lazy Load

Suite à cela, j’ai installé le plugin Image Lazy Load. Ce plugin charge les images uniquement si elles sont visibles à l’écran. Le but étant donc d’alléger la page et son temps de chargement.
Concrètement, pas de changement au niveau de mon score Page Speed Insights.
Update du 27 mars 2016: Le plugin ci-dessus, Image Lazy Load, n’affichait plus les images de mon site sur les Ipad. Ainsi, il a été remplacé par BJ Lazy Load.

Et si j’optimisais mes images avec WP Smush ?

Initialement, je voulais pas installer de plugin pour optimiser mes images, mais finalement, j’ai craqué. Le plugin élu est WP Smush. L’installation est simple. Le temps pour optimiser les images est un peu long, mais au final et avec une once de patience, on y arrive.
Là, je remarque clairement un changement au niveau du temps de chargement de mon site. Je le sens plus fluide.
Par contre, peu d’influence sur mon résultat Page Speed Insights. Il reste, au mieux, à 70 sur Mobile et à 83 sur Desktop.

Dorénavant et pour m’éviter toute surprise désagréable, avant de charger une image dans mon site, je l’optimise systématiquement avec l’outil en ligne Jpeg.io.

Minifier les fichiers JS et CSS – Bis repetita

Quelques points plus haut, j’avais tenté de minifier mes fichiers JS et CSS avec WP Super Minify. Mais celui-ci provoquait quelques soucis sur ma navigation.
Du coup, je décide de tester un autre plugin : Autoptimize, en prenant soin de désactiver la compression des Javascript. Sans quoi, ma navigation refaît des siennes.
Mon PageSpeed Insights gagne un point sur Desktop (84…youpi).

Passage à PHP 7

Un peu plus technique. Quoique.
Fruit du hasard, le 1er mars, soit 2 jours après la mise en ligne de cet article, mon hébergeur annonce que PHP 7 peut être utilisé pour mon site.
Selon leur news, un site fonctionnant avec PHP 7 ira jusqu’à deux fois plus vite qu’avec PHP 5.6.
La migration se fait sans trop de soucis, j’ai juste un plugin qui bloque. Celui-ci est directement supprimé, car plus utilisé (à priori…).
Dans les faits et via Page Speed Insights, je ne remarque rien de particulier au niveau du temps de chargement des pages. L’admin de WordPress me paraît quant à elle plus rapide.
Affaire à suivre.

Conclusion

Les chiffres parlent d’eux-mêmes. Avant de prendre ce problème à bout de bras, le score de mon site était de 11/100 sur Desktop. Maintenant, il se monte à 84/100 et ce dernier, peut encore être amélioré.
Ainsi, je pense que cela vaut la peine de passer un peu de temps pour améliorer le temps de chargement de ses pages.
Pour le référencement, je n’en sais rien encore, mais pour le confort des visiteurs, cela est une évidence.
Le temps de chargement peut être efficacement améliorer simplement en ajoutant à son site des images correctement optimisées. Ceci est le facteur primordial.

MrTranquille
@TranquilleCH

Vignette : Nicolai Berntsen

7 COMMENTS

  1. Bonjour, je découvre votre site. Très intéressant…je sens que je vais devenir une lectrice assidue.
    Concernant cet article en particulier, merci d’avoir partagé ce step-by-step. Facile à appliquer.
    A bientôt
    Emilie

  2. Bonjour Emilie,

    Merci pour ce retour très sympathique.

    Je vais encore explorer quelques pistes afin de faire en sorte que nos sites répondent plus rapidement encore.
    Affaire à suivre alors.

    A bientôt,
    MrTranquille

VOTRE COMMENTAIRE

Please enter your comment!
Please enter your name here

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.