DocumentazioneCommercePlaybook di implementazione

Ottimizzare i file di risorse

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

Creato per:

  • Esperto
  • Sviluppatore

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 unire, minimizzare e raggruppare file separati in un unico 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 Amministrazione > Archivi > Impostazione > Configurazione > Avanzate > Sviluppatore > Impostazioni CSS.

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 Amministratore, vai a Archivi > Impostazioni > Configurazione > Avanzate > Sviluppatore > Impostazioni JavaScript.

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.

Unire e raggruppare file JS

È possibile attivare l'unione o il raggruppamento in Amministrazione Commerce (l'unione e il raggruppamento non possono essere attivati contemporaneamente): Archivi > Impostazioni > Configurazione > Avanzate > Sviluppatore > Impostazioni JavaScript.

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

Informazioni aggiuntive

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