Atteindre la note de 100/100 sur Google PageSpeed avec WordPress

Tutoriaux 1 commentaire(s) 4907 vue(s)

Chapitre 5 : Derniers détails pour avoir un score de 100/100 sur Google PageSpeed


Selon les avertissements que vous obtiendrez voici les corrections à mettre en place



1) Optimiser les images pour un meilleur affichage 



Comment se calcule le poids d’une image ? Il est égal au nombre de pixels multiplié par le nombre d’octets qui composent un pixel. Il faut aussi tenir compte de la résolution. Si le poids de votre image est faible vous pouvez utiliser une image qui a une largeur importante ! Cependant il est inutile de mettre des images très larges sachant que la majorité des écrans ont une capacité de 15 pouces, 17 pouces ou encore 19 pouces.

2) Eliminer les codes JavaScript et CSS qui posent problèmes 



Sachant que les fichiers JavaScript sont capables de modifier le HTML d’une page, nous savons que le navigateur doit attendre le chargement complet pour afficher le contenu de la page à l’écran. Penser à vérifier votre plugin, s’il n’est pas optimisé, faites un test avec un autre plugin (comme Monarch) et comparer les résultats. 
Si vous avez un diaporama en page d’accueil, sachez qu’il nécessite beaucoup de ressources et ralentit donc la performance. Si possible, remplacer ce diaporama. 
Ne pas oublier que la navigation sur un ordinateur et un mobile est différente. Si vous placez la sidebar sur le côté latéral gauche, cela peut nécessiter des allers-retours supplémentaires pour l’affichage. Il est très facile de remédier à ce problème sachant qu’il est lié à votre thème. En plaçant cette barre plutôt à droite par exemple vous verrez que votre score de performance augmentera d’office.

 

3) Configurer correctement le WP-Rocket 



Cela concerne le cache. WP-Rocket est payant mais efficace puisqu’il est facile à configurer, il est performant et entièrement compatible avec WPServeur. Dans les options de base il faut cocher LazyLoad si vous n’avez pas de CDN. Cocher aussi les autres options. Pour information, le délai de nettoyage du cache est de 0, c’est-à-dire qu’il est illimité. 
En ce qui concerne les fichiers statiques : Pour le CSS et le JS qui bloque l’affichage, vous pouvez cocher toutes les cases et désactiver le mode sécurisé (attention tout de même à bien vérifier les autres paramètres pour ne pas mettre en péril la sécurité). 
Il est important de déclarer votre CDN. Si vous en avez deux par exemple (l’un pour les images et l’autre pour le Js et CSS), n’excluez rien en dehors du logo. Combiner CSS et JS peut donner lieu à des modifications de votre site, faites attention à vérifier avant de faire les sauvegardes définitives ! 


Activer le préchargement des requêtes et autres en automatique à 2 secondes. 
Pour conclure, nous pouvons dire que si le résultat obtenu est supérieur ou égal à 85/100 alors votre site fonctionne très bien, voir même presque parfaitement bien ! Le temps de chargement d’une page est très important pour l’utilisateur. Vous pouvez vérifier que ce temps reste dans la normal grâce à Pingdom et GTmetrix. Pour vous donner un exemple, une page qui a une note de 92/100 mais dont la vitesse de chargement est de 2.26 secondes n’est pas bon ! Le temps est trop élevé, il ne faut pas seulement se focaliser sur le score de performance.

Rendez-vous sur ce lien et mettez en commentaire de cet article votre score :

https://developers.google.com/speed/pagespeed/insights/?hl=fr

C'est terminé ! 

À bientôt pour d'autres tutoriels !