Como otimizar facilmente a entrega de CSS do WordPress (2 métodos)

0
148

Você gostaria de otimizar sua entrega de CSS do WordPress?

Os arquivos CSS controlam a formatação visual e o estilo do seu site WordPress. Mas se o seu código CSS não for entregue de maneira ideal, isso pode estar deixando o seu site mais lento.

Neste artigo, mostraremos dois métodos fáceis para otimizar a entrega de CSS do WordPress.

 

Como a entrega de CSS do WordPress afeta o desempenho do WordPress

Os arquivos CSS são usados ​​para definir a aparência visual do seu site WordPress. Seu tema WordPress contém um arquivo de folha de estilo CSS e alguns de seus plug-ins também podem usar folhas de estilo CSS.

CSS é necessário para sites modernos, mas é possível que os arquivos CSS diminuam a velocodade e o desempenho do  seu site dependendo de como eles estão configurados.

Mesmo um pequeno atraso na velocidade do site cria uma experiência ruim para o usuário e pode afetar suas classificações de pesquisa e conversões, resultando em menos tráfego e vendas.

Estudo StrangeLoop

Uma maneira que os arquivos CSS podem tornar seu site mais lento é se eles precisarem ser carregados antes que a página possa ser exibida. Isso significa que seus visitantes verão uma página em branco até que o arquivo CSS seja carregado. Isso é conhecido como CSS de bloqueio de renderização.

Outro motivo comum pelo qual os arquivos CSS podem tornar seu site mais lento é quando eles contêm mais código do que o necessário para exibir a parte visível da página atual. Esse código extra significa que eles vão demorar mais para carregar.

A boa notícia é que você pode melhorar o desempenho do seu site WordPress otimizando a forma como o código CSS é entregue.

Isso é feito identificando o código CSS mínimo necessário para exibir a primeira parte da página da web atual. Isso é conhecido como CSS crítico .

Esse código crítico é então adicionado embutido no HTML da página, em vez de em folhas de estilo separadas, para que o código possa ser renderizado sem a necessidade de carregar o arquivo CSS primeiro.

O restante do CSS pode ser carregado depois que os visitantes podem ver o conteúdo da página. Isso é conhecido como ‘carregamento adiado’.

Neste tutorial, mostraremos dois métodos para otimizar a entrega de CSS do WordPress, e você pode escolher aquele que funciona melhor para você.

 

Método 1: Otimizando a entrega de CSS do WordPress com WP Rocket

WP Rocket é o melhor plugin de cache para WordPress do mercado. Ele oferece a maneira mais simples de otimizar a entrega de CSS do WordPress. Na verdade, é tão fácil quanto marcar uma caixa.

WP Rocket é um plugin premium, mas a melhor parte é que todos os recursos estão incluídos em seu plano inferior.

A primeira coisa que você precisa fazer é instalar e ativar o plugin WP Rocket.

Uma vez ativado, você precisa navegar até a página Settings »WP Rocket e mudar para a guia ‘File Optimization’.

Mudar para a guia Otimização de arquivo

Em seguida, você precisa rolar para baixo até a seção de arquivos CSS. Uma vez lá, você precisa marcar a caixa ao lado da opção ‘Otimizar entrega de CSS’.

Verifique Otimizar entrega de CSS

Esse recurso identificará de forma inteligente o CSS crítico necessário para formatar a parte da página da web que os visitantes veem primeiro. Suas páginas serão carregadas mais rapidamente e o restante do CSS será carregado depois que seus visitantes puderem ver seu conteúdo.

Tudo que você precisa fazer agora é clicar no botão Salvar alterações e esperar que o WP Rocket gere o arquivo CSS necessário para todos os seus posts e páginas.

Ele também limpará  automaticamente o cache do seu site, para que os visitantes vejam a nova versão otimizada do seu site em vez de quaisquer versões não otimizadas armazenadas no cache.

A WP Rocket pode ajudá-lo a melhorar o desempenho do seu site de várias outras maneiras.

Método 2: Otimizando a entrega de CSS do WordPress com Autoptimize

Autoptimize é um plugin gratuito desenvolvido para melhorar a entrega de arquivos  CSS e JS do seu site .

Embora o Autoptimize seja um plugin gratuito, ele não tem tantos recursos quanto o WP Rocket e leva mais tempo para configurar.

Por exemplo, não é capaz de identificar automaticamente CSS crítico como o WP Rocket pode. Em vez disso, o Autoptimize requer a ajuda de um serviço premium de terceiros, que tem um custo adicional e requer tempo extra para configuração.

No entanto, pode ser uma boa opção se você estiver com um orçamento apertado e não precisar de todos os outros recursos do WP Rocket para acelerar seu site.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Autoptimize .

Após a ativação, você precisa visitar a página Configurações »Otimização automática para definir as configurações do plugin. Uma vez lá, você precisa rolar para baixo até a seção Opções de CSS e marcar a caixa Otimizar código CSS na parte superior.

Role para baixo até Opções CSS

Depois de fazer isso, você precisa ter certeza de que a opção ‘Agregar arquivos CSS’ está desmarcada e, em seguida, marque ‘Eliminar CSS de bloqueio de renderização’.

Agora você pode clicar no botão ‘Salvar alterações e esvaziar cache’ para armazenar suas configurações.

Mas o plug-in não funcionará corretamente até que você se inscreva para uma conta CSS crítica. Este é um serviço de assinatura premium que fornecerá a otimização automática do código CSS crítico de que precisa para otimizar a entrega de CSS do WordPress.

Para fazer isso, navegue até a guia CSS crítico nas configurações de Otimização automática. Aqui você encontrará as informações de que precisa para se inscrever no CSS Crítico. Você pode começar clicando no link de inscrição no terceiro parágrafo.

Inscreva-se para uma conta CSS crítica

Depois de receber sua chave de API CSS crítica, role para baixo até a seção Chave de API para que você possa colá-la na caixa de texto ‘Sua chave de API’. Depois disso, certifique-se de clicar no botão Salvar alterações.

Cole sua chave crítica de API CSS

Autoptimize agora tem todas as informações de que precisa para adicionar o CSS crítico em linha e adiar o carregamento das folhas de estilo até que a página tenha sido renderizada. Como resultado, seu site carregará mais rapidamente.

Esperamos que este tutorial tenha ajudado você a aprender como otimizar a entrega de CSS do WordPress.