Minifier et combiner les fichiers CSS - Comment ça fonctionne ?

Que signifient "minifier" et "combiner" ?

Minifier

La minification est le processus qui consiste à supprimer les espaces blancs et les commentaires du code. Cela permet de réduire la taille du fichier, donc de le télécharger plus rapidement. La minification seule ne réduit pas le nombre de requêtes HTTP sur votre site.

Combiner

Lorsque l'option Combiner les fichiers CSS est activée, tous les fichiers CSS sont combinés en un seul fichier CSS, ce qui réduit le nombre de requêtes HTTP sur votre site. La combinaison est une bonne pratique lorsque votre site utilise HTTP/1 mais pas nécessairement lors de l'utilisation du protocole HTTP/2.

Comment WP Rocket fait-il ceci ?

WP Rocket recherche dans le HTML de la page et découvre les fichiers CSS dans les balises link. Les fichiers doivent avoir l'extension .css.
Depuis la version 3.7 de WP Rocket, le CSS externe (c'est-à-dire le CSS hébergé sur un autre domaine) est hébergé sur votre domaine et traité par les options minifier et combiner. Cela permet de répondre aux recommandations des outils de test de vitesse et de réduire le nombre de résolutions DNS nécessaires.
Les fichiers sont traités et les versions optimisées sont stockées dans : cache/min/1
Si vous utilisez le mode multisite de WordPress, le dossier nommé /1/ sera modifié pour refléter le numéro du site.
Les fichiers minifiés contiennent une chaîne de requête (?ver=) avec l'horodatage de la dernière modification, pour faire sauter les les caches navigateur. (à partir de WP Rocket version 3.8.6)
Fichier original : https://example.com/wp-content/themes/twentytwenty/style.css?ver=1.5
Fichier minifié :

https://example.com/wp-content/cache/min/1/wp-content/themes/twentytwenty/style.css?ver=1614629992
Les fichiers combinés utilisent une chaîne aléatoire dans leur nom du fichier à chaque fois qu'il est régénéré, afin de faire sauter les les caches navigateur :

https://example.com/wp-content/cache/min/1/fdc1a8722303a3e43f89c03f746fbfeb.css

Si seul Minifier est activé, l'ordre des fichiers sur la page ne change pas, nous remplaçons simplement les fichiers CSS existants par leur versions optimisées.
Si Combiner est activé, le fichier combiné est inséré dans la page juste avant la balise de fermeture </title>.
Cette optimisation n'est appliquée que sur les pages mises en cache ou optimisées.
Les fichiers hébergés localement chargés via @import seront traités et inclus dans les fichiers minifiés et combinés (à partir de WP Rocket 3.8.6).

Certains fichiers sont automatiquement exclus

Ces fichiers ne seront pas traités :

Les fichiers hébergés sur un domaine tiers et chargés via @import ne seront pas traités.
Noms de fichiers contenant .min - ils sont déjà minifiés
Fichiers avec la balise data-no-minify,
Fichiers avec un type de support spécifié comme only screen and
Fichiers avec un type de média autre que screen et all

Utilisation de Combiner les fichiers CSS avec Supprimer les ressources CSS inutilisées

Lorsque l'option Supprimer les ressources CSS inutilisées est activée, les fichiers CSS Combine sont automatiquement désactivés et apparaissent en grisé dans la page des paramètres de WP Rocket.

En effet, le bloc CSS utilisé qui en résulte remplacera tous les fichiers CSS existants, y compris celui qui a été combiné.

Dans ce cas, vous verrez apparaître un message avec le texte suivant :

Pour des raisons de compatibilité et pour obtenir les meilleurs résultats, cette option est désactivée lorsque l'option Supprimer les CSS inutilisés est activée.

Améliorer le chargement des polices

À partir de WP Rocket 3.7, lorsque la minification ou la minification/combinaison est active, WP Rocket applique automatiquement font-display : swap; à toutes les polices appelées au sein des fichiers CSS et n’ayant pas de propriété font-display

Cela permettra d'améliorer la recommandation PageSpeed : Ensure text remains visible during webfont load

Note: les fichiers avec .min dans leurs noms de fichiers qui contiennent également une règle@font-face seront optimisés. WP Rocket minimisera les règles CSS et appliquera l'affichage font-display: swap; descripteur des polices.