Optimisation des fichiers de ressources
Pour un site Commerce plus réactif, optimisez les fichiers de ressources CSS et JavaScript (JS) et éliminez les ressources bloquant le rendu.
- Optimiser les fichiers CSS et JS : réduisez le temps nécessaire au chargement des fichiers CSS et JavaScript (JS) en configurant Adobe Commerce pour réduire et regrouper les fichiers.
- Éliminer les ressources bloquant le rendu—Envisagez de fournir des fonctionnalités JS et CSS essentielles en ligne et de différer tous les styles JS/CSS non critiques. Pour obtenir des conseils, voir Éliminer les ressources bloquant le rendu.
Produits et versions concernés
Toutes les versions prises en charge, 2.3 et ultérieures de :
- Adobe Commerce sur les infrastructures cloud
- Adobe Commerce On-Premise
Fusion ou minimisation de fichiers CSS
Le temps de chargement des fichiers CSS et JavaScript (JS) peut être réduit en fusionnant, en réduisant et en regroupant des fichiers distincts en un seul fichier.
Ne fusionnez pas ou ne regroupez pas les fichiers si votre déploiement utilise HTTP/2. HTTP/2 télécharge les fichiers statiques de manière asynchrone. Les navigateurs doivent télécharger un fichier fusionné complet avant de traiter le contenu du fichier.
Utilisation de l’administrateur
Pour activer la fusion ou la minimisation CSS, accédez à Admin > Stores > Settings > Configuration > Advanced > Developer > CSS Settings.
Utilisation de la ligne de commande
Pour activer la fusion CSS dans Adobe Commerce sur l’infrastructure cloud :
-
Exécutez cette commande localement :
code language-bash bin/magento config:set --lock-config dev/css/merge_css_files 1 -
Validez les modifications dans le fichier
app/etc/config.phpet redéployez-le.
Pour activer la minimisation CSS dans Adobe Commerce sur l’infrastructure cloud :
-
Exécutez cette commande localement :
code language-bash bin/magento config:set --lock-config dev/css/minify_files 1 -
Validez les modifications dans le fichier
app/etc/config.phpet redéployez-le.
Minimiser les fichiers JS
Utilisation de Admin
Sur la barre latérale Admin, accédez à Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.
Utilisation de la ligne de commande
Pour activer la minimisation JS dans Adobe Commerce sur l’infrastructure cloud :
-
Exécutez cette commande localement :
code language-bash bin/magento config:set --lock-config dev/js/minify_files 1 -
Validez les modifications dans le fichier
app/etc/config.phpet redéployez-le.
Regrouper les fichiers JS
Vous pouvez activer le regroupement dans l’Admin Commerce : Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings.
Vous pouvez également activer le groupement natif Adobe Commerce (groupement de base) à partir de la ligne de commande :
php -f bin/magento config:set dev/js/enable_js_bundling 1
Fusion de fichiers JS (non recommandée) merge-js-files
Informations supplémentaires
- Paramètres d’optimisation côté client
- Conseils sur le regroupement dans Bonnes pratiques de configuration : outils de regroupement tiers, HTTP/2, et conseils sur la fusion JS et CSS obsolète
- Guide de l’utilisateur : optimisation des fichiers de ressources
- Guide de développement de Frontend : fusion CSS, minification et performances du site
- Groupement JavaScript avancé