Espace tutos dev’ & informatique 🐧

Alléger WordPress en supprimant les filtres SVG duotone

Publié le
Article sur la suppression du SVG duotone dans le code WordPress

Introduction

Dans l’article d’aujourd’hui on va voir le rôle des filtres SVG duotone des blocs d’image Gutenberg, ainsi que comment retirer les éléments qu’ils insèrent dans le code HTML du site même s’ils ne sont pas utilisés.
En effet, si les mises à jour WordPress apportent régulièrement de nouvelles fonctionnalités sans impact sur le frontend si l’on ne s’en sert pas, ce n’est pas le cas avec ces derniers.

Note : le code a été testé avec WordPress 6.1 et PHP 8.
On va dans un premier temps voir rapidement ce que font les filtres duotone, vous pouvez aussi aller directement à la section concernant leur suppression.

Usage des filtres duotone et impact sur le code source

Les filtres duotone : des effets colorés sur les images dans Gutenberg

Les filtres SVG duotone ont fait leur apparition dans WordPress 5.8. Ils permettent de modifier les couleurs d’une image (duotone : un ton pour les couleurs sombres, un ton pour les couleurs claires) sans avoir à remettre en ligne un nouveau fichier.

Ils peuvent être appliqués à un bloc d’image Gutenberg à l’aide de l’icône en forme de triangle à deux tons de la barre d’outils du bloc :

Fonctionnalité duotone des images dans Gutenberg
Filtres duotone des blocs d’images WordPress Gutenberg

Et… C’est tout. Comme vous pouvez le voir, c’est une fonction très gadget, pour tout dire la seule utilisation que j’ai jamais rencontrée sur un site professionnel consistait en un effet sépia, qui peut être obtenu différemment de toutes façons.

Un alourdissement du code source de plusieurs kilo-octets

Un des problèmes récurrents avec WordPress et ses milliers de thèmes et de plugins est la surcharge du code source des sites par une grande quantité de code inutile. Chaque extension ajoute ses scripts et ses styles un peu partout même quand ce n’est pas nécessaire, ce qui engendre un surplus de données à charger. A une époque où l’on cherche la sobriété énergétique et l’écologie au sein du numérique ce n’est pas idéal, et de plus cela ralentit le chargement des pages et peut causer le départ des visiteurs vers des sites web plus optimisés.

La fonctionnalité des filtres duotone de WordPress rajoute environ 10 kilo-octets à charger à toutes les pages des sites WordPress, y compris quand Gutenberg n’est pas utilisé sur la page. C’est dommage, étant donné que des efforts ont été faits dans Gutenberg pour l’optimisation du code HTML, comme par exemple l’emploi des attributs srcset et sizes des blocs d’image !

Gageons que les développeurs corrigeront tout ça prochainement. Quoi qu’il en soit, il est très probable que vous puissiez supprimer le code frontend des duotones sans rien perdre de ce qui fait le charme de vos pages web.

Retirer les SVG duotone du code HTML de WordPress

Qu’elle soit utilisée ou non, la fonctionnalité des filtres SVG duotone rajoute dans le code source des pages web des éléments <svg> qui implémentent les différents filtres de couleurs. Ils sont rajoutés à l’ouverture du <body> de la page, et ressemblent à ceci :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-dark-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 0.49803921568627" /><feFuncG type="table" tableValues="0 0.49803921568627" /><feFuncB type="table" tableValues="0 0.49803921568627" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 1" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0 1" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg>
<!-- ... 4 autres éléments ... -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-purple-green"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.65098039215686 0.40392156862745" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0.44705882352941 0.4" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-blue-orange"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.098039215686275 1" /><feFuncG type="table" tableValues="0 0.66274509803922" /><feFuncB type="table" tableValues="0.84705882352941 0.41960784313725" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg>

