DocumentaciónCommerceGuía de implementación

Optimice los archivos de recursos

Last update: Sat Nov 02 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Experimentado
  • Desarrollador

Para un sitio de comercio más adaptable, optimice los archivos de recursos CSS y JavaScript (JS) y elimine los recursos de bloqueo de procesamiento.

  • Optimice los archivos CSS y JS: reduzca el tiempo necesario para cargar archivos CSS y JavaScript (JS) configurando Adobe Systems Commerce para fusionar, minimizar y paquete archivos separados en un solo archivo.
  • Elimine los recursos que bloquean el procesamiento: considere la posibilidad de ofrecer esencial funciones JS y CSS en línea y aplazar todos los estilos JS/CSS que no sean esencial. Para obtener instrucciones, consulte Eliminación de 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 Systems Commerce en infraestructura en la nube siempre se ejecuta en modo Producción y no es posible configurarlo de otra manera, por lo tanto, debe usar el método de línea de comandos para habilitar la combinación, minimización y agrupación.

No combine ni paquete archivos si el implementación utiliza HTTP/2. HTTP/2 descarga archivos estáticos de forma asíncrona. Los navegadores deben descargar un archivo combinado completo antes de procesar su contenido.

Uso de Administración

Para habilitar la fusión o minimización de CSS, vaya a Admin ​ ​> Stores > Setting > Configuration > Avanzadas > Developer > CSS Configuración.

Uso de la línea de comandos

Para habilitar la fusión de CSS en Adobe Systems Commerce en 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 en el app/etc/config.php archivo y vuelva a implementarlo.

Minifique los archivos JS

Uso de Administración

En la barra lateral del administrador, ve a Tiendas > Configuración > Configuración > ​ Avanzadas > > de desarrollador JavaScript Configuración.

Uso de la línea de comandos

Para habilitar la minimización de JS en Adobe Systems Commerce en 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.

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 habilitar al mismo tiempo): Tiendas > Configuración > Configuración > Avanzado > 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

Más información

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