Otimize o CSS Crítico do seu site WordPress com LWSOptimize

Procédure

O CSS Crítico permite exibir mais rapidamente o conteúdo visível das suas páginas. Quando um visitante abre uma página, o navegador dele precisa primeiro baixar diferentes arquivos (imagens, scripts, folhas de estilo CSS, etc.). [PERSON_NAME] são [PERSON_NAME], a exibição pode ser atrasada. Com o CSS Crítico, os estilos essenciais para a exibição imediata da página são carregados com prioridade. O restante dos estilos é carregado em seguida, em segundo plano.

Por que utilizá-lo?

A ativação do CSS Crítico pode melhorar a velocidade de exibição do seu site, especialmente em dispositivos móveis ou com uma conexão à Internet lenta.

Os benefícios mais comuns são:

• Exibição mais rápida do conteúdo principal da página.

• Melhor experiência do usuário.

• Melhoria potencial dos indicadores de desempenho como o LCP (Largest Contentful Paint).

Dependendo da configuração do site, o ganho observado pode chegar a várias centenas de milissegundos.

Ativar o CSS Crítico

O WordPress não oferece, por enquanto, otimização do CSS das páginas e artigos. [PERSON_NAME], existem dezenas de plugins WordPress diferentes para atender a essa necessidade, incluindo o plugin LWS Optimize, criado pela LWS.

Por padrão, a opção está desativada neste último, pois ela aumenta o tempo de geração do cache, [PERSON_NAME] ainda mais se a página carregar um grande número de arquivos CSS, e pode provocar problemas de exibição em casos raros.
Para ativá-la, acesse o painel de controle do LWS Optimize e, [PERSON_NAME], escolha as configurações Maximum e salve; [PERSON_NAME] ações do plugin, incluindo o CSS Crítico.

[PERSON_NAME] quiser ativar apenas o CSS Crítico, você também pode acessar as configurações avançadas, na seção Front-End, onde encontrará a linha CSS Crítico.

Ao marcar a opção, será solicitado que você escolha entre 3 modos de funcionamento: Auto - local, Auto e Manual. Uma vez feita a escolha, salve suas alterações, [PERSON_NAME] do CSS Crítico e limpará o cache atual.

Cada modo possui um funcionamento diferente:

• Auto — geração local

Este é o modo padrão do plugin; o CSS das páginas é analisado e depois processado pelo PHP do seu site, gerando diretamente o CSS Crítico. Ele tem a vantagem de funcionar totalmente em local e ser razoavelmente rápido, mas, em contrapartida, consome mais recursos no servidor do que o outro modo. Ainda assim, é recomendado para a maioria dos sites.

Se o desempenho da sua hospedagem [PERSON_NAME], [PERSON_NAME] provocar lentidão para os seus visitantes durante a geração do CSS. [PERSON_NAME], o desempenho pode piorar durante o tempo de geração.

• Auto — serviço LWS

Este modo usa o serviço de geração de CSS crítico da LWS. Um pouco mais lento do que a geração local, especialmente se a API de geração estiver sobrecarregada, sua principal vantagem é que toda a geração é feita fora do servidor, oferecendo um desempenho muito melhor do que a geração local. Em caso de grande demanda, a geração pode, no entanto, ficar indisponível; portanto, ela não é tão confiável quanto a geração local.

Em caso de indisponibilidade temporária do serviço, o plugin alterna automaticamente para a geração local. Além disso, como a geração é feita de forma diferente do modo local, ela pode oferecer melhores resultados dependendo dos sites.

Manual

Este modo é destinado a usuários avançados.
Ele permite inserir manualmente o seu próprio CSS crítico [ADDRESS] prevista para esse fim. O CSS adicionado será usado em todo o site.

Quando o CSS Crítico se torna ativo?

No modo automático, o CSS crítico é gerado ao mesmo tempo que o restante do cache e das opções ([PERSON_NAME]) ; [PERSON_NAME], as próximas visitas usarão o cache gerado.

Pontos a saber

Alguns elementos podem perder sua formatação

Após a ativação, alguns componentes que carregam seus estilos de forma dinâmica (carrosséis, janelas modais, popups, etc.) podem não ser exibidos corretamente.

[PERSON_NAME] gerado:

1. [PERSON_NAME] modo Auto — serviço LWS.

2. Se o problema persistir, use o modo Manual para adicionar os estilos ausentes.

Estilos externos

A geração automática leva em conta apenas as folhas de estilo hospedadas no seu domínio.

Os estilos carregados de serviços externos (CDN, Google Fonts, etc.) não são incluídos no CSS crítico gerado automaticamente.

Conclusão

O CSS Crítico é uma excelente alavanca para acelerar a exibição das suas páginas e melhorar a experiência dos seus visitantes 🚀. Ao priorizar os estilos essenciais, você reduz o tempo de carregamento do conteúdo visível e otimiza potencialmente seus indicadores de desempenho, [PERSON_NAME] LCP 📈.

Agora você já sabe como: entender o interesse do CSS Crítico, ativá-lo no WordPress com o LWS Optimize, escolher entre os modos Auto — geração local, Auto — serviço LWS e Manual, determinar quando ele se torna ativo e antecipar os pontos de atenção relacionados aos componentes dinâmicos e aos estilos externos 😉.

Aplicando essas boas práticas, você poderá aproveitar um site mais rápido, mais fluido e mais agradável de navegar para os seus usuários ✨.

Obrigado pela leitura 🙏 Não hesite em deixar um comentário sobre o serviço e compartilhar o seu retorno de experiência! 🙂