Sommaire
Ici je ne parlerais que des pratiques mises en place pour rapidifier le site d’un domaine touristique situé à côté de chez moi, à Bras: Un magnifique et très grand domaine nommé Une Campagne en Provence.
Leur site Web, créé en 2016 par une agence Suisse est assez rapide (pour un visiteur humain) car l’hébergeur est de bonne qualité Mais le Google pagespeed le puni d’une note catastrophique de 42% (et encore sous Desktop). Dommage je n’ai pas gardé la capture d’écran. Le but sera de propulser ce score à au moins 90% alors même que le site a plusieurs défauts:
- Un thème de type hôtellerie gourmand (Leisure de Curly thème) avec de nombreuses polices chargées ainsi que de nombreuses icônes fontawesome de diverses versions
- En page d’accueil, un Slider et un formulaire complexe, une brochure PDF virtuelle
- Le slider est composé d’images au format JPG et d’une vidéo extirpée de Youtube (avec les scripts qui vont avec)
- 39 (oui..) extensions WordPress, certaines obsolètes
- Un code CSS largement modifié pour coller aux envies des gérants du domaine; Ce code CSS est géré par..3 plugins WordPress!
- Pas de plugins de cache
Heureusement que le Domaine touristique communique beaucoup via Facebook, Booking, TripAdvisor car le placement Google (pagerank) défère le site Web loin dans le classement, malgré l’ampleur du domaine (8 hébergements allant du studio au format maison).
Au final c’est un cas d’école; Il y a tout à faire au niveau CSS, plugins, Javascript, images, caching, lazyload, deferring, version PHP et j’en passe… Je commence par les plugins en en désactivant certains inutiles, certains faisant doublon. Je vais aussi changer certains plugins pour des versions plus légères.
Réglages plugins WordPress
Suppressions et Dédoublonnage
Le Plugin Accelerated mobile page est supprimé; Google ne privilégie plus ce format minimaliste de page Web.
Le thème LEISURE de Curly thème supporte l’ajout des API Keys Google Maps, et Google Analytics.. Je ne comprends pas pourquoi l’agence Suisse a donc installé les plugins API KEY for Google maps, Site Kit by google et GA Google Analytics: Voilà donc 3 extensions nettoyées.
2 plugins de customisation CSS utilisés alors que le thème dispose d’une option pour cela.. Je récupère les codes CSS de ces deux plugins, les rentrent dans l’option dédiée du thème et suppriment les extensions de trop. J’en profite pour nettoyer le CSS avec l’IA ChatGPT et rendre le code plus lisible via CSS Beautifier.
Divers plugins sont aussi supprimés: Browser theme color (pour modifier sur mobile la palette de couleur des navigateurs), Disable comment (utile mais doublon avec le futur plugin d’optimisation Perfmatters que je détaillerais plus tard), Loco Translate, Simple Weather (on se fiche du temps en Provence il fait toujours beau, du moins en saison touristique), SSL insecure content fixer (Je ferais la chasse au URL non https manuellement et les corrigeraient). Un plugin de conversion de monnaies non utilisé.
Optimisation par réglage des plugins
Compositeur de page
L’editeur WYSIWYG du site est WP bakery, c’est un assez bon choix car il est performant. Le seul réglage disponible est de rendre les polices Google locales en laissant l’extension télécharger automatiquement les polices utilisées; ce que j’applique pour éviter un carton jaune par Google pagespeed.
Slider
Un Slider est actif en page d’acceuil, tout slider est un tueur de performance aux yeux de l’outil Google pageSpeed mais il faut que je m’en accommode car mon client le veut malgré tout. Celui-ci est du moins de qualité car il s’agit de Slider Revolution. Ce blockbuster bourré de fonctionnalités en tout genre est pourtant codé selon les meilleurs pratiques.
J’active dans les options globales toutes les coches de la section Page loading optimization: Script in Footer; Defer Javascript, Load Asynchronously sauf Load Youtube API key (car la vidéo présente dans le slider sera placée en locale dans la médiathèque: Les scripts Youtube sont donc inutiles).
Dans Module optimization j’active Force Viewport loading, ce qui signifie que le slider ne se charge que si le slider est dans la fenêtre d’affichage du navigateur (vous me direz.. Le slider est dans l’entête de la page d’accueil mais cela pourra servir potentiellement pour des slides plus bas, sur d’autres pages). L’autre tweak activé est le mode Smart dans Default Lazy Loading: Ainsi seule la 1ère image du slider sera chargée, les autres le seront en différé. Le cache de Use internal caching est inutile, il sera géré par le plugin de cache choisit W3 Total cache dont je parlerais ultérieurement.
Onglet Fonts: L’option Enable Google font download est placée sur Disable; Aucun texte n’apparait sur le Slider.
Voilà pour les options globales, maintenant passons aux réglages des photos composants le slider. Les belles photos du domaine sont au format JPG, je vais les redimensionner et les convertir en WebP, mais pour cela j’ai besoin de vérifier la largeur en pixel du slider: 1240 px (dans options globales de Slider Revolution).
Comme logiciel de retouche d’images sous Windows, j’utilise Photoscape X, que j’apprécie non seulement pour ses possibilités de conversion en WebP mais aussi pour tout un tas d’autres possibilités; Ajout de texte, collages, et surtout l’édition en lot qui propose en mode gratuit des fonctions souvent payantes sur d’autres applis.
Les images seront donc retaillées à 1240px de large et 750px de hauteur (un slider assez haut pour magnifier les ciels). Dans la mesure du possible. Je convertis les JPG en WEbP avec le taux conseillé par google; 85%. Et comme je l’ai dit plus haut, la vidéo est directement chargée en local; Auparavant celle-ci était récupérée sur Youtube via un script gourmand. Le format vidéo est déjà parfait de base: MP4.
Il y a mieux mais il faut penser aux utilisateurs d’appareils Apple, et les diverses tablettes et smartphones qui pourraient ne pas décoder des formats trop récents. Dans le même esprit la conversion des photos en AVIF aurait été idéale, mais Microsoft Edge traine la patte niveau compatibilité.
Le formulaire
Le plugin de formulaire était à l’origine Ninja Forms, il gérait le formulaire avancé de demandes de réservation en page d’accueil ainsi que le formulaire basique en page Contact. Ce plugin est performant mais malheureusement le choix des développeurs du thème fait que, si je désactive un autre plugin nommé Xtender (qui est une extension obligatoire de fonctionnalité du thème), le formulaire de demande disparait de la page d’accueil !
C’est un moindre mal car mes recherches montrent que Fluent Forms est plus performant. De plus il peut s’afficher nativement sous forme de Popup lancé depuis un bouton sans devoir s’alourdir d’un énième plugin spécialisé Popup. L’autre gros avantage et qu’il m’autorise à virer la lourde authentification Recaptcha de Google car Fluent Forms intègre un anti Spam Honeypot (cf réglages globaux).
Voilà pour les réglages des Plugins; D’autres plugins sont en place (bouton de partage, bannière RGPD, Switcher de langue, etc. Mais les scripts de ces derniers pourront être décalés au chargement de la page, semi-chargés selon le code utile à la fenêtre d’affichage, voir supprimés du chargement grace à une arme d’optimisation massive: Perfmatters.
Plugin principal de performance Perfmatters
Le filtrage Regex des exclusions de script JS et CSS sur Perfmatters
Pourquoi Perfmatters, au lieu de WP Rocket ou Flying Press? C’est parce que en plus d’avoir les mêmes fonctions que les autres plugins, Perfmatters a le pouvoir de supprimer le chargement des fichiers CSS et JS par page. Le plus gros challenge n’est pas de trouver sur quelles pages tel ou tel script de plugin est inutile, je sais très bien que le Slider n’est à charger que sur la page d’accueil de chaque langue. Mais plutôt de créer un REGEX global pour ne pas avoir à rentrer « manuellement » ces exclusions page par page (env. 58 pages ici).
Exemple sur la capture ci-dessous qui représente le Management des scripts par Permatters; Le plugin de conversion de monnaie n’est utile que sur les pages dont l’URL contient « /rooms/ » (y compris les Slashs). Je règle Location sur Disabled pour toutes les pages du site, sachant que si je rentre une Exception, celle-ci prendra le dessus sur ce 1er réglage. Regardez bien le Regex rentré:
- Il comporte un slash en tout début quel que soit le reste du code
- Un antislash pour échapper le 1er slash de l’URL (sinon il est considéré comme du code Regex)
- Le mot rooms qui est le segment d’URL choisit
- Un antislash encore pour échapper le Slash de l’URL
- Un autre slash, obligatoire comme pour le 1er slash, pour signifier à Permatters que le Regex est terminé
Astuce: On peut tester ses Regex sur le site Regex 101.
PS: Le MU Mode est activé; Ce mode de Permatters est très puissant car, sous réserve de placer un script à un endroit précis en FTP , les plugins seront non seulement supprimés, mais aussi leurs appels à la base de donnée WordPress, et les CSS et JS en dur dans le code HTML pourront aussi être traités.
C’est une autre paire de manche lorsqu’il m’a fallu trouver le bon Regex pour le formulaire de demande de réservation; En effet les pages où s’appliquent les exceptions sont disparates: Cela peut être une page sans ses URL enfants, comme une page dont ses sous-pages doivent être incluses.
Les exceptions de page dans lesquelles le script ne doit pas s’étendre aux segments enfants sont : La page d’accueil par défaut du site (provence4u.com), et les Slugs (segments d’URL) suivants: /fr , /deu , /es , /jap.
Les exceptions pour lesquelles la restriction n’a pas d’importance sont les pages: accommodation; hebergement; etc. Le Regex satisfaisant ces directives fait peur:
/\/fr\/$|\/de\/$|$|\/es\/$|\/ja\/$|\/(accommodation|hebergements|unterkunft|rooms|rates-booking|tarifs-reservation|tarife-reservierung|links|liens|enlaces|contact|kontact)\//
Explications: la 1ère partie du Regex, avec fr, de, ja applique les exceptions aux pages /fr, /de, ja sans s’étendre aux chemins enfants (grace à \/$). chaque directive autonome est séparée par le signe | .
Vous voyez aussi la directive |$| : Elle est là pour impliquer la page racine du site (page provence4u.com).
La 2ème partie du code est |\/(accommodation|hebergements|etc)\// . Le signe | au début indique à Perfmatters que cette partie doit être traitée de façon autonome.
La logique du signe | est différente quand il est placé entre des parenthèses: Sa nature est alors de dire que le Regex doit rechercher une correspondance avec l’un des termes spécifiques énumérés entre les parenthèses. En fait, ils s’agit de la concaténisation de plusieurs Regex, exemple: /\/accommodation\// ; /\/rooms\// ; /\/hebergements\// .
Voyons donc un dernier exemple pour le.. Plaisir, il concernera le Slider. Les scripts utiles générés par le plugin Revolution Slider ne doivent se charger QUE sur les pages d’accueils des différentes langues. Ces pages d’accueils sont:
- provence4u.com (version par défaut, Anglais)
- provence4u.com/fr/
- provence4u.com/de/
- provence4u.com/es/
- provence4u.com/ja/
Là aussi le code Regex doit se limiter strictement aux pages choisies sans s’inviter chez une URL enfant, voici l’explication du script:
- Le signe / pour dire que le Regex commence.
- $ pour traiter la page d’accueil par défaut (page racine donc pas d’éléments renseignés à part le signe $ qui impose de s’arrêter strictement au niveau de la page racine du site).
- Le Signe | indique que le code suivant est à traiter en autonomie du script précédent.
- \/ pour donner un sens littéral au signe slash.
- (fr|de|es|ja) chaque segment entre les signes | doit être traité à part de façon séquentielle en incorporant le codage Regex placé avant et après chaque segment (délimité par la barre | ), ainsi le décodeur interne du Regex lira: \/fr\/$/ puis \/de\/$ et ainsi de suite.
- \/ : Vous aurez bien sûr reconnu l’échappement d’un slash.
- Le signe $: Le traitement s’arrête aux chaines spécifiées sans s’étendre aux sous-pages.
- Le signe / pour « fermer » le Regex (END).
Chargement des scripts JS à l'interaction utilisateur
Traduction: Ne charger les Javascripts facultatifs qu’au clic ou mouvement de souris du visiteur.
La 1ère technique de filtrage -pour les scripts externes- est simple: Il suffit de lancer le google developper Tool (CTRL+MAJ+I sous Chrome ou Edge ou Firefox) , se rendre sur l’onglet Réseau est classer par URL: Déjà, les scripts externes (ici de media.datahc.com; static.addtoany.com; googletagmanager.com) peuvent être renseignés dans le champ de Perfmatters > Assets > Delayed Scripts .
Nul besoin de taper l’URL complète: Le segment stable et discriminant de l’URL suffira.
Exemple pour https://www.googletagmanager.com/gtm.js?id=GTM-W8J3LTM où le renseignement sur Perfmatters de googletagmanager.com suffit à discriminer toutes les URL semblabes.
Par contre le Script externe Webfonts.js est requis pour la police texte; Il n’est pas à différer.
Méfiance aussi pour les URL Google Recaptcha si vous en avez; Ils sont là aussi requis pour le bon affichage du formulaire et ne supportent pas le chargement différé.
La 2ème technique est plus laborieuse. J’ai fait de nombreux essais de bloquage des scripts via le Google developper Tools, en cliquant droit sur le JS mystérieux et en choisissant l’option très mal traduite « Domaine de demande de bloc ». Cela va bloquer le chargement du JS lors de l’actualisation de la page, et après refresh de la page révéler si l’absence de ce JS a délité l’aspect du site.
Attention de bien tester, je pensais que mes exclusions, n’altérant pas l’aspect visuel du site m’autorisait à entrevoir le bout de mes nombreux test et à déclarer triomphalement la fin de mon travail au client, mais en cliquant pas hasard sur une image qui s’ouvrait d’ordinaire dans un beau Popup légendé, celle-ci apparaissait désormais dans un autre onglet du navigateur!
Une autre mauvaise surprise fut de constater que les icônes magnifiants les coordonnées de bas de page laissaient place à de vilains petits carrés malformés.
Au final j’ai restreint à l’action utilisateur le chargement des fichiers Javascripts ci-dessous: Une douzaine de JS. J’ai aussi validé l’option très classique de déport des appels JS en pied de page (sauf jquery, nécessaire ici à diverses extensions) .
D’après le créateur de Perfmatters ces options sont complémentaires et tout à fait compatibles; Les JS ne pouvant être placés en champs Delay sans casser le site seront mis en file d’attente en pied de page via le hack Defer Javascript, ce qui améliorera le score de Render-blocking et aidera à passer la barre de 90% sous Google PageSpeed:
https://developer.chrome.com/docs/devtools/coverage?hl=fr L’option Coverage de Google developper tool (outils de reporting du taux d’utilisation en pourcent des fichiers JS et CSS sur une page Web spécifique) ne m’a pas vraiment aidé.. Ce n’est pas parce qu’un fichier JS est utilisé à 5% sur telle ou telle page que la portion de code usitée n’est pas importante; Dans mon expérience au travers de provence4u.com je n’ai du considérer que les scripts qui ont un taux d’utilisation de.. 0%.
Plugin Google analytics
Figurez-vous qu’intégrer Google Analytics fait baisser votre score Page speed, car il considère que son délai d’expiration est trop bas! J’ai supprimé tout plugin lié à une intégration Google (Youtube, Recaptcha, Analytics) car le thème est déjà équipé pour accueillir en natif des différentes Secret Key, Api key, Public Key, etc.. Mais cela n’enlève rien au carton rouge de Google pagespeed pour une fonction provenant du même éditeur ce qui est un comble.
Je supprime l’intégration Analytics du thème pour le déplacer dans un module spécial de mon plugin de performance préféré: Dans Réglages > Analytics. Actuellement le réglage du script type doit être sur gtag.js V4 (nous sommes en Décembre 2023). Je place le script en footer, contrairement au recommendations de Google à ce sujet: Cela évite de comptabiliser les crawlers comme visiteurs humains et d’améloirer le score de vitesse.
Les Googles fonts
Je n’ai pas eu de réglage particulier à effectuer grace à l’option de localisation de polices Google intégré à l’éditeur de site WP Bakery. Dans l’option idoine de Perfmatters je n’ai eu qu’a cocher le Tweak Display: Swap. Sans cette option, l’affichage du texte sur le site aurait été occulté durant quelques millièmes de seconde, sans être très temporairement et indiscernablement remplacé par une police locale.
Ce problème qui ne semble pas en être un est sanctionné par un score Google pageSpeed moindre..
Lazy load (ou chargement différé des images)
Tout le monde connait cette option, Perfmatters (pour lequel je vais demander des licences gratuites vu tout le bien que j’en dit) est parfaitement équipé pour cela.. Mais il y a une subtilité dont on parle peu (du moins dans les dîners) C’est qu’il faut désactiver le chargement différé des images placés en Header, comme le nécessaire logo, le background, (ici ce sera la 1ère illustration du Slider).
Dommage pour les quelques pouièmes à gratter en PageSpeed mais nécessaire pour l’expérience visiteur. Dans Chargement différé je place le curseur sur 2 images en regard de Exclude Leading Images.
L’option de donner à toute image des attributs de hauteur et largeur est indispensable; C’est un manque éliminatoire pour Page Speed car, loin de se contenter de ne considérer que la vitesse de chargement des pages, PageSpeed prend garde à l’expérience utilisateur, cette négligence est susceptible de provoquer de désagréables modifications de mise en page au cours de chargement et / ou à l’occasion du déroulement des pages Web.
Supprimer ou temporiser le CSS inutilisé
Cette fonction va en moyenne diminuer l’impact de 16.60% sur les différents indicateurs de PageSpeed. L’impact CSS est si important que l’analyse PageSpeed dévoile le pourcentage de CSS inutilisé par feuille de style chargée.
Les deux meilleurs options pour supprimer le CSS inutile est: De désactiver les plugins non nécessaires depuis le Script Manager de Perfmatters, et d’utiliser l’option Coverage de Goole developper tool (qui dans le cas de provence4u.com n’a pas révélé de futilitées majeures) pour revenir dans le Script Manager et revisiter les CSS chargés.
Sous Google developper Tool, je peux bloquer le chargement des CSS comme pour les Javascripts et vérifier si cela casse l’aspect graphique ou les fonctionnalités de provence4u.com.
Après et seulement après cela, j’ai consulté dans Perfmatters l’onglet Assets pour cocher l’option salvatrice Remove Unused CSS.
Là aussi un raffinement vaut d’être entrepris: Opter pour le placement du CSS vital dans un fichier séparé (Used CSS methode: File). Cela va certes diminuer le score de quelques dizièmes de pourcents mais les visiteurs de provence4u auront l’impression d’un site plus rapide grace à la parrallélisation des requêtes https et la mise en cache, dans ce cas plus performante.
L’option Delay est validée; Semblable à l’option sur les JS; Le CSS inutilisé dans la fenêtre d’affichage est sans doute requis pour le reste de la page Web, plus bas. Il sera chargé lors d’une action de l’utilisateur.
Autres options de Perfmatters
Dans Preloading l’option Instant Clic est intéressante pour l’expérience utilisateur: Si le visiteur du site survol un lien, la page Web attenante est chargée.
Dans Generale, j’ai pratiquement désactivé toutes les fioritures WordPress, sauf Jquery Migrate: Alors que le site et les plugins ont étés mis à jour, étrangement, son bon affichage requiert ce Javascript qui sert d’ordinaire à assurer la compatibilité d’un WordPress contemporain avec des librairies Jquery obsolètes (EX: Utilisées par un vieux plugin qu’on ne pourrait pas interchanger).
Les images
J’ai pris la peine de convertir les nombreuses images de la Gallerie photo en WebP, ainsi que celles du Slider et du Logo. Pour le reste les images sont nativement petites et d’assez basse résolution. L’application Windows utilisée est PhotoscapeX donc j’ai vanté les mérites (beaucoup) plus haut.
J’ai voulu essayer un plugin formidable, Optimole, gratuit pour un nombre de 5.000 visiteurs par mois. Ce plugin évolué change toutes les images d’un site en version WebP ou même AviF selon un algorithme tout aussi performant, délivrées depuis leurs propres serveurs. De plus les images sont retaillées aux dimensions des cadres les contenants (adieu l’upscaling).
Le gros problème est qu’en mode gratuit la bande passante n’est pas prioritaire, et j’ai même constaté malgré la conversion des illustrations, une baisse légère du score PageSpeed. Le tarif mensuel de Optimole étant à ce jour de Décembre 2023 à env 19€/mois j’ai passé mon chemin.. J’aurais sans doute changé d’avis si le site provence4u.com était truffé de photos en haute résolution.
Le plugin de cache
Perfmatter n’est pas une extension de caching; J’ai donc fait de longues recherches pour dégoter un bon plugin de cache, et je suis tombé sur un blog expert en matière d’optimisation WordPress. Le plugin de caching recommandé est W3 Total Cache.
Je le connais car je l’ai utilisé il y a longtemps mais je fus rebuté par son ergonomie, type « mode avancé » et la pléthore d’options alors disponibles, toutes plus sibyllines les unes que les autres.
Mais depuis cela a bien changé, au bénéfice d’un réglage au pas-à-pas semi-automatisé, où les possibilités du serveur hébergeant le site sont testées une à une pour proposer les meilleurs reglages de cache possibles.
A noter que le système de cache Redis est à privilégier si votre hébergeur le propose même si W3 Total cache montre que memcache semble plus performant: Redis est un caching beaucoup plus évolué, hautement compatible avec des fonctions dynamiques comme les paniers, le contenu dynamique chargé à la volée via AJAX etc..
Outils et astuces utilisées
Outre le Google developper tools, sa fonction de blocage des scripts et celle de coverage JS et CSS, j’ai utilisé une extension Chrome nommée Blue button, utile pour lister les JS et CSS du site ainsi que révéler les images sans balise ALT.
Le test de rapidité en ligne de Google tant cité dans cet article: Obligatoire car Google se base en partie dessus pour attribuer un pagerank à provence4u.com… Mais l’outil est lent! Je préfère Yellow lab Tools, open source, dont le checkup est beaucoup plus ergonomique pour vérifier l’évolution du site après application de telle ou telle optimisation. On peut cliquer sur chaque checkup pour voir le détail de l’analyse et profiter d’un avis expert pour corriger le point étudié.
Le service en ligne de WebPage test de KeyCDN sera un bon complément au service sus-cité.
En parlant de balises images ALT, il faut savoir que Google pageSpeed en tient compte: Sur un site Web les images sans balise ALT dégradent le score final (La recherche Google Image représente 20% des recherches Google) et l’omission de ces balises l’a rend incompatible avec la notion d’accessibilité, qui a un poids important pour le score (pour les malvoyants les sites webs doivent pouvoir être lues par une voix synthétique -dont les balises ALT). S’il manquait ces balises à un nombre suffisant d’images sur provence4u.com j’aurais utilisé l’extension WordPress Image Attributes Pro.. Mais j’ai comblé ce manque à l’huile de coude.
Pour nettoyer la base de données des scories de plugins supprimés je recommande WP-Optimize dont voici un tutoriel.
PHP en version 8 met l’accent sur les performances, malheureusement l’hébergeur ne donne pas la main sur ce paramètre important, il n’empêche qu’au final, le score Google du provence4u.com est désormais un peu supérieur à 90% en page d’accueil, et plus encore sur les autres pages sans Slider: Dans le secteur très concurrentiel de l’hébergement touristique au Sud-Est, nul doute que les concurrents seront bien moins lotis dans les résultats de Google Search.
