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.
- Optimizar archivos CSS y JS: Reduzca el tiempo necesario para cargar archivos CSS y JavaScript (JS) configurando Adobe Commerce para minificar y agrupar archivos.
- Eliminar 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 Eliminar 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 Admin > Stores > Settings > Configuration > Advanced > Developer > CSS Settings.
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 realizados en el archivo
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 realizados en el archivo
app/etc/config.phpy vuelva a implementarlo.
Minimizar archivos JS
Usando Admin
En la barra lateral Admin, vaya a Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.
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 realizados en el archivo
app/etc/config.phpy vuelva a implementarlo.
Paquete de archivos JS
Puede habilitar el agrupamiento en Commerce Admin: Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings.
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
Combinar archivos JS (no recomendado) merge-js-files
Más información
- Configuración de optimización del lado del cliente
- Sugerencias de agrupación en Prácticas recomendadas de configuración—herramientas de agrupación de terceros, HTTP/2 e instrucciones sobre la combinación de JS y CSS obsoletas
- Guía del usuario: optimizando archivos de recursos
- Guía para desarrolladores de Frontend: combinación, minificación y rendimiento del sitio de CSS
- Paquete de JavaScript avanzado