Minifier et combiner le CSS

Dans cet article

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.
  • Une chaîne aléatoire est ajoutée au nom du fichier à chaque fois qu'il est régénéré, afin de déjouer les caches navigateur.
  • Fichier d’origine : https://www.example.org/wp-content/themes/twentytwenty/style.css?ver=1.5

    Fichier optimisé : https://www.example.org/wp-content/cache/min/1/wp-content/themes/twentytwenty/style-f06f2b73533638ed8928bd7a737e402c.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.

Certains fichiers sont automatiquement exclus

Ces fichiers ne seront pas traités :

  • Fichier chargé via @import
  • 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

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

Résolution des problèmes

Il faut parfois exclure des fichiers pour éviter un problème d'affichage. Si vous rencontrez des problèmes avec cette option, veuillez consulter : https://fr.docs.wp-rocket.me/article/1132-resoudre-problemes-minification-combinaison-css

Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.