La politique mobile first de Google arrivant à grands pas, je me suis dit qu’il fallait faire quelque chose pour améliorer la vitesse d’affichage de canaptv.com sur mobile.
J’ai donc testé le plugin payant WP Rocket de mise en cache puis le plugin gratuit W3 Total Cache, les deux sans CDN. Et j’ai soumis les résultats à au Pingdom Website Speed Test ainsi qu’au Google PageSpeed Insights. pour comparer les résultats pour chaque plugin.
Test du plugin WP Rocket
Débutons par WP Rocket.
Sa configuration est très aisée et consiste pour l’essentiel à cliquer sur les cases des paramètrages souhaités. Son interface se présente telle que dans l’image ci-dessous, avec en enfilade :
- le tableau de bord,
- la gestion du cache,
- la gestion des fichiers css et javascripts,
- la gestion des média (pré-chargement de l’image, format image webP, gestion des fichiers embarqués),
- puis pour les derniers onglets, le paramétrage avancé.
Le site canaptv.com n’étant pas une boutique mais un simple blog, je ne me suis pas fatigué outre mesure pour le paramètrage, et j’ai suivi ce qui était conseillé dans les tutoriels que l’on trouve ça et là pour un site de cette catégorie. Ce qui a pour résultat les quelques paramétrages qui suivent :
Paramétrage WP Rocket – Gestion du cache
Dans l’onglet Cache – représenté à l’image ci-dessus – je me suis contenté d’activer la mise en cache pour les appareils mobiles sans cocher la case création d’un fichier à part pour les mobiles. Ce blog ne dispose pas d’un thème AMP dédié, ni de plugin gérant cela. Aucun intérêt.
Puis, pour le cache, j’ai simplement demandé à ce que le cache soit purgé toutes les 10 heures. On remarque, dans la gestion du cache qu’il est impossible de régler le cache header qui oblige les navigateurs à forcer la mise en cache.
Paramétrage WP Rocket – Optimisation des fichiers CSS et Javascripts
Dans cet élément de menu, WP Rocket s’occupe de la façon dont il va gérer les fichiers CSS et Javascript qui ralentissent le chargement des sites.
J’y ai activé :
- Minifier les CSS pour en réduire la taille (et donc le chargement)
- Combiner les fichiers javascripts (et donc la minification de ces fichiers) là aussi pour gagner de la place et du temps de chargement. Faites attention si vous utilisez cette option, surtout si vous avez une boutique. Ca peut casser pas mal de trucs.
- Charger le javascript en différé (pour ne pas bloquer l’affichage des informations essentielles parce qu’un gros JS prend du temps à arriver sur le navigateur client)
WP Rocket – Gestion des images et fichiers média
Pour cette rubrique, il n’y a quasiment rien à faire. Il suffit d’activer le Lazy Load des images (en ayant pris bien sûr la peine de réduire la taille des photos de votre site internet au préalable) pour améliorer le temps de chargement.
Et également cocher l’ajout des dimensions manquantes des images pour que votre navigateur ne réserve que la place utile en dimensions aux images qui lui arrivent.
Cochez la désactivation de l’embed si vous gérez vous même vos vidéos ou insertions de contenus d’autres sites
WP Rocket – Gestion de Google Analytics et Facebook Pixel
L’onglet Add-ons est le dernier onglet auquel il faut réellement s’intéresser. Les autres ne servent qu’à purger la base ou importer / restaurer les paramétrages, ou affiner ce qui est mis en cache ou non.
Dans cet onglet, on indique à WP Rocket de gérer proprement Google Analytics et Facebook Pixel pour ne pas mettre en cache tout ça trop fortement et les laisser ces outils faire leur boulot. N’oubliez pas d’aller faire un tour dans ces paramètres !
Et c’est tout. WP Rocket est prêt. On attend gentiment la mise en cache des pages avant de passer au verdict.
WP Rocket – Le résultat de vitesse sur Desktop et mobile
Avec ces paramétrages, j’obtiens sur Desktop avec Pingdom et Google PageSpeed Insights les scores respectifs de 69 et 78, ce qui est très moyen.
Et sur mobile, c’est à dire les performances d’affichage que je veux améliorer, un résultat lamentable de… 36 :
C’en est terminé du test WP Rocket. Passons à W3 Total Cache
Test du plugin W3 Total Cache
Pour le test, je désinstalle WP Rocket et j’installe le plugin W3 Total Cache (version gratuite) sans rien toucher d’autre. Et c’est un changement d’univers. L’interface est plus aride mais plus riche.
Dans l’administration WordPress, l’accès paramétrage du paramétrage de l’extension se situe sous Réglages, et porte le nom de Performance. On le retrouve aussi dans la barre d’admin en raccourci, d’ailleurs.
La paramétrage de base s’opère au travers d’un Installer qui propose les paramétrages les plus adaptés à la configuration de votre serveur. Canaptv étant chez WP Serveur et sur un dédié, le paramétrage de base est le suivant dans la sous-rubrique Réglages généraux…
W3 Total Cache – Mise en cache de page
La mise en cache des pages est à activer avec l’inscription sur disque comme méthode de cache, dans mon cas.
W3 Total Cache – Réduction des fichiers CSS et Javascript
J’ai activé cette partie parce que, comme dit plus haut, canaptv est un blog sans trop de fioritures. Si vous avez une boutique, ne faites pas n’importe quoi et cherchez à optimiser vos fichiers proprement au lieu de laisser faire en automatique.
Le mode de minification choisi sur W3 Total Cache est en automatique, sur disque parce que c’est un SSD sur mutualisé, avec les méthodes par défaut.
W3 Total Cache – Gestion du cache
Pour cette partie, j’ai juste cliqué l’activation du cache du navigateur et laissé le reste du paramétrage par défaut.
W3 Total Cache – Reverse Proxy
Cette partie n’apparait pas sur WP Rocket, au contraire de W3 Total Cache.
Ici, si vous votre serveur de page est un NGinx, cochez la case Enable reverse proxy caching by Varnish et indiquez dans la partie textuelle serveur Varnish l’IP de votre serveur NGinx.
Puis, cliquez sur Sauvegarder et purger le cache.
W3 Total Cache – Gestion des images et des fichiers média
Comme pour la rubrique identique du plugin WP Rocket, la taille des images a été réduites sur le site. J’ai activé le lazy load, viré la gestion des émojis (pas besoin de smileys).
Et c’est tout. J’ai laissé pour l’instant tous les autres paramètres par défaut pour avoir un paramétrage au plus près de la configuration de l’extension testée précédemment.
W3 Total Cache – Le résultat de vitesse sur Desktop et mobile
Avec W3 Total Cache, j’obtiens sur Desktop avec Pingdom et PageSpeed Insights les scores respectifs de 73 et 93, ce qui est beaucoup mieux !
Pour l’analyse de la version mobile, j’obtiens un score de 41, ce qui n’est pas le Pérou mais qui est toujours mieux que le misérable 36 de WP Rocket.
Conclusion : Que choisir entre WP Rocket et W3 Total Cache ?
Si vous avez peu de budget à investir, voire pas du tout, et que vous aimez trifouiller les paramétrages pour optimiser le fonctionnement du plugin ou installer un CDN, n’hésitez pas. Allez directement sur W3 Total Cache. En fonctionnement solo, il est supérieur en performances à WP Rocket.
En revanche, si vous avez du budget pour acquérir WP Rocket, c’est à dire 44 euros annuels ET que vous êtes prêt à ajouter à cela l’abonnement au CDN Rocket à 7.99 euros mensuels (paiement annualisé), WP Rocket vaut le coup pour tout paramétrer sans trop se fatiguer.
Les deux branchés, c’est à dire WP Rocket + son CDN intégré CDN Rocket donnent en performances un résultat Pingdom de 79, et un résultat Google PageSpeed Insights de 99 pour Desktop et 78 pour mobile !!! Et ce, sans avoir encore porté une attention particulière aux pistes d’amélioration.
Donc, pour résumer :
- Vous avez un budget limité = W3 Total Cache
- Vous disposez d’un fond pour optimiser sans effort = WP Rocket, les yeux fermés