Leur ajout est effectué lors de l’évènement wp_body_open, soit par WordPress lui-même via l’action wp_global_styles_render_svg_filters, soit par le plugin Gutenberg via l’action gutenberg_global_styles_render_svg_filters.

On peut en conséquence neutraliser l’ajout en supprimant les actions en question, par exemple en ajoutant le code suivant dans le fichier functions.php de son thème enfant :

// Suppression des SVG duotone de WordPress 

if(has_action("wp_body_open", "wp_global_styles_render_svg_filters"))
  remove_action("wp_body_open", "wp_global_styles_render_svg_filters");

// Suppression des SVG duotone du plugin Gutenberg

if(has_action("wp_body_open", "gutenberg_global_styles_render_svg_filters"))
  remove_action("wp_body_open", "gutenberg_global_styles_render_svg_filters");

Retirer les duotone des styles CSS inline globaux

Outre les éléments <svg> vus plus haut, la fonctionnalité des filtres SVG duotone rajoute dans le code source du <style> CSS pour lier les images aux éléments <svg> précédents. Le code est ajouté au sein de la balise de style inline global-styles-inline-css située dans l’entête <head> des pages, et correspond à ceci :

<style id="global-styles-inline-css">
  /* ... autre code ... */

  --wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');
  --wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');
  /* ... 4 autres éléments ... */
  --wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');
  --wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');

  /* ... autre code ... */
</style>

L’ajout a lieu lors de l’appel à la fonction wp_enqueue_global_styles qui a lieu lors de l’action wp_enqueue_scripts. On ne peut pas simplement retirer cette action car le code qu’elle génère n’est pas limité aux filtres duotone mais est utilisé par l’ensemble du système de blocs Gutenberg.

On peut cependant modifier le code CSS avant qu’il ne soit écrit dans le code de la page et en retirer les références aux duotones, par exemple en ajoutant le code suivant dans le fichier functions.php de son thème enfant :

// Suppression de duotone dans les styles globaux inline CSS

add_action("wp_enqueue_scripts", function(){
  try{
    $styles = wp_styles();
    $dep = $styles->query("global-styles");
    if(! $dep) return;
    $css = $dep->extra["after"];
    if(! $css) return;
    $css = is_array($css) ? implode($css, "; ") : $css;
    $css = preg_replace('/--wp--preset--duotone--.*?\)\s*;/', "", $css);
    $dep->extra["after"] = array($css);
  }
  catch(\Exception $ex){
    if(defined("WP_DEBUG") && WP_DEBUG){
      if(defined("WP_DEBUG_DISPLAY") && WP_DEBUG_DISPLAY) echo "Error while removing duotone inline css : ".$ex->getMessage();
      if(defined("WP_DEBUG_LOG") && WP_DEBUG_LOG) error_log("Error while removing duotone inline css : ".$ex->getMessage());
    }
  }
});

Notez que le snippet ci-dessus récupère le code existant du style inline global-styles, en retire les mentions associées aux duotone, et remplace le code CSS inline précédent. Rien ne garantit qu’il ne sera pas obsolète d’ici quelque temps, les développeurs de WordPress pouvant modifier le fonctionnement interne sans prévenir.

Conclusion

Voila, on a retiré toutes les mentions concernant les filtres duotone sur les pages web de notre site WordPress. Cela devrait nous faire gagner quelques précieux kilo-octets dans le code source des pages, et nous permettre d’optimiser encore plus leur performance.

Si vous désirez aller plus loin dans l’optimisation de votre site ou avez besoin d’une assistance pour appliquer les techniques de cet article, n’hésitez pas à me contacter.

Bonnes fêtes de fin d’année à vous, à l’année prochaine !

Photo de profil de Loïc Burtin Code Colibri développeur web à Dijon

A propos de l'auteur

Loïc Burtin

Développeur web indépendant, avec une tendance à couper les plumes en quatre pour que les sites se chargent plus rapidement.

Partagez cet article  =>

Lire aussi

WordPress
WordPress
WordPress