[PaaS uniquement]{class="badge informative" title="S’applique uniquement aux projets Adobe Commerce on Cloud (infrastructure PaaS gérée par Adobe) et aux projets On-premise."}

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.

IMPORTANT
Adobe Commerce sur l’infrastructure cloud s’exécute toujours en mode Production et il n’est pas possible de le définir autrement. Vous devez donc utiliser la méthode de ligne de commande pour activer la fusion, la minimisation et le regroupement.

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 :

  1. Exécutez cette commande localement :

    code language-bash
    bin/magento config:set --lock-config dev/css/merge_css_files 1
    
  2. Validez les modifications dans le fichier app/etc/config.php et redéployez-le.

Pour activer la minimisation CSS dans Adobe Commerce sur l’infrastructure cloud :

  1. Exécutez cette commande localement :

    code language-bash
    bin/magento config:set --lock-config dev/css/minify_files 1
    
  2. Validez les modifications dans le fichier app/etc/config.php et 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 :

  1. Exécutez cette commande localement :

    code language-bash
    bin/magento config:set --lock-config dev/js/minify_files 1
    
  2. Validez les modifications dans le fichier app/etc/config.php et redéployez-le.

Regrouper les fichiers JS

Vous pouvez activer le regroupement dans l’Admin Commerce : Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings.

NOTE
La fusion et le regroupement ne peuvent pas être activés en même temps.

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

WARNING
Il est déconseillé d’activer Merge JavaScript Files. Ce paramètre a été conçu uniquement pour le JavaScript chargé de manière synchrone dans la section HEAD de la page. Il peut entraîner un fonctionnement incorrect de la logique de regroupement et de RequireJS. Il est conservé uniquement à des fins de rétrocompatibilité et ne présente aucun avantage en termes de performances lorsque le HTTP/2 est activé.
Si vous avez activé Merge JavaScript Files et rencontrez des problèmes, essayez de le désactiver avant d’appliquer des correctifs. Voir ACSD-67908 si vous ne pouvez pas désactiver la fusion.

Informations supplémentaires

recommendation-more-help
754cbbf3-3a3c-4af3-b6ce-9d34390f3a60