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

Minifier les fichiers JavaScript

La minification est le processus de suppression des espaces blancs et des commentaires du code. Cela rend la taille du fichier plus petite, donc plus rapide à télécharger. La minification seule ne réduit pas le nombre de requêtes HTTP sur votre site.

Cette option se trouve dans l'onglet Optimisation des fichiers, et comme c'est une pratique standard d'optimisation de site web avec peu de chances de casser un site, elle est activée par défaut.

Combiner les fichiers JavaScript

Lorsque l'option Combiner les fichiers JavaScript est activée, tous les fichiers JavaScript et les scripts en ligne sont combinés en un seul fichier, réduisant ainsi 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 lorsque vous utilisez HTTP/2.

Remarque : La combinaison des fichiers JavaScript est automatiquement désactivée lorsque Reporter l'exécution du JavaScript est activée.

Comment WP Rocket fait-il ceci ?

• WP Rocket recherche dans le HTML de la page et découvre les fichiers avec l'extension .js et les scripts en ligne au sein des balises script.
• Le JS externe (c'est-à-dire le CSS hébergé sur un autre domaine) est hébergé sur votre domaine et traité à la fois par les options minifier et combiner (auparavant, le JS externe n'était traité que lorsque l’option Combiner les JS était active). 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, afin de déjouer les caches navigateur :
  Fichier original : https://example.com/wp-content/themes/twentytwenty/assets/js/index.js?ver=1.5
  Fichier minifié : https://example.com/wp-content/cache/min/1/wp-content/themes/twentytwenty/assets/js/index.js?ver=1614629419
• Une chaîne aléatoire est ajoutée au nom du fichier combiné à chaque fois qu'il est régénéré, afin de déjouer les caches navigateur : https://www.example.org/wp-content/cache/min/1/wp-content/themes/twentytwenty/assets/js/index-0cc17ef685f255d7641b2f7967e977cd.js
• Si seul Minifier est activé, l'ordre des fichiers sur la page ne change pas, nous remplaçons simplement les fichiers JS 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 body , ainsi il ne bloquera pas le rendu.
• 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 :

• Nous avons quelques exclusions automatiques pour les compatibilités des plugins et des thèmes
• Noms de fichiers contenant .min - ils sont déjà minifiés
• Balises de script avec l'attribut : data-no-minify="1"
• Les scripts localisés sont exclus
• Scripts en ligne exclus
• Fichiers externes exclus