Minifier votre HTML avec Twig

La minification du HTML est souvent critiquée du fait que gzip la rendrait imperceptible, et c’est généralement vrai. En fait, gzip rend généralement toute minification imperceptible.

Compressée sans être minifiée, une ressource coûte 1,8 Ko au réseau.
Minifiée, son coût baisse à 1,6 Ko.
Sans gzip ni minification, son coût est de 7,1 Ko.

Le gain apporté par la minification est effectivement négligeable par rapport à celui apporté par gzip, mais puisque gain y a, on n’a aucune raison de vouloir s’en passer.

Il y a d’ailleurs de grandes chances pour que vous minifiiez déjà vos assets, une bonne pratique, qui concerne également le HTML. Le souci, c’est que le HTML est le plus souvent généré par le serveur ; on ne peut donc pas le minifier à l’avance. À l’inverse, le minifier après chaque génération est généralement plus coûteux que de ne rien faire du tout.

Par contre si vous utilisez Twig, vous avez possibilité d’agir sur le code serveur pour réduire le poids du HTML généré. Voyons comment.

spaceless

spaceless est souvent cité pour cette problématique, mais il n’y répond absolument pas. Sa seule utilité est de supprimer les espaces entre les balises, typiquement pour éviter les espaces indésirables engendrés par l’utilisation de inline-block comme valeur de display.

Ce tag est donc destructif puisqu’il peut engendrer des différences de rendu. De plus, il est compilé sous la forme d’un preg_replace qui sera exécuté à chaque génération du HTML.

Par exemple,

{% spaceless %}
<span itemprop="postalCode">75014</span>  
<span itemprop="addressLocality">Paris</span>  
{% endspaceless %}

sera compilé en

ob_start();  
echo "<span itemprop=\"postalCode\">75014</span>  
<span itemprop=\"addressLocality\">Paris</span>  
";
echo trim(preg_replace('/>\s+</', '><', ob_get_clean()));  

et rendu comme « 75014Paris ».

À utiliser avec prudence !

Contrôle des espaces

Depuis sa version 1.1, Twig permet l’ajout d’un tiret à l’ouverture et/ou fermeture d’un tag qui provoque respectivement la suppression des espaces présents avant et/ou après ledit tag. Par exemple

<span itemprop="postalCode">  
    {{- '75014' -}}
</span>  

rendra le HTML suivant :

<span itemprop="postalCode">75014</span>  

Cette fonctionnalité est donc également destructive mais à la différence de spaceless elle n’a un impact que sur la compilation, et pas sur la génération. En effet le code précédent sera compilé en

echo "<span itemprop=\"postalCode\">";  
echo "75014";  
echo "</span>";  

WhitespaceCollapser

Combiner les deux fonctionnalités précédentes permet de supprimer certains espaces indésirables dans et autour de tags Twig.

Le souci, c’est que HTML est codé avec beaucoup d’espaces indésirables, et que ces derniers ne sont pas forcément dans le champ d’action de ces tags. Comme ce cas est très fréquent, j’ai développé l’extension WhitespaceCollapser qui supprime ces espaces autant que possible, pendant la compilation.

Une fois active,

<p class="h-adr">  
    <span
        class="p-locality"
        itemprop="addressLocality"
    >
        {{- 'Paris' -}}
    </span>
</p>  

sera compilé en

echo "<p class=\"h-adr\"> <span class=\"p-locality\" itemprop=\"addressLocality\">";  
echo "Paris";  
echo "</span>  
</p>";  

et rendra

<p class="h-adr"> <span class="p-locality" itemprop="addressLocality">Paris</span>  
</p>  

En conséquence le poids de votre HTML diminue sans aucun impact pour l’utilisateur, tout comme pour vos assets.

Pourquoi s’en priver ?!