C’est un aspect déroutant de la conception d’un thème WordPress de type BlocK : la feuille de style du thème – style.css – a été remplacée par un fichier au format json plus limité. Des pseudo-classes CSS sont absentes, la syntaxe est moins souple, des raccourcis habituels en CSS ne sont pas pris en charge… Pourquoi donc migrer les styles vers ce fichier theme.json ?
On était pourtant
Zen in the garden…
Si les styles CSS embellissent les pages Web depuis plus de 2 décennies, c’est sans doute en partie grâce à un site Internet qui a largement promu l’avantage de l’utilisation des CSS dans une mise en page Web : CSS Zengarden. Avec ce site, beaucoup de développeurs découvraient au début des années 2000 que le design d’une page HTML pouvait être modifié de façon radicale uniquement à l’aide d’une feuille de style CSS. La séparation du contenu du site (souvent dans une base de donnée avec l’utilisation de CMS) et du thème permettait une refonte visuelle facilitée en cas de besoin. Aujourd’hui, placer tous ces styles dans une longue feuille de style externe est pourtant devenu un désavantage…
SEO, FCP, LCP…
De la compet’ dans le jardin Zen
Votre site, vous le préférez avec ou sans audience ? Pour être visible et arriver au top d’une recherche sur Google, vous devrez donc passer par la case SEO (pour optimisation des moteurs de recherche). Mais l’algorithme du moteur le plus utilisé est d’humeur changeante, et la seule façon de l’apprivoiser et de s’assurer avec certitude une place en première page des résultats de recherche pour un mot clé est de… Payer Google. Sorti des annonces, la compétition est féroce et les résultats aléatoires. Les éditeurs de site internet s’adonnent au jeu du référencement naturel : choix de mots-clés importants, adaptation du contenu, invocation de statistiques mathématiques promues par des éditeurs spécialisés… Autant de paramètres qui feront naître l’espoir d’exister sur des moteurs de recherche, sans payer. Parmi ces paramètres, la performance du site est particulièrement scrutée.
Google est pointilleux à ce sujet. Il aime le 100m, et n’aura d’yeux que pour le premier à passer la ligne d’arrivée. L’outil de mesure des performances dédié aux webmasters le confirme. L’analyseur de Google ausculte le site à la recherche des ressources qui ralentissent l’affichage : un site lent qui dégrade l’expérience utilisateur prend le risque de la relégation. C’est là que la compétition a tendance à piétiner les parterres du jardin Zen qui s’était pourtant largement étendu. La feuille de style externe ? Oui, elle fait bien partie des ressources qui ralentissent l’affichage de la page… Si cela ne remet pas en cause l’utilisation des CSS pour le design d’un site, la séparation initiale des CSS et des fichiers HTML en prend pour son grade. Parmi les conseils pour améliorer le score FCP et LCP : insérer les styles en ligne, même si c’est moins facilement maintenable.
Cher Json,
bétonnez moi tout ça ASAP
Amis des fleurs et de la nature, évitez de lire la suite… car si les longues feuilles de style CSS externalisées passaient pour monolithiques, elles avaient quand même l’avantage de n’être téléchargées qu’une seule fois pour être mises en cache, chaque page du site y faisant référence. Désormais, pour des raisons de performance, pour faire les yeux doux à Google, les styles sont placés dans la page HTML, dans l’en-tête ou en ligne, et téléchargés autant de fois que nécessaires pour chaque page du site. Car oui, après tout, pourquoi télécharger une ressource une seule fois quand on peu le faire 5 fois, 10 fois, 100 fois… ce n’est pas comme si on dépensait de la bande passante et de l’électricité en plus, ou que la planète était limitée (Oui, on peut nuancer. Mais si peu…)
L’évolution de WordPress est donc dans l’air du temps. Le fichier JSON est un moyen efficace de gérer les styles CSS du site sans faire appel à une feuille de style externe. Tous les paramètres disponibles et les styles spécifiés dans theme.json sont injectés dans chaque page, par élément. Les variables CSS et autres styles globaux sont placés directement dans l’entête. Et donc, la feuille de style.css du thème n’est plus chargée par défaut sur le site public.
En fin de compte, le fichier WordPress theme.json est la solution pour produire des sites modernes : des sites qui s’alignent sur les mesures de performance les plus récentes pour être chargés et vus rapidement, et qui ne « dégradent pas l’expérience utilisateur » ne serait-ce que d’un centième de seconde. Certes, l’objectif n’est pas tant l’expérience utilisateur que de passer la ligne d’arrivée en premier sous les yeux d’un robot, en espérant qu’il vous récompense par une visibilité accrue. Fort heureusement, le robot est vénal. Vous le fascinerez davantage avez un peu de sous de côté qu’avec des performances délirantes. C’est désormais le prix pour conserver son jardin Zen.
Laisser un commentaire