Você está encontrando o aviso “combinar CSS externo” no Pingdom, GTmetrix ou Google PageSpeed Insights? Você não é caso único, já que esse é um erro bem comum para muitos proprietários de sites WordPress. Esse aviso é normalmente exibido quando você tem 10 ou mais arquivos CSS carregando a partir de um CDN e/ou subdomínio (domínio externo). Uma forma de corrigir isso é concatenar seus arquivos CSS ou combinar eles para que sejam carregados com uma só solicitação.

Nota: Se estiver executando o HTTPS com um provedor com suporte para HTTP/2, esse aviso normalmente pode agora ser ignorado em segurança. Com o HTTP/2, múltiplos arquivos CSS podem agora ser carregado simultaneamente com uma só conexão.
Aviso para combinar CSS externo no Pingdom

Aviso para combinar CSS externo no Pingdom

Se você ainda está correndo HTTP, sem ter migrado para HTTP/2, você pode seguir o tutorial abaixo sobre como combinar arquivos CSS externos. Uma vez mais, a concatenação é uma técnica geralmente considerada obsoleta nos dias de hoje. Mais de 77% dos navegadores suportam agora HTTP/2 quando executam o HTTPS, assim como muitos CDN e provedores de hospedagem, incluindo Kinsta. É também importante notar que o Pingdom não suporta ainda o HTTP/2, já que utiliza uma versão mais antiga do Chrome.

Combinar CSS Externo no WordPress

O aviso para combinar CSS externo é normalmente encontrado ao usar um CDN, já que você está hospedando seus arquivos CSS em um domínio externo, como o cdn.domain.com. Pode simplesmente concatenar seus arquivos CSS em seu servidor web. Quando eles estiverem combinados, esse aviso deixará de surgir, pois serão carregados em uma única solicitação. Uma das formas mais fáceis de fazer isso é usar um plugin WordPress gratuito conhecido por Autoptimize, desenvolvido por Frank Goossens.

Plugin Autoptimize

Plugin Autoptimize

Esse plugin é muito leve, tendo somente 176 KB. Atualmente, tem mais de 600,000 instalações ativas com uma avaliação de 4.7 em 5 estrelas. O plugin ajuda você a fazer a concatenação dos seus scripts, a minificação, expira cabeçalhos e possui a capacidade de mover estilos para o cabeçalho e scripts para o rodapé.

Pode baixar esse plugin no repositório WordPress ou procurando ele dentro no seu painel WordPress em “Adicionar Novos” plugins. Quando instalado, pode entrar nas configurações e ativar a opção “Otimizar Código CSS”. Isso irá concatenar (combinar) seus arquivos CSS. E se você está usando um CDN, deve inserir o URL do seu CDN. Assim, seus arquivos CSS serão carregados como uma única solicitação ao seu CDN.

Combinar arquivos CSS externos

Combinar arquivos CSS externos

Após ativar as configurações acima, você verá seus arquivos CSS em um arquivo denominado “autoptimize_xxxxx.css”.

Arquivos CSS combinados

Arquivos CSS combinados

4
Shares