DocumentationCommerceManuel d’implémentation

Optimisation des fichiers de ressources

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Expérimenté
  • Développeur

Pour un site Commerce plus réactif, optimisez les fichiers de ressources CSS et JavaScript (JS) et supprimez les ressources de blocage du 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 fusionner, minifier et regrouper des fichiers séparés dans un seul fichier.
  • Éliminer les ressources de blocage de 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 Eliminer les ressources de blocage de rendu.

Produits et versions concernés

Toutes les versions prises en charge, 2.3 et versions ultérieures de :

  • Adobe Commerce sur l’infrastructure cloud
  • Adobe Commerce sur site

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.

IMPORTANT
Adobe Commerce sur l’infrastructure cloud s’exécute toujours en mode de production et il n’est pas possible de le définir autrement. Par conséquent, vous devez utiliser la méthode de ligne de commande pour activer la fusion, la minification et le regroupement.

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 à Admin > 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 :

  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 apportées au fichier app/etc/config.php et redéployez-les.

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 apportées au fichier app/etc/config.php et redéployez-les.

Minimisation des fichiers JS

Utilisation de l’administrateur

Sur la barre latérale Admin, 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 :

  1. Exécutez cette commande localement :

    code language-bash 
    bin/magento config:set --lock-config dev/js/minify_files 1

  2. Validez les modifications apportées au fichier app/etc/config.php et redéployez-les.

Fusion et regroupement de fichiers JS

Vous pouvez activer la fusion ou le regroupement dans l’administration 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

Informations supplémentaires

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