Améliorer son score PageSpeed Insights avec WordPress

Des étapes simple et à la porté de tous pour booster votre WordPress

Que vous ayez ou non des notions en SEO (Search Engine Optimization) vous devez prendre en compte la vitesse de votre site. Nous allons voir comment l’améliorer facilement et très rapidement pour parfaire votre expérience utilisateur et votre relation avec Google !

1. Optimiser vos images avec et sans plugin

Imaginons que vous êtes en train de rédiger votre page et vous décidez d’ajouter une image pour accompagner votre texte. Cette image sortant de Photoshop, elle n’est pas vraiment optimisé pour le web. Nous allons voir comment la rendre légère sans affecter sa qualité et tout ça gratuitement !

Depuis Photoshop

Pour enregistrer une image optimisée pour le web, rien de plus simple ! C’est important car certains formats, une fois uploadé sur internet, vont mal s’afficher (exemple : couleur différente de Photoshop et sur internet).

• • Vous avez votre montage/photo ouvert sur Photoshop.
  • Appuyez sur ctrl+alt+maj+S ou fichier -> Enregistrer pour le web.
  • Un pop-up s’ouvre, dans la colonne à droite vous avez accès aux réglages de la photo sortante.

• Sélectionnez JPEG si votre image ne possède pas de transparence, PNG-24 si votre image à un fond transparent.
• Baissez la qualité à 80%, cela n’a pas vraiment d’importance si vous l’optimiser encore après.
• Cliquez sur enregistrer.

Avant l’upload sur WordPress avec Kraken.io (Le plus efficace)

Kraken.io est l’outil le plus performant que j’utilise pour optimiser mes photos ! Une puissance inégalée ainsi qu’un service gratuit vous permettant d’uploader autant de photos que vous voulez. Vous pouvez télécharger les photos une par une ou via une archive compressée. La seule restriction est la taille de la photo qui doit rester en dessous de 1mb.

Vous pouvez glisser vos photos et les télécharger presque instantanément tellement le service est rapide !

Optimiser toutes vos images sur WordPress : plugin gratuit

Avec WP-SMUSH vous pouvez compresser toutes vos images gratuitement, massivement et sans effort.

• • Téléchargez WP-SMUSH ou installer le depuis WordPress (Extensions -> ajouter) et chercher « Smush Image Compression and Optimization ».
  • Une fois installer et activer, survoler la case Médias sur le back office de WordPress et cliquez sur WP SMUSH.
  • Vous pourrez compresser 50 images sur chaque clic dans la version gratuite (vous pouvez laisser tourner ça ne vous prendra pas beaucoup de temps).

• • Après compression, on voit qu’il y a du résultat même en étant passé par Kraken.io ! La version Pro, indique qu’on pourrait économiser encore plus, à vous de voir !

Félicitations la première étape est validée !

2. Compression, minification et mise en cache

Installation et configuration du plugin

Sur WordPress pas besoin de se compliquer la tâche à diviser les problèmes que nous inflige Google ! Un plugin suffit pour booster de façon impressionnante votre CMS.

Nous allons utiliser le plugin W3 Total Cache ! A installer et activer d’urgence sur votre WordPress si vous n’avez pas déjà un plugin gérant cette partie.

Une fois installer, un onglet Performance est apparu dans la colonne de gauche de votre back office.

• • Cliquez sur Paramètres généraux dans l’onglet Performance.
  • Cochez Permuter tous les types de cache sur on ou off (en une fois).
  • Puis enregistrer le résultat avec ce bouton à droite.

• Le plugin a donc activer toutes ses fonctionnalités, il faudra cependant en désactiver manuellement certaines.

Laisser activer : | Mise en cache de page| Minifier | Mise en cache de base de données | Mise en cache objet | Mise en cache navigateur | Fragment Cache

Vous pouvez désactiver les fonctionnalités suivantes : Opcode Cache | CDN | Reverse Proxy | Monitoring. Ce sont des éléments précis qui ne sont pas gérables si vous ne disposez pas d’un service spécifique pour aller avec, ils ne sont pas vitales pour les performances de votre site et ne sont pas gratuites !

Vos fichiers sont maintenant compressés, et votre site web indique au navigateur comment gérer le cache !

Cette étape, même si elle fonctionne très bien, peut ne pas être validée par le Google PageSpeed tools. Il peut rester un où deux fichier (même s’ils ne sont pas utilisé à votre connaissance) qui reste non optimisé. Cependant votre score à du bien augmenter !

Problèmes persistants

La mise en cache peut rester un problème selon Google PageSpeed même si vous avez tout configurer correctement, cependant l’incidence sur le score est vraiment minime et cela ne vous empêche aucunement de dépasser les 90 ! Nous pourrons voir ce détail plus technique dans un autre tutorial, mais vous ne devez pas vous en inquiéter !

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

Rendez vous dans la partie minifier du menu.

Cochez les parties suivantes :

Vérifier plus bas sur la page si les minficateurs sont bien activer (normalement oui si vous avez suivi du début) .

Vous pouvez enregistrer et vider le cache avec le bouton à votre droite !

Réduire le temps de réponse du serveur

Sachez qu’il est difficile pour un gros site d’atteindre les 1,5 sec réglementaires de Google ! De plus la vitesse de votre site est plus importante pour l’expérience utilisateur que pour le référencement. On peut dire sans s’avancer qu’un site chargeant en moins de 5 secondes ne posera pas de problème pour l’utilisateur.

Si c’est important pour vous, je vous conseil l’usage d’un CDN, mais qui reste tout de fois payant !