Optimización de archivos de recursos
Para un sitio de Commerce más interactivo, optimice los archivos de recursos CSS y JavaScript (JS) y elimine los recursos que bloquean el procesamiento.
- Optimización de archivos CSS y JS: reduzca el tiempo necesario para cargar archivos CSS y JavaScript (JS) configurando Adobe Commerce para combinar, minificar y agrupar archivos independientes en un solo archivo.
- Eliminación de los recursos que bloquean el procesamiento: considere la posibilidad de ofrecer funciones JS y CSS críticas en línea y aplazar todos los estilos JS/CSS no críticos. Para obtener instrucciones, consulte Eliminación de los recursos que bloquean el procesamiento.
Productos y versiones afectados
Todas las versiones compatibles, 2.3 y posteriores de:
- Adobe Commerce en la infraestructura en la nube
- Adobe Commerce local
Combinar o minimizar archivos CSS
El tiempo que se tarda en cargar archivos CSS y JavaScript (JS) se puede reducir combinando, minimizando y agrupando archivos independientes en un solo archivo.
No combine ni agrupe archivos si la implementación utiliza HTTP/2. HTTP/2 descarga los archivos estáticos de forma asíncrona. Los exploradores deben descargar un archivo combinado completo antes de procesar el contenido del archivo.
Uso de Admin
Para habilitar la combinación o minificación de CSS, vaya a Administrador > Tiendas > Configuración > Configuración > Avanzadas > Desarrollador > Configuración de CSS.
Uso de la línea de comandos
Para habilitar la combinación de CSS en Adobe Commerce en la infraestructura en la nube:
-
Ejecute este comando localmente:
code language-bash bin/magento config:set --lock-config dev/css/merge_css_files 1 -
Confirme los cambios en la
app/etc/config.phpy vuelva a implementarlo.
Para habilitar la minificación CSS en Adobe Commerce en la infraestructura en la nube:
-
Ejecute este comando localmente:
code language-bash bin/magento config:set --lock-config dev/css/minify_files 1 -
Confirme los cambios en la
app/etc/config.phpy vuelva a implementarlo.
Minimizar archivos JS
Uso de Admin
En el Administrador barra lateral, vaya a Tiendas > Configuración > Configuración > Avanzadas > Desarrollador > Configuración de JavaScript.
Uso de la línea de comandos
Para habilitar la minificación de JS en Adobe Commerce en la infraestructura en la nube:
-
Ejecute este comando localmente:
code language-bash bin/magento config:set --lock-config dev/js/minify_files 1 -
Confirme los cambios en la
app/etc/config.phpy vuelva a implementarlo.
Combinar y empaquetar archivos JS
Puede activar la combinación o el agrupamiento en la administración de Commerce (la combinación y el agrupamiento no se pueden activar al mismo tiempo): Tiendas > Configuración > Configuración > Avanzadas > Desarrollador > Configuración de JavaScript.
También puede habilitar el paquete integrado de Adobe Commerce (paquete básico) desde la línea de comandos:
php -f bin/magento config:set dev/js/enable_js_bundling 1