L’autre jour, j’ai passé une après-midi entière à passer en revue les solutions et méthodes pour accélérer mon site WordPress. Je te montre comment.
La vitesse de chargement, voilà un aspect du web qu’il est aujourd’hui indispensable d’optimiser. Ne serait-ce que pour créer une expérience fluide mais surtout, en tant que facteur de positionnement SEO.
Car depuis mai 2021, les Core Web Vitals – métriques UX – sont de véritables facteurs de ranking.
Alors prêt à passer à la vitesse supérieure et charger tes pages à la vitesse de la lumière (ou presque) ? Découvrons ça ensemble. Pour mesurer les performances, j’ai analysé mon article dédié au Print-on-Demand avec deux outils :
Pourquoi ai-je opté pour cet article ?
Car il intègre plusieurs images de différentes tailles et plus de 1 000 mots. Si cette page obtient de bons résultats, ce sera pareil pour l’intégralité du site !
Configuration, hébergement et plugins
Quel hébergeur j’utilise ?
Avant d’aller plus loin, il est utile de faire une mise au point concernant l’état global de mon site pour l’optimisation. Commençons par mon hébergeur.
J’utilise o2switch qui est mon hébergeur français préféré… Capacités illimitées, cPanel ultra pratique… Bref un vrai bijou à la française. Ce blog est de nombreux autres sont hébergés sur les serveurs o2switch, jamais eu aucun problème. Alors je leur fais de la pub car l’équipe le mérite vraiment 😄
Quelles extensions et quel thème sont installées ?
J’ai utilisé de nombreux thèmes au cours de ces dernières années et je crois bien avoir trouvé celui qui va rester pour un bon moment. Il s’agit du thème WordPress Maker Pro dont j’ai déjà parlé sur le blog. Il fait parti de ceux développés par la startup connue Genesis.
Pourquoi ce thème ?
Car il est minimaliste, responsive et personnalisable (à condition de savoir gratter le code). C’est spécial, il ne plaira pas à tout le monde mais il me correspond !
Concernant les plugins, c’est déjà un peu plus brouillon… Après avoir fait le ménage, j’ai réussi à retenir 25 plugins. Je n’arrive pas à réduire plus, du moins en choisissant des solutions quasiment entièrement gratuites.
Si tu es curieux, voici la liste complète :
- Advanced Custom Fields : Créer des champs personnalisées
- Affiliate Coupons : Afficher des coupons promotionnelles dans mes articles
- Antispam Bee : Bloquer les spams
- Autoptimize : Optimiser les fichiers CSS, JS avec un lazy-loading pour les images
- Brizy : Constructeur de landing page
- Broken Link Checker : Surveiller les liens cassés
- Cache Enable : Mettre en place le cache
- Calls to Action : Afficher des appels à l’action dans les articles
- CDN Enabler : Installer un CDN, j’en reparle plus bas
- Flying Analytics : Héberger le fichier Google Analytics localement
- Flying Pages : Pré-charger les pages
- GDPR Cookie Compliance : Conformité européenne
- Genesis Simple Edits : Dédié à mon thème
- Gutenberg : Nouvel éditeur WordPress
- Hoo Hreflang Tags : Gérer les balises de langue
- LuckyWP Table of Contents : Afficher un sommaire dans la barre latérale
- Ninja Forms : Créer un formulaire de contact
- Ninja Popups – Payant : Afficher une popup
- Ninja Widget – Payant : Pareil mais pour intégrer dans les articles
- Pretty Links : Créer de jolis liens
- Q2W3 : Afficher un widget lors du scrolling
- Social Share : Mon plugin de partage, j’en reparle plus bas
- Webcraftic : Réduire le poids des images
- WebP Express : Convertir les images en WebP
- Yoast SEO : Avoir les fonctionnalités SEO
Ouf… C’est terminé !
Tu peux voir que je ne possède que 2 plugins payants. Je pourrais réduire le nombre de mes extensions d’optimisation avec WP Rocket que j’utilise sur un autre site, ça viendra peut-être un jour. Concernant tout le reste, j’ai du mal à faire le tri. Honnêtement, j’ai besoin de chacun de ces plugins. Le tout est de les optimiser, ce que je vais justement faire.
Les plugins d’optimisation
La première chose à faire est d’installer une solution de cache comme Cache Enable. Rien que ça va déjà accélérer instantanément n’importe quel site WordPress. Mais ce n’est pas tout pour autant. Dans mon cas, Autoptimize et WebP Express restent indispensables.
Voici ma configuration Autoptimize pour les fichiers :
Pour les images ainsi que les options diverses :
Il est possible de combiner Autoptimize avec Shortpixel, mais ce dernier est payant. Pour partir sur une alternative gratuite, j’utilise Webcraftic Optimizer qui va réduire la taille des images sans perte visuelle au moment de l’upload.
Dans les settings, il y a quelques points à vérifier :
Je sélectionne Lossless pour garder toute la qualité de l’image.
D’ailleurs, tu peux tout à fait passer par des applications web tierces comme :
- Compresser JPEG
- Image Optimizer
- TinyJPG
WordPress a l’avantage d’avoir un large environnement de solutions, autant en profiter et installer un des nombreux plugins de compression d’images. Ces quelques paramètres sont vraiment le cœur et la base d’une première optimisation. Mais on peut aller plus loin, en revanche ce sera plus musclé !
6 objectifs à atteindre
Objectif n°1 : Limiter les chargements des scripts
L’écosystème de WordPress a l’habitude de charger tout un tas de scripts JS qui ne sont utilisés que sur une ou deux pages ou parfois même, pas du tout utilisé. C’est une perte du temps de chargement énorme, surtout si tu as comme moi des dizaines de plugins…
La solution est simple : je vais analyser les scripts indispensables et supprimer les non utiles. Pour ça, on va s’aider de GTMetrix pour analyser tous les fichiers chargés, et en particulier les scripts.
Mais avant ça, il faut désactiver temporairement les optimisations sur le JS et le CSS durant le temps de l’analyse. Je choisis mon article à analyser et je fais mouliner GTmetrix. Ce qui est intéressant pour le moment, c’est l’onglet Waterfall :
Maintenant je connais tous les fichiers qui sont chargés et ces 46 requêtes sont beaucoup, alors je vais réduire ça un supprimant simplement celles dont je n’ai pas besoin. Je me suis rendu dans le fichier functions.php de mon thème enfant pour ajouter cette fonction :
// Désactive tous les scripts inutiles du site
add_action( 'wp_print_styles', 'my_deregister_scripts', 100 );
function my_deregister_scripts() {
wp_deregister_script( 'twp-widget' );
wp_deregister_script( 'cta-load-variation' );
wp_deregister_script( 'spin.min' );
wp_deregister_script( 'inbound-analytics' );
wp_deregister_script( 'affcoups-script' );
wp_deregister_script( 'js-dialog_trigger' );
wp_deregister_script( 'jquery-intl-phone-input-js' );
wp_deregister_script( 'jquery-np-tooltipster' );
}Cette fonction permet d’éviter de charger tous les scripts que j’ai analysé comme inutile.
Adapte-là à ta configuration. Ce sont surtout des fichiers JS chargés avec les plugins et ils ne servent que dans des situations particulières. C’est justement cette étape qui m’a pris assez longtemps 😉
Objectif n°2 : Limiter les chargements des styles
C’est exactement le même principe que précédemment sauf que cette fois, ce sont les fichiers CSS inutiles qu’il faut supprimer du chargement. Moins le blog charge des requêtes, plus la page s’affichera rapidement.
Donc je retourne dans l’onglet Waterfall de GTmetrix, je peux filtrer par requêtes CSS :
Dans le fichier functions.php, j’ajoute une nouvelle fonction qui va se charger de supprimer tous les styles inutiles que j’ai identifié :
// Désactive tous les styles inutiles du site
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'inbound-shortcodes' );
wp_deregister_style( 'twp-widget' );
wp_deregister_style( 'lwptoc-main' );
wp_deregister_style( 'tooltipster-css' );
wp_deregister_style( 'tooltipster-css-theme' );
wp_deregister_style( 'snp_styles_reset' );
wp_deregister_style( 'jquery-intl-phone-input-css' );
}Cette étape concerne surtout la réduction du poids du fichier CSS optimisé avec Autoptimize.
Objectif n°3 : Penser au mobile !
C’est une réflexion que je me suis fait en remarquant que mon blog charge beaucoup de choses inutilement sur mobile, là où l’expérience utilisateur est bien différente.
Par exemple, les plugins Q2W3 et Table of Contents ne me servent strictement à rien sur les petits écrans. D’ailleurs, comme je l’explique dans cet article, j’ai décidé de ne plus afficher de popups sur les smartphones, ce sont des fichiers supplémentaires à supprimer du chargement.
En dessous des deux fonctions, j’en ajoute une troisième :
// Désactive tous les fichiers inutiles du site sur mobile
add_action( 'wp_print_styles', 'my_deregister_mobile', 100 );
function my_deregister_mobile() {
if(wp_is_mobile()) {
wp_deregister_script( 'js-cookie' );
wp_deregister_script( 'js-ninjapopups' );
wp_deregister_script( 'lwptoc-main' );
wp_deregister_script( 'q2w3_fixed_widget' );
wp_deregister_script( 'q2w3_fixed_widget-js-extra' );
wp_dequeue_script('jquery-ui');
wp_deregister_script('jquery-ui');
wp_deregister_style( 'snp_styles_builder' );
}
}Super, j’ai désormais un site qui charge encore plus vite sur mobile.
L’optimisation du blog WordPress sur mobile est vraiment importante, Google comme les utilisateurs ont des exigences de performance plus élevées.
Objectif n°4 : Utiliser un CDN
Les CDN sont des serveurs situés aux quatre coins du monde qui vont stocker chacun des fichiers comme les images, CSS, JS pour les retransmettre de façon optimisée en fonction de la localisation du visiteur qui navigue sur le blog.
Mon audience est majoritairement française comme le montre mon Analytics :
Si je décide de mettre en place un CDN pour l’ensemble de mes fichiers, c’est surtout pour éviter de charger localement des scripts volumineux. Par exemple les dépendances jQuery qui sont indispensables mais lourdes.
Quel service CDN choisir dans de cas ?
Je suis parti de mon côté sur KeyCDN qui est connu, fiable, simple à configurer et pas cher du tout. $4 par mois pour 100 GB de bande passante mensuelle.
Objectif n°5 : Choisir un plugin social
Un plugin de partages sociaux s’affiche sur tous les articles, il faut donc faire attention à ce qu’il ne plombe pas trop le poids total de la page.
De mon côté, je n’ai vraiment pas besoin d’un plugin complexe avec des tonnes de fonctionnalités. Tous ceux que j’ai trouvé ne correspondent pas à ce que je cherche malheureusement. Alors j’ai créé Social Share. Un tout petit plugin de partages sociaux.
Tu peux le voir en fin d’article :
3 boutons + 1 pour copier directement l’url de la page afin de limiter les scripts au strict minimum.
Objectif n°6 : Supprimer les Google Fonts
L’optimisation la plus récente sur laquelle j’ai travaillé concerne la suppression des polices chargées via Google Fonts. Pourquoi ? Car c’est une ressource qui peut-être assez lourde notamment quand on sait que mon thème, Maker Pro, en utilise 3 :
- Open Sans pour les paragraphes
- Roboto Condensed pour les titres
- Martel pour quelques éléments
J’ai cherché assez longtemps avant de trouver une police d’écriture que je pourrais utiliser à la fois pour les titres, les paragraphes et presque tous les autres éléments de mon site.
Et je suis tombé sur la police d’écriture premium Archia, c’est celle qui est affichée sur le blog. Bien sûr, ce changement nécessite de supprimer tous les appels à GFonts (il y a une option dédiée dans Autoptimize) et de modifier le CSS :
@font-face {
font-family: Archia;
src: url('https://europe-18ab1.kxcdn.com/wp-content/themes/maker-pro/fonts/archia-regular-webfont.woff') format('woff');
src: url('https://europe-18ab1.kxcdn.com/wp-content/themes/maker-pro/fonts/archia-regular-webfont.woff2') format('woff2');
}Je charge ainsi les deux formats les plus optimales WOFF et WOFF2 directement depuis mon CDN. Le changement est rapide et le chargement aussi.
Verdict, 100/100 sur PageSpeed ou pas ?
… Presque ! Les résultats affichés sur l’outil de Google après toutes ces optimisations sont de 96 pour mobile et 99 pour ordinateur :
Ce qui bloque, c’est le chargement initial de la page. WordPress est très lourd pour le premier affichage (FCP), c’est un point sur lequel je dois encore travailler.
Concernant le nombre de requêtes sur le blog, il passe de 46 à 20 :
Dès que je trouve des solutions à ce problème de WordPress lent, si possible gratuites, je mets à jour cet article avec les nouvelles données.
Bilan
C’est un challenge vraiment intéressant et passionnant mais pas évident au premier abord. Le point le plus difficile étant de déterminer un par un quels sont les scripts utiles et inutiles.
Et c’est la même chose pour les fichiers CSS, lesquels sont indispensables à un affichage optimal sur ordinateur et mobile ? Quelle question…
Ce dont il faut se rendre compte également c’est que tous les thèmes ne sont pas égaux. Certains sont réputés pour être ultra performants et légers comme ceux de GeneratePress, et d’autres n’incluent qu’une optimisation standard ou incomplète.
Les Core Web Vitals étant des facteurs qui vont devenir incontournables, il faudra désormais les prendre en compte dans notre stratégie SEO.
