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.
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.
Esse plugin é muito leve, tendo somente 176 KB. Atualmente, tem mais de 1,000,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.
Os clientes Kinsta têm acesso direto ao recurso de minificação de código que está embutido diretamente no painel MyKinsta. Este recurso permite aos clientes ativar a minificação automática de CSS e JavaScript com um simples clique.
Após ativar as configurações acima, você verá seus arquivos CSS em um arquivo denominado “autoptimize_xxxxx.css”.
