Optimisation des fichiers de ressources
Pour un site de commerce plus réactif, optimisez les fichiers de ressources CSS et JavaScript (JS) et supprimez les ressources de blocage du rendu.
- Optimisation des fichiers CSS et JS: réduisez le temps nécessaire au chargement des fichiers CSS et JavaScript (JS) en configurant Adobe Commerce pour fusionner, minifier et regrouper des fichiers distincts dans un seul fichier.
- Élimination des ressources bloquant le rendu: envisagez de fournir des fonctionnalités JS et CSS critiques en ligne et de différer tous les styles JS/CSS non critiques. Pour plus d’informations, voir Élimination des ressources bloquant le rendu.
Produits et versions concernés
Toutes les versions prises en charge, 2.3 et ultérieures de :
- Adobe Commerce sur l’infrastructure cloud
- Adobe Commerce sur site
- Magento Open Source
Fusion ou minimisation de fichiers CSS
Il est possible de réduire le temps nécessaire au chargement des fichiers CSS et JavaScript (JS) en fusionnant, en minimisant et en regroupant des fichiers distincts dans un seul fichier.
Ne fusionnez ou ne regroupez pas de 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é entier avant de traiter le contenu du fichier.
Utilisation de l’administrateur
Pour activer la fusion ou la minification CSS, accédez à la section Administration > Magasins > Paramètre > Configuration > Avancé > Développeur > Paramètres CSS.
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 apportées à la variable
app/etc/config.php
et redéployez.
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 apportées à la variable
app/etc/config.php
et redéployez.
Minimisation des fichiers JS
Utilisation de l’administrateur
Sur le Administration barre latérale, accédez à Magasins > Paramètres > Configuration > Avancé > Développeur > Paramètres JavaScript.
Utilisation de la ligne de commande
Pour activer la minification 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 apportées à la variable
app/etc/config.php
et redéployez.
Fusion et regroupement de fichiers JS
Vous pouvez activer la fusion ou le regroupement dans l’administrateur Commerce (la fusion et le regroupement ne peuvent pas être activés en même temps) : Magasins > Paramètres > Configuration > Avancé > Développeur > Paramètres JavaScript.
Vous pouvez également activer le regroupement intégré Adobe Commerce (regroupement de base) à partir de la ligne de commande :
php -f bin/magento config:set dev/js/enable_js_bundling 1