DocumentaçãoCommerceManual de implementação

[Somente PaaS]{class="badge informative" title="Aplica-se somente a projetos do Adobe Commerce na nuvem (infraestrutura do PaaS gerenciada pela Adobe) e a projetos locais."}

Otimizar arquivos de recurso

Last update: Wed Apr 01 2026 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 minificar e agrupar arquivos.
  • 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 mesclagem ou minificação CSS, acesse Admin > Stores > Settings > Configuration > Advanced > Developer > CSS Settings.

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

Usando o Admin

Na barra lateral Admin, vá para Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.

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.

Agrupar arquivos JS

Você pode habilitar o agrupamento no Commerce Admin: Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings.

NOTE
A mesclagem e o agrupamento não podem ser habilitados ao mesmo tempo.

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

Mesclar arquivos JS (não recomendado) merge-js-files

WARNING
Não é recomendável habilitar Merge JavaScript Files. Esta configuração foi projetada apenas para JavaScript carregada de forma síncrona na seção HEAD da página e pode fazer com que o agrupamento e a lógica do RequireJS funcionem incorretamente. Ele é mantido somente para compatibilidade com versões anteriores e não oferece benefício de desempenho quando HTTP/2 está ativado.
Se o Merge JavaScript Files estiver habilitado e tiver problemas, tente desabilitá-lo antes de aplicar os patches. Consulte ACSD-67908 se não puder desabilitar a mesclagem.

Informações adicionais

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