Étude de Cas : Comment April Moto a Optimisé son Site WordPress
En 2021, April Moto m'a contacté afin d’optimiser la web performance du site Wordpress de leur entreprise. D'après les outils de test synthétiques basiques, le score de leur site était mauvais. Les core web vitals n'étaient pas validés et présentaient un problème de FCP, LCP et Total Blocking Time.
Ma stack d’optimisation webperf Wordpress est composée essentiellement de 3 plugins :
- , mon outil préféré de compression d’images et de transformation en masse vers le format WebP ;
- , qui permet d’appliquer un grand nombre d’optimisations de webperf comme la minficiation des fichiers CSS et JS ou le lazy-loading des images ;
- , un plugin léger qui permet de mieux maitriser les ressources chargées sur le site, des taxonomies voire sur des pages unitairement.
Optimisation des images
La partie la plus simple d’une optimisation webperf est l’optimisation des images Wordpress. Avec un plugin comme Imagify, il est possible d’optimiser en masse toutes les images déjà uploadées sur le site, mais aussi celles qui seront mises en ligne par la suite. L’optimisation est faite en temps réel, de manière complètement transparente pour l’utilisateur.
Imagify permet également la transformation des images au format WebP, afin d’économiser jusqu'à 30% de leur poids sans perte de qualité percetible à l’oeil humain. Pour permettre le meilleur support aux utilisateurs, Imagify va réécrire les URLs du site pour diffuser le format WebP d’une image s'il existe, et garder le format original dans le cas d’un navigateur incompatible.
Configuration de WP Rocket
L’extension WP Rocket propose un grand nombre d’options, je détaillerai dans un article dédié la configuration que j'utilise régulièrement pour mes optimisations webperf sur Wordpress bien qu'il soit important de garder à l’esprit que chaque site et thème sont différents, il faut adapter la configuration et penser au fine-tuning pour chacun des environnements techniques en production.
Lazy-loading des images
WP Rocket propose une fonctionnalité très simple d’utilisation pour les médias. En deux clics, le lazy-loading s'effectue sur toutes les image du site et sur les iframes YouTube présentes sur les pages d’April Moto. Cette option permet de réduire fortement le nombre d’images chargées, mais présente des défauts simples à corriger avec une optimisation plus aboutie.
Par défaut, toutes les images étaient lazy-loadées sur le site, ce n'est pas idéal pour améliorer le LCP puisque le navigateur ne sait pas quelle image commencer à télécharger tant que le rendu de la page n'a pas commencé. Pour palier à ce problème, le champ d’exclusion des images a permis de définir des règles d’identification des images au dessus de la ligne de flottaison :
- En premier lieu, j'ai repéré le nom du fichier du logo qui a été ajouté aux exclusion du lazy-loading ;
- L’image à la une des articles présentait une classe unique, j'ai pu l’utiliser via un sélecteur approprié pour exclure toutes les images principales des articles du site.
Lors de cette optimisation, j'ai remarqué que le logo présent également dans le footer était identifié comme pouvant être lazy-loadé par Google Pagespeed : il s'agit ici d’un faux signal. Puisqu'il est chargé dans le header, lors de son chargement en footer le logo est déjà dans le cache de l’utilisateur et ne sera téléchargé qu'une seule fois.
Étant donné que le thème April Moto était développé sur-mesure, j'ai pu définir une classe CSS .no-lazy et l’ai appliquée sur tous les médias above-the-fold pour assurer la pérénité de cette optimisation.
Des assets CSS et JS optimisés
WP Rocket permet également d’optimiser les ressources CSS et JS. En quelques clic, les ressources CSS et JS du site étaient minifiées, un attribut defer était présent sur tous les scripts du site, débloquant ainsi le rendu de la page à l’utilisateur.
Pour aller un peu plus loin, l’option de reporter l’exécution du Javascript a permis de libérer le processeur de l’utilisateur et de réduire le Total Blocking Time d’April Moto. Les fichiers ne sont exécutés qu'une fois une intéractions effectuée par l’utilisateur sur la page (mouvement de souris, clic, saisie au clavier).
L’utilisation des filtres Wordpress
Tous ces conseils sont issus de configurations simples bien qu'elles demandent une rigueur et de temps afin d’être adaptées, vous planterez certainement votre site plusieurs fois en tentant de les appliquer vous-même, mais tous les conseils sont accessibles à un utilisateur même sans bases techniques.
Avec ces prochains conseils, j'ai pu améliorer la web performance du site Wordpress April Moto dans ses retranchements.
Préchargement de l’image à la une
En utilisant la miniature des pages et le filtre get_the_post_thumbnail_image, il est possible de précharger l’image principale de la page en ajoutant le code suivant dans le fichier functions.php de votre thème (ou dans une extension Wordpress dédiée).
add_action('wp_head’, 'pauld_preload_main_image', 11);
function pauld_preload_main_image()
{
if (get_the_post_thumbnail_url()) {
echo '<link rel="preload" href="'.get_the_post_thumbnail_url(get_the_ID(), 'full’).'" as="image">'."\n";
}
}
Optimiser le code CSS
2 filtres natifs sont très utiles pour optimiser la performance sur Wordpress, le premier permet de ne charger que le CSS des blocs Gutenberg utilisés :
add_filter('should_load_separate_core_block_assets', '__return_true');
En modifiant la valeur du styles_inline_size_limit, il est également possible de forcer le CSS à être envoyé en externe au lieu de code inline dans la page, qui ne serait pas mis en cache ni optimisé par WP Rocket.
add_filter('styles_inline_size_limit', '__return_zero');
Optimisation des ressources utilisateur
La bande passante réseau et la puissance du device de l’utilisateur brident les performances d’un site si elles sont sur-utilisées. Pour éviter des saturer les ressources utilisateur, il est recommandé de ne livrer que les ressources strictement nécessaires à l’utilisation d’une page web.
Avec Perfmatters, il m'a été possible d’exclure certaines ressources de pages où elles n'étaient pas utilisées. Par exemple, les CSS et JS du formulaire de contact étaient chargées sur toutes les pages du site. J'ai également fait en sorte que les ressources d’un plugin permettant de mettre en forme des tableaux dans les pages du site ne soient chargées que sur les pages de la taxonomie où elles étaient utilisées.
L’extension Perfmatters permet d’obtenir une granularité très fine dans sa configuration, il est possible de supprimer une ressource de tout le site, mais aussi de le faire page par page.
Optimisation des polices d’écriture
April Moto appelait des fontes depuis un domaine externe. C’est une mauvaise pratique aussi bien en termes de web performance qu'au .
L’import local des fontes et le preload correctement effectué a permis d’améliorer le temps d’affichage du texte de près de 700ms d’après Google Pagespeed, c’est une belle progression du FCP !
Optimisation de la configuration serveur
La communication avec le serveur est un point très important en web performance, April Moto travaille avec un fournisseur infogérant. Toute prestation pour une optimisation de web performance Wordpress comprend la communication avec les partenaires et fournisseurs du client pour qui je travaille.
Support du protocole HTTP/2
HTTP/2 est sorti en 2014, la proportion d’utilisateurs compatibles est de près de 95% aujourd’hui. L’intérêt principal de ce protocole réseau est qu'il permet de télécharger plusieurs fichiers en parallèle contrairement à HTTP/1 qui ne télécharge qu'un fichier à la fois.
La mise en place d’HTTP/2 a permis de faire bondir le score Pagespeed d’April Moto de 92 à 99/100.
Déploiement de l’algorithme compression Brotli
Brotli est un algorithme de compression des qui permet d’accélerer le temps de chargement des ressources et fichiers textes du site. Très performant, Brotli permet de réduire le poids des fichiers de 14 à 21% d’après Facebook et Dropbox.
En mettant en place ces 2 optimisations simples sur le serveur, le score Pagespeed a bondi de près de 13 points !
Résultats de la prestation d’optimisation webperf Wordpress
Avec toutes ces optimisations en place dans le site, l’optimisation webperf Wordpress du site d’ a permi un passage du score Pagespeed de 40 à 99, mais surtout une validation des données de terrain CrUX de Google 28 jours plus tard sur l’ensemble des pages du site.
Quelques semaines après l’optimisation, le client est revenu vers moi pour me demander un conseil concernant l’ajout d’une vidéo en haut de leur page d’accueil qui avait impacté le score de leur page. Après une analyse rapide, j'ai remarqué que le format vidéo pouvait être optimisé mais surtout qu'il n'y avait pas eu de mise en place d’une miniature sur le player via l’attribut thumbnail.
Ces 2 modifications ont permis d’améliorer le score Pagespeed du site Wordpress et de s'assurer de la pérénité du score de performance dans le temps.
Vous n'avez pas les connaissances nécessaires pour appliquer ces conseils, ou souhaitez déléguer ce travail d’optimisation à un expert web performance ? , je vous accompagnerai avec plaisir sur toutes vos problématiques de webperf Wordpress !