Como otimizar a entrega de CSS no WordPress com pouco aborrecimento
CSS pode melhorar a aparência geral do seu site e é fácil de usar, editar e manter. A única desvantagem é a possibilidade de diminuir a velocidade de carregamento da sua página. Portanto, este artigo criado por nossa equipe em WpDataTables mostrará como otimizar a entrega de CSS no WordPress.
Se o CSS não for bem entregue, o navegador precisará processar e baixar os dados antes de terminar de renderizar sua página. Isso significa que os visitantes terão um atraso ao ver sua página e poderão clicar para desativá-la, pois ela parece não estar carregando. Daí a importância de otimizar a entrega de CSS, então continue lendo para saber como evitar as armadilhas que podem desacelerar sua página da web.
Tudo sobre entrega de CSS
Basicamente, CSS, uma folha de estilos em cascata, torna os sites atraentes e, sem eles, os sites ainda estariam presos nos anos 90.
As páginas da Web, incluindo as páginas da Web do WordPress, são estilizadas por CSS. Cada tema do WordPress usa um arquivo style.cc para criar uma aparência elegante. Adicionar plugins adicionará mais folhas de estilo, por exemplo, se baixar um plugin de widget, ele adicionará um arquivo CSS extra (folha de estilo) para criar a aparência desejada.
Os scripts CSS são carregados antes que seu site fique visível, o que significa que seu navegador não exibirá nenhum conteúdo até que as informações CSS fornecidas sejam processadas. .Isso resulta em bloqueio de renderização que ocorre quando um navegador está carregando todos os scripts CSS antes de mostrar um site.
CSS pode ser usado de várias maneiras para entrega no WordPress, com muitas configurações diferentes.
Independentemente de como você configurou sua página da Web, o CSS pode realmente ajudar a renderizar seu site mais rapidamente.
JavaScript e CSS de bloqueio de renderização – o que é isso?
Sites de carregamento rápido são esperados em nossa sociedade de alta tecnologia e é vital para SEO de alto nível. O PageSpeed Insights do Google pode ajudar você a entender a velocidade de carregamento do seu site. Às vezes, um aviso aparecerá quando você usar a ferramenta – "Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da dobra", mas aqui está uma solução para esse problema.
A renderização do HTML é necessária antes que um navegador possa mostrar qualquer página da web. Enquanto estiver fazendo isso, ele encontrará scripts e folhas de estilo e deve parar para solicitar e baixar esse arquivo. Em seguida, ele o executa e continua passando pelo HTML. A maioria dos temas e plugins para WordPress usa muitos arquivos JavaScript e/ou CSS, o que pode levar muito tempo para renderizar até mesmo uma página do seu site.
Isso evita que os visitantes do seu site vejam rapidamente as informações das páginas da web e, para piorar, esses scripts não precisam ser carregados imediatamente.
Esses arquivos desnecessários são conhecidos como CSS e JavaScript de bloqueio de renderização. Continue lendo para descobrir o que são e como eliminá-los do seu site WordPress.
Use o Google Pagespeed Insights para descobrir CSS e JavaScript de bloqueio de renderização
Navegadores de carregamento lento geralmente estão tentando processar uma quantidade significativa de código CSS e, portanto, não podem renderizar a página, no entanto, nem todos os recursos CSS são bloqueadores de renderização.
Os sites aparecem em branco ou apenas parcialmente visíveis se o CSS foi carregado incorretamente ou a menos que o CSS seja otimizado, o que pode resultar em fontes ou layouts incorretos.
É importante entender quais elementos são necessários e quais não são, para otimizar a entrega do CSS.
Para iniciar o processo de bloqueio de renderização, primeiro teste a velocidade do seu site com o Google PageSpeed Insights.
Veja como:
- Acesse a página do Google PageSpeed Insights
- Copie e cole o URL do nosso site no campo relevante
- Clique em ‘Analisar’
- Isso resultará em um relatório. Observe os scripts que aparecem como ‘Eliminar JavaScript e CSS de bloqueio de renderização’
Normalmente, esses CSS são cruciais para o seu site:
- Acima dos estilos de página de dobra
- Temas
- Cor do fundo
- Outros, dependendo do tipo de site
Esses CSS geralmente são menos importantes:
- Abaixo da dobra CSS
- CSS voltado para outros dispositivos
Reduzir scripts de bloqueio de renderização
É possível minimizar quantos scripts de bloqueio de renderização você tem em seu site:
- Reduzindo a quantidade de CSS e JavaScript. Você pode remover qualquer espaço em branco desnecessário e comentários
- Combinando seu CSS e JavaScript. Pegue diferentes arquivos .css e .js e adicione-os, o que resultará em menos arquivos.
- Adiando o carregamento do JavaScript. Você pode fazê-los carregar por último depois que todo o resto for carregado, usando o carregamento assíncrono.
O WordPress usa um filtro combinado para registrar scripts front-end, para que você possa ver os arquivos CSS ou JavaScript recebidos. Você pode não saber o que procurar, então usar um plugin é útil.
lO CSS não é necessário em todas as páginas o tempo todo. No entanto, ele existe por um motivo e você usará tudo isso em algum momento, que é onde é necessário um caminho de renderização crítico.
Diferentes partes do CSS podem ser necessárias em uma página Fale conosco e uma página Serviços que oferecemos. Quando alguém carrega a página Serviços que oferecemos, as partes CSS que são apenas para a página Fale Conosco não são necessárias naquele momento, no entanto, esse CSS ainda é carregado, porque o webmaster precisa de todos os arquivos CSS carregados para renderizar a página da web.
Portanto, o site precisa de todo o CSS, mas não todo o CSS para cada página. Portanto, o CSS crítico é diferente em cada página e para cada usuário do seu site.
CSS e JavaScript que bloqueiam a renderização acima da dobra são um problema sério e precisam ser corrigidos o mais rápido possível.
Não é realista esperar que seu site tenha uma pontuação de 100/100, então busque uma boa pontuação que dará a seus visitantes uma página de carregamento rápido.
Não remova os scripts necessários para uma boa UX; estes são mais importantes do que tentar alcançar uma pontuação mais alta.
Otimização do caminho de renderização crítico no WordPress
O Caminho Crítico de Renderização denota a ordem em que o navegador executa tarefas para renderizar sua página, ou seja, a sequência em que ele baixa e processa CSS, HTML e JavaScript e os exibe no navegador.
O conteúdo acima da dobra é importante porque esta é a primeira parte que o usuário verá. Há mais tempo para carregar o conteúdo abaixo da dobra, pois o usuário terá que rolar para vê-lo.
Para carregar a seção acima da dobra o mais rápido possível, você deve:
- Crie o HTML para que ele priorize o carregamento das partes acima das dobras
- Minimize os dados usados por CSS, JS e HTML
Mais explicações podem ser encontradas no guia do Google PageSpeed . Às vezes, os dados que você precisa para carregar o ATF são maiores que a janela de congestionamento (totalizando 14,6kb). Nesse caso, mais viagens de rede precisam ocorrer do servidor para o navegador e vice-versa. As redes móveis com alta latência descobrirão que isso impede o carregamento da página.
O DOM é construído uma parte de cada vez pelo navegador, o que pode reduzir o tempo necessário para renderizar o ATF. Estruture o HTML para que o conteúdo acima da dobra seja carregado primeiro e o restante da página depois.
O processo de otimização requer melhoria contínua, monitoramento e medição.
Embora o CSS possa ser usado de várias maneiras para criar páginas da Web elegantes, o mais importante é que ele carrega rapidamente. Limpe o código e siga as etapas acima para que suas páginas sejam carregadas mais rapidamente.
Se você gostou de ler este artigo sobre como otimizar a entrega de CSS no WordPress, confira este artigo sobre como adicionar meta tags no WordPress sem um plugin.
Também escrevemos sobre alguns assuntos relacionados, como incorporar um pdf no WordPress, como incorporar excel em html, como ocultar uma imagem em destaque em um post do WordPress, como saber se um site é WordPress, como desinstalar o WordPress do cPanel e como criar um site como o Amazon.