[Solo PaaS]{class="badge informative" title="Se aplica solo a proyectos de Adobe Commerce en la nube (infraestructura PaaS administrada por Adobe) y a proyectos locales."}

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.

IMPORTANT
Adobe Commerce en la infraestructura en la nube siempre se ejecuta en el modo de producción y no es posible configurarlo de otra manera, por lo que debe utilizar el método de línea de comandos para habilitar la combinación, la minificación y el agrupamiento.

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:

  1. Ejecute este comando localmente:

    code language-bash
    bin/magento config:set --lock-config dev/css/merge_css_files 1
    
  2. Confirme los cambios realizados en el archivo app/etc/config.php y vuelva a implementarlo.

Para habilitar la minificación CSS en Adobe Commerce en la infraestructura en la nube:

  1. Ejecute este comando localmente:

    code language-bash
    bin/magento config:set --lock-config dev/css/minify_files 1
    
  2. Confirme los cambios realizados en el archivo app/etc/config.php y 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:

  1. Ejecute este comando localmente:

    code language-bash
    bin/magento config:set --lock-config dev/js/minify_files 1
    
  2. Confirme los cambios realizados en el archivo app/etc/config.php y vuelva a implementarlo.

Paquete de archivos JS

Puede habilitar el agrupamiento en Commerce Admin: Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings.

NOTE
La combinación y el agrupamiento no se pueden habilitar al mismo tiempo.

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

WARNING
No se recomienda habilitar Merge JavaScript Files. Esta configuración se diseñó únicamente para JavaScript cargados sincrónicamente en la sección HEAD de la página y puede hacer que el agrupamiento y la lógica RequireJS funcionen incorrectamente. Se mantiene solo para la compatibilidad con versiones anteriores y no proporciona ninguna ventaja de rendimiento cuando HTTP/2 está habilitado.
Si tiene Merge JavaScript Files habilitado y tiene problemas, intente deshabilitarlo antes de aplicar los parches. Consulte ACSD-67908 si no puede deshabilitar la combinación.

Más información

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