DocumentaçãoCommerceManual de implementação

Otimizar arquivos de recurso

Last update: Sun Nov 03 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Experiente
  • Desenvolvedor

Para um site do Commerce mais responsivo, otimize os arquivos de recursos CSS e JavaScript (JS) e elimine os recursos de bloqueio de renderização.

  • Otimizar arquivos CSS e JS—Reduza o tempo necessário para carregar arquivos CSS e JavaScript (JS) configurando o Adobe Commerce para mesclar, minificar e agrupar arquivos separados em um único arquivo.
  • Eliminar recursos de bloqueio de renderização—Considere fornecer recursos JS e CSS críticos em linha e adiar todos os estilos JS/CSS não críticos. Para obter orientação, consulte Eliminar recursos de bloqueio de renderização.

Produtos e versões afetados

Todas as versões com suporte, 2.3 e posterior de:

  • Adobe Commerce na infraestrutura em nuvem
  • Adobe Commerce no local

Mesclar ou minificar arquivos CSS

O tempo necessário para carregar arquivos CSS e JavaScript (JS) pode ser reduzido com a mesclagem, minificação e agrupamento de arquivos separados em um único arquivo.

IMPORTANT
A infraestrutura do Adobe Commerce na nuvem sempre é executada no modo de Produção e não é possível defini-la de outra forma. Portanto, você deve usar o método de linha de comando para habilitar a mesclagem, a minificação e o agrupamento.

Não mescle ou agrupe arquivos se a implantação usar HTTP/2. HTTP/2 baixa arquivos estáticos de forma assíncrona. Os navegadores devem baixar um arquivo mesclado inteiro antes de processar o conteúdo do arquivo.

Uso do Admin

Para habilitar a mesclagem ou minificação CSS, acesse Admin > Lojas > Configuração > Configuração > Avançado > Desenvolvedor > Configurações CSS.

Usando a linha de comando

Para habilitar a mesclagem de CSS no Adobe Commerce na infraestrutura em nuvem:

  1. Execute este comando localmente:

    code language-bash 
    bin/magento config:set --lock-config dev/css/merge_css_files 1

  2. Confirme as alterações no arquivo app/etc/config.php e reimplante.

Para ativar a minificação CSS no Adobe Commerce na infraestrutura em nuvem:

  1. Execute este comando localmente:

    code language-bash 
    bin/magento config:set --lock-config dev/css/minify_files 1

  2. Confirme as alterações no arquivo app/etc/config.php e reimplante.

Minificar arquivos JS

Uso do Admin

Na barra lateral Admin, vá para Lojas > Configurações > Configuração > Avançado > Desenvolvedor > Configurações do JavaScript.

Usando a linha de comando

Para ativar a minificação de JS no Adobe Commerce na infraestrutura em nuvem:

  1. Execute este comando localmente:

    code language-bash 
    bin/magento config:set --lock-config dev/js/minify_files 1

  2. Confirme as alterações no arquivo app/etc/config.php e reimplante.

Mesclar e agrupar arquivos JS

Você pode ativar a mesclagem ou o agrupamento no Administrador do Commerce (a mesclagem e o agrupamento não podem ser habilitados ao mesmo tempo): Lojas > Configurações > Configuração > Avançadas > Desenvolvedor > Configurações do JavaScript.

Você também pode ativar o agrupamento Adobe Commerce incorporado (agrupamento básico) na linha de comando:

php -f bin/magento config:set dev/js/enable_js_bundling 1

Informações adicionais

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