[Solo PaaS]{class="badge informative" title="Applicabile solo ai progetti Adobe Commerce on Cloud (infrastruttura PaaS gestita da Adobe) e ai progetti on-premise."}

Ottimizzare i file di risorse

Per un sito Commerce più reattivo, ottimizza i file di risorse CSS e JavaScript (JS) ed elimina le risorse di blocco del rendering.

  • Ottimizza file CSS e JS—Riduci il tempo necessario per caricare i file CSS e JavaScript (JS) configurando Adobe Commerce per minimizzare e raggruppare i file.
  • Eliminazione delle risorse di blocco del rendering. Si consiglia di fornire funzionalità JS e CSS critiche in linea e di differire tutti gli stili JS/CSS non critici. Per maggiori informazioni, vedere Eliminare le risorse di blocco del rendering.

Prodotti e versioni interessati

Tutte le versioni supportate, 2.3 e successive di:

  • Adobe Commerce sull’infrastruttura cloud
  • Adobe Commerce on-premise

Unire o minimizzare file CSS

Il tempo necessario per caricare i file CSS e JavaScript (JS) può essere ridotto unendo, minimizzando e raggruppando file separati in un unico file.

IMPORTANT
Adobe Commerce su infrastruttura cloud viene sempre eseguito in modalità di produzione e non è possibile impostarlo altrimenti, pertanto devi utilizzare il metodo della riga di comando per abilitare l’unione, la minimizzazione e il bundling.

Non unire o raggruppare i file se la distribuzione utilizza HTTP/2. HTTP/2 scarica i file statici in modo asincrono. I browser devono scaricare un intero file unito prima di elaborare il contenuto del file.

Utilizzo di Admin

Per abilitare l'unione o la minimizzazione CSS, vai in Admin > Stores > Settings > Configuration > Advanced > Developer > CSS Settings.

Utilizzo della riga di comando

Per abilitare l’unione CSS in Adobe Commerce sull’infrastruttura cloud:

  1. Esegui questo comando localmente:

    code language-bash
    bin/magento config:set --lock-config dev/css/merge_css_files 1
    
  2. Eseguire il commit delle modifiche nel file app/etc/config.php e ridistribuirle.

Per abilitare la minimizzazione CSS in Adobe Commerce sull’infrastruttura cloud:

  1. Esegui questo comando localmente:

    code language-bash
    bin/magento config:set --lock-config dev/css/minify_files 1
    
  2. Eseguire il commit delle modifiche nel file app/etc/config.php e ridistribuirle.

Minimizza file JS

Utilizzo di Admin

Nella barra laterale Admin, vai a Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.

Utilizzo della riga di comando

Per abilitare la minimizzazione JS in Adobe Commerce sull’infrastruttura cloud:

  1. Esegui questo comando localmente:

    code language-bash
    bin/magento config:set --lock-config dev/js/minify_files 1
    
  2. Eseguire il commit delle modifiche nel file app/etc/config.php e ridistribuirle.

File JS del bundle

È possibile abilitare il bundle in Commerce Admin: Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings.

NOTE
Impossibile abilitare contemporaneamente l’unione e il bundling.

Puoi anche abilitare il bundling integrato di Adobe Commerce (bundling di base) dalla riga di comando:

php -f bin/magento config:set dev/js/enable_js_bundling 1

Unisci file JS (scelta non consigliata) merge-js-files

WARNING
Non è consigliabile abilitare Merge JavaScript Files. Questa impostazione è stata progettata solo per il JavaScript caricato in modo sincrono nella sezione HEAD della pagina e può causare il malfunzionamento del bundling e della logica RequireJS. Viene mantenuto solo per la compatibilità con le versioni precedenti e non offre vantaggi in termini di prestazioni quando HTTP/2 è abilitato.
Se sono stati attivati Merge JavaScript Files e si verificano problemi, provare a disattivarli prima di applicare le patch. Se non puoi disabilitare l'unione, consulta ACSD-67908.

Informazioni aggiuntive

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