Cet article démontre qu’il est possible de passer les Core Web Vitals de Google sans aucune extension de cache pour WordPress en prenant pour étude de cas le site seopress.org.
Nous parlons ici des 3 métriques utilisées dans le calcul de cet indice à savoir le Largest Contentful Paint (LCP), l’Interaction to Next Paint (INP) et le Cumulative Layout Shift (CLS).
Toutes ces optimisations ont impacté positivement notre note Page Speed, notamment sur mobile, en la passant de 60% à 96% (100% sur Desktop).
Avertissements
Ces techniques d’optimisations sont relativement « faciles » à mettre en place. Toutefois, il est nécessaire de bien les comprendre afin d’éviter tout effet de bord sur votre site. Nous vous recommandons d’effectuer une sauvegarde avant toute modification.
Les gains constatés peuvent varier d’un site à un autre. Beaucoup de critères dans la performance entrent en jeu. Il est recommandé d’effectuer plusieurs séries de tests via Page Speed et d’en faire une moyenne.
Enfin, nous ne prétendons en aucune manière être des « experts de la performance web ». Nous ne remettons pas non plus en cause le rôle des extensions de cache. Nous considérons simplement que, dans la performance web :
- votre hébergeur a un impact de 50 à 60% ;
- votre site WordPress (thème, extensions, qualité du code) un impact d’environ 30% (c’est sur ce deuxième point que cet article est dédié) ;
- et qu’une extension de cache un impact de 10%.
C’est parti pour notre liste d’optimisations mises en place sur seopress.org au fil des ans et des évolutions techniques apportées par nos navigateurs !
#1 – En-têtes « Expires »
Lorsque vous ouvrez une page web, de nombreuses ressources sont chargées comme les fichiers images, JavaScript, polices web, feuilles de styles CSS etc.
Un grand nombre de ces fichiers sont mis en cache par votre navigateur afin de charger plus rapidement ces ressources pour les prochaines URLs visitées.
En ajustant les en-têtes « expires » pour chaque type de ressources, on s’assure qu’elles sont suffisamment longtemps mises en cache par votre navigateur et ainsi éviter que certaines soient systématiquement chargées depuis le serveur du site.
Voici un exemple que nous utilisons sur seopress.org basé sur ce que propose la plupart des extensions de cache WordPress. Ce code est ajouté dans le fichier .htaccess (serveur Apache uniquement). Ajustez le selon vos besoins.
#2 – Cache des DNS
Si votre audience est internationale comme c’est le cas de seopress.org où nous avons de nombreux clients aux Etats Unis, Inde, Chine, Japon, Amérique du Sud en plus de toute l’Europe, la récupération des DNS mettait entre 50 et 400ms selon la distance entre notre serveur localisé en France et le pays du client. Une éternité juste pour obtenir la résolution du nom de domaine !
L’astuce a donc été d’héberger nos DNS chez Cloudflare. Leur offre gratuite permet une mise en cache automatique de ces derniers dans leurs 330 data centers répartis sur tout le globe.
De plus, tout changement dans les DNS est immédiat : une vraie plus value et gain de temps !
Résultat : des DNS qui mettent en moyenne 4 à 20 ms à charger. Vous pouvez effectuer un test de performance sur DNS Performance par exemple.
#3 – Cache des médias
Cloudflare, encore lui, propose également dans son offre de gratuite, une mise en cache de vos médias. C’est à dire qu’au lieu de charger vos images, vidéos, documents depuis votre serveur, c’est Cloudflare qui s’en charge. Et ce en toute transparence. Pas besoin de modifier vos URL, votre configuration serveur, ou d’installer une extension WordPress de plus pour profiter de cette fonctionnalité.
#4 – Transients WordPress
L’API des transients de WordPress est tout simplement un système de cache en base de données où vous stockez de façon temporaire des données. Chaque entrée a une date d’expiration qui lui est propre.
Dans notre cas, nous avons utilisé ce système pour la génération de nos deux menus de navigation (header et footer). Ceux si sont construits dynamiquement via des WP_Query, des walkers, et autres requêtes. Sauf qu’ils n’ont pas vocation à changer selon les pages, et leurs données étant peu changeantes, c’est idéal de stocker tout ça dans des transients.
Voici un exemple très simple où le fichier responsable de la génération du HTML du menu principal est stocké dans un transient pour une durée de 24 heures.
Nous avons appliqué ce procédé à d’autres éléments du site avec succès ce qui nous a permis d’économiser 100 à 300ms par chargement d’URL.
#5 – Optimisation des webfonts : polices variables, chargement asynchrone et preload
SEOPress.org utilise 2 webfonts :
- l’une est hébergée par Adobe Fonts (degular)
- la seconde directement sur notre serveur (une Google Font très connue du nom de Inter).
La première étape consiste à charger de façon asynchrone nos deux polices en venant modifier la ligne d’appel de la ressource comme ceci :
La deuxième étape est de pré-charger l’URL Adobe Fonts (anciennement TypeKit). Celle ci ne pouvant être hébergée sur notre propre serveur pour des raisons de licence (à bannir mais c’est un autre sujet). Voici un exemple de code utilisé sur seopress.org :
Ce code vient ajouter ces lignes dans le header de vos pages :
<link rel='dns-prefetch' href='//use.typekit.net' /> <link href='https://use.typekit.net' crossorigin rel='preconnect' />
La troisième étape, et probablement la plus impactante sur le plan de la performance est d’utiliser les fonts variables.
Cette évolution dans le chargement des polices web est assez récent. Toutes les polices ne sont pas dites « variables ». Par chance, Inter, notre police Google, l’était.
Cela consiste à charger, via un seul fichier de type woff2 ce qui est uniquement nécessaire en terme de graisse, variations de styles etc. Moins de requêtes serveur, fichiers plus petits donc plus de performances !
Notre appel est effectué de la sorte via CSS :
Quand au fichier woff2, il est récupérable depuis les serveurs de Google Fonts.
#6 – Décharger les JS et CSS inutiles
Des dizaines de fichiers CSS et JS sont chargés par WordPress, votre thème et vos extensions, et, la plupart du temps de façons inefficace. En construisant un thème sur-mesure, nous nous assurons de conditionner le chargement de chaque JS et CSS via les conditional tags de WordPress.
Nous déchargeons chaque fichier inutile (par exemple des CSS que nous intégrons déjà dans notre feuille de style CSS principale) à l’aide du hook wp_enqueue_scripts et des fonctions wp_dequeue_style (les CSS) et wp_dequeue_script (les JS).
Voici une toute petite partie du code de ce qui est décrit précédemment comme exemple :
Cela doit évidemment être adapté à vos besoins !
#7 – Chargement différé des scripts JS
Certains scripts JS n’ont pas besoin d’être chargés dès le début, on peut les différer, c’est ce que fait ce code. Là encore, à utiliser avec prudence, il faut bien déterminer ce qui doit être « bloquant » ou non, identifier les dépendances etc.
#8 – ACF JSON
Construit il y a maintenant 4 ans, seopress.org repose énormément sur l’extension Advanced Custom Fields. Bien que très pratique dans l’ère pre-Gutenberg / FSE, elle peut avoir un impact significative sur les performances de votre site, en fonction du nombre d’appels effectués dans vos différents templates via get_field ou get_sub_field pour des champs repeaters par exemple.
Une façon d’optimiser cela facilement est d’utiliser la fonctionnalité Local JSON d’ACF. Chaque groupe de champ créé via ACF est stocké dans un fichier JSON.
Résultat : votre serveur lit un fichier statique plutôt que votre base de données ce qui est bien plus rapide !
Pour activer le stockage local JSON pour ACF, lisez ce tutoriel.
Gain Page Speed moyen : 10%
#9 – Live chat Help Scout
L’ensemble des pages de notre site propose à nos visiteurs en un clic de poser leurs questions via un système de live chat. Celui ci est fourni par Help Scout. Le problème rencontré c’était sa lenteur de chargement, et ce, même si aucune interaction de la part de l’utilisateur n’était entreprise sur le beacon.
L’astuce ici a donc consisté à créer notre propre bouton de questions avant-vente. Au clic par l’utilisateur sur ce dernier, nous chargeons manuellement le script Help Scout associé. C’est l’API Beacon JavaScript disponible ici que nous avons utilisé pour cela.
Le script est donc exécuté à la demande uniquement, ce qui a eu pour effet de réduire drastiquement le temps de chargement des pages (surtout que des requêtes externes sont effectuées pouvant entrainer un blocage du chargement si lenteur du côté d’Help Scout).
Bonus – optimisations diverses
Pour terminer cette liste, voici en vrac d’autres optimisations techniques mises en place :
- OPcache sur le serveur dédié ;
- compression GZIP / Brotli ;
- HTTP/3 ;
- blocage des crawlers d’outils SEO et d’entrainement à l’IA via la fonctionnalité d’édition du robots.txt de SEOPress ;
- suppression / désactivation complète de la partie « commentaires » du blog (moins de JS à charger, plus aucune requête externe pour les Gravatars etc).
Nous espérons que cette série de 9 astuces (+ 1 bonus) vous aura aider dans l’optimisation des performances de votre site WordPress, le tout sans utiliser d’extension de cache. Les résultats que nous avons obtenu sur seopress.org sont sans appel comme mentionné dans notre introduction. Ce n’est pas sans rappeler que ce fut un travail de longue haleine, de nombreuses heures de tests et d’efforts pour parvenir à ces résultats. Travail qu’il faut sans cesse mener et actualiser au fil des évolutions du web en général.
