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.
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:
-
Esegui questo comando localmente:
code language-bash bin/magento config:set --lock-config dev/css/merge_css_files 1 -
Eseguire il commit delle modifiche nel file
app/etc/config.phpe ridistribuirle.
Per abilitare la minimizzazione CSS in Adobe Commerce sull’infrastruttura cloud:
-
Esegui questo comando localmente:
code language-bash bin/magento config:set --lock-config dev/css/minify_files 1 -
Eseguire il commit delle modifiche nel file
app/etc/config.phpe 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:
-
Esegui questo comando localmente:
code language-bash bin/magento config:set --lock-config dev/js/minify_files 1 -
Eseguire il commit delle modifiche nel file
app/etc/config.phpe ridistribuirle.
File JS del bundle
È possibile abilitare il bundle in Commerce Admin: Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings.
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
Informazioni aggiuntive
- Impostazioni di ottimizzazione lato client
- Suggerimenti per il bundling in Best practice per la configurazione: strumenti di bundle di terze parti, HTTP/2 e indicazioni su unione JS e CSS obsoleta
- Guida utente: ottimizzazione dei file di risorse
- Guida per gli sviluppatori front-end: unione CSS, minimizzazione e prestazioni del sito
- Bundling JavaScript avanzato