Como eliminar recursos de bloqueio de renderização no WordPress (CSS + Javascript)
Publicados: 2022-04-22Se você é um usuário do WordPress, recomendo fortemente que o desempenho do site seja uma prioridade. Ao entregar páginas de carregamento rápido aos visitantes, você melhorará suas classificações nos mecanismos de pesquisa, aumentará o tráfego do site e proporcionará aos leitores uma ótima experiência do usuário.
Uma parte fundamental da otimização de um site é analisar as páginas da Web usando ferramentas de benchmarking de desempenho, como Google PageSpeed Insights, GTmetrix e Pingdom Website Speed Test. Esses serviços avaliarão o desempenho de um URL, confirmarão o tamanho da página e confirmarão quanto tempo leva para carregar a página.
As ferramentas de benchmarking de desempenho não apenas analisam suas páginas da web, mas também mostram o que precisa ser abordado para melhorar os tempos de carregamento da página. Por exemplo, você pode ser aconselhado a remover o código CSS não utilizado ou reduzir o peso das imagens em seu site.
Uma recomendação que você verá com frequência é Eliminar recursos de bloqueio de renderização no WordPress . Neste artigo, explicarei o que são recursos de bloqueio de renderização no WordPress e mostrarei como você pode melhorar os tempos de carregamento da página do seu site removendo-os.
O que são recursos de bloqueio de renderização no WordPress?
Otimização de sites tem tudo a ver com entregar as páginas do seu site aos visitantes no menor tempo possível. Uma página típica contém muitos elementos diferentes.
| Estrutura e design | Construído usando HTML e CSS |
| Contente | Texto e imagens |
| Conteúdo dinâmico | Conteúdo dinâmico, como vídeo e controles deslizantes, são exibidos usando Javascript |
Quando alguém visita uma página em seu site, seu navegador processará o código da página de cima para baixo. Isso é comumente referido como " Renderizando a página ".
Se o navegador encontrar chamadas para arquivos CSS ou Javascript externos, ele precisará interromper a renderização da página e baixar esses arquivos CSS e Javascript antes que eles possam ser processados. Esses recursos são, portanto, considerados “ Bloqueio de renderização ”, pois estão interrompendo o processo de renderização da página.
Os recursos de bloqueio de renderização aumentam o tempo que o navegador leva para mostrar o conteúdo principal ao usuário, que é uma importante métrica de desempenho e classificação do mecanismo de pesquisa que o Google chama de First Meaningful Paint (FMP).
Esteja ciente de que texto e imagens não bloqueiam a renderização e nem todos os arquivos CSS e Javascript também bloqueiam a renderização. Ele tende a ser arquivos CSS e Javascript maiores que retardam a renderização da página.
Como identificar recursos de bloqueio de renderização no WordPress
Os recursos de bloqueio de renderização no WordPress podem ser identificados facilmente usando ferramentas de benchmarking de desempenho. Tudo o que você precisa fazer é inserir o URL da página que deseja testar.
O Google PageSpeed Insights destaca o tempo total que os recursos de bloqueio de renderização adicionam à primeira pintura da sua página. Abaixo, você verá um detalhamento que mostra a URL de cada recurso de bloqueio de renderização e o tamanho do arquivo. Ele também mostra o quanto mais rápido sua página pode carregar se o recurso de bloqueio de renderização for eliminado.
O GTmetrix também lista cada recurso de bloqueio de renderização, o tamanho do arquivo e o tempo que leva para baixar o arquivo.
Embora o Pingdom Website Speed Test não tenha uma seção específica que destaque os recursos de bloqueio de renderização, você pode ver o que está causando a lentidão das páginas na área " Solicitações de arquivo ".
Ele destacará recursos de bloqueio de renderização, como ícones, fontes e arquivos Javascript. A URL do arquivo, o tamanho do arquivo e o tempo de download são exibidos para cada recurso. A área de solicitações de arquivos também é útil para ver quais imagens estão aumentando o tempo de carregamento da página.
Como o WordPress chama diferentes arquivos CSS e Javascript em seu site, é importante executar testes de desempenho para várias páginas para que todos os recursos de bloqueio de renderização sejam detectados. Por exemplo, você pode executar testes de desempenho para as principais áreas do seu site, como sua página inicial, índice do blog, postagem do blog, página sobre e página de contato.
Identificando Recursos Críticos
Um recurso é considerado crítico se for necessário exibir a primeira pintura de uma página da web. Todos os outros recursos são considerados não críticos.
Uma das maneiras mais fáceis de identificar recursos críticos é usar a guia Cobertura no Chrome DevTools. Ele destaca exatamente qual porcentagem de arquivos foi necessária para exibir o carregamento inicial da página corretamente. O estilo crítico é exibido em verde, enquanto o estilo não crítico é exibido em vermelho.
Na captura de tela abaixo, você pode ver que no WordPress.org, uma grande porcentagem de código em arquivos CSS e Javascript de bloqueio de renderização não está sendo utilizada. Essa situação é pior em muitos sites WordPress, com o teste de cobertura destacando vários arquivos em que 100% de cada arquivo não é usado.
Eliminando CSS de bloqueio de renderização no WordPress usando chamadas em linha
O Google recomenda mover todo o código crítico dos recursos de bloqueio de renderização para uma chamada em linha da sua página HTML. O estilo que é crítico para a primeira pintura de uma página pode ser definido usando um bloco de estilo dentro da seção de cabeçalho de sua página, enquanto funções críticas de Javascript podem ser chamadas inline dentro de sua página usando tags Script .
Em uma plataforma dinâmica como o WordPress, onde o código CSS e Javascript é adicionado a um site por meio de temas e plugins, pode ser impraticável mover manualmente o estilo crítico. Como tal, muitos usuários do WordPress usam serviços como NitroPack e Critical CSS para que as folhas de estilo críticas sejam extraídas automaticamente e exibidas em linha na seção head .
Se o estilo do site estiver localizado em pequenos arquivos CSS, você poderá usar o plug-in Asset Cleanup do WordPress de desempenho para criar estilos automaticamente em linha a partir de pequenas folhas de estilo.
Remover Javascript de bloqueio de renderização no WordPress usando Async & Defer
Os recursos Javascript de bloqueio de renderização no WordPress podem ser eliminados usando duas técnicas chamadas Async e Defer. Ambos os métodos permitem que o navegador continue renderizando a página enquanto arquivos CSS e Javascript de bloqueio de renderização no conteúdo acima da dobra no wordpress são baixados em segundo plano.
Pode ser preferível usar Async ou Defer em uma página, por isso é importante testar ambos e ver qual técnica fornece os melhores resultados. No entanto, você verá uma redução nos tempos de carregamento da página, independentemente do método usado.
| Assíncrono | Baixe os arquivos conforme a página está sendo renderizada e execute os arquivos assim que estiverem disponíveis |
| Adiar | Baixe os arquivos conforme a página está sendo renderizada e execute os arquivos em ordem sequencial assim que a página terminar de renderizar |
Async e Defer podem ser aplicados em todo o seu site usando um plug-in de desempenho do WordPress.
No meu blog pessoal, uso o plugin Async JavaScript para adiar o Javascript nas páginas. Desenvolvido pelo criador do Autoptimize, Frank Goossens, o Async Javascript permite aplicar Async e Defer a arquivos Javascript não críticos e oferece a opção de aplicar configurações diferentes a arquivos JQuery.
O assistente de configuração do plugin executará vários testes no GTmetrix para determinar as melhores configurações para o seu site.
Eu escolhi Async JavaScript, pois aplica automaticamente Async ou Defer em todo o meu site. Esta é, sem dúvida, a abordagem mais simples para eliminar recursos de bloqueio de renderização no WordPress, mas você pode ver melhores resultados com o plugin WordPress HTTP/2 Push Preload.
Depois de identificar recursos de bloqueio de renderização em seu site WordPress usando a ferramenta de cobertura do Chrome ou um serviço de benchmarking de desempenho, como GTmetrix ou Google PageSpeed Insights, você pode aplicar Async e Defer usando HTTP/2 Push Preload arquivo por arquivo.
Se você estiver disposto a testar o desempenho de Async e Defer para cada arquivo, poderá encontrar a melhor técnica para cada recurso. Isso pode levar a uma maior redução nos tempos de carregamento da página.
Seja qual for o plugin WordPress que você usa para aplicar Async e Defer, certifique-se de verificar o design do seu site depois para garantir que nada tenha quebrado.
Para uma visão mais abrangente deste assunto, leia meu artigo “Como adiar a análise de Javascript no WordPress usando adiar e assíncronar“.
Pensamentos finais
Recursos de bloqueio de renderização no WordPress aumentam muito os tempos de carregamento da página. Eles também afetam a experiência do usuário do seu site, pois os visitantes verão uma página em branco até que todos os recursos de bloqueio de renderização tenham sido baixados e executados.
A ferramenta de cobertura e os serviços do Chrome, como o Google PageSpeed Insights e o GTmetrix, facilitam a identificação de recursos de bloqueio de renderização. Você pode então eliminar recursos de bloqueio de renderização usando plugins do WordPress, como Async JavaScript e HTTP/2 Push Preload.
Obrigado por ler.
Kevin