Ter um blog ou site rápido é muito importante. É importante se você deseja ter uma classificação alta nos mecanismos de pesquisa. Se o seu site for muito lento, certamente prejudicará seu SEO.
Além disso, um site lento pode aumentar a taxa de rejeição, o que tecnicamente prejudicará sua marca de várias maneiras. Um site lento pode afetar a receita e a conversão.
A maioria dos usuários é impaciente, se o seu site demorar muito para carregar, eles o abandonarão e passarão para uma alternativa mais rápida. Esse é um potencial cliente ou impulsionador de receita que se foi.
Se você está tentando acelerar seu site e usa uma ferramenta de teste como o Google PageSpeed Insight, um aviso que você provavelmente receberá é eliminar os recursos de bloqueio de renderização.
Neste artigo, você aprenderá como eliminar recursos de bloqueio de renderização facilmente.
O que são recursos de bloqueio de renderização?
Os recursos de bloqueio de renderização são CSS e JavaScript que retardam o tempo de carregamento de um site porque ele precisa ser baixado pelo navegador da Web antes que o conteúdo da página possa ser renderizado.
Quando um visitante tenta acessar um site, o navegador começa imediatamente a ler o site de cima para baixo. Se houver algum CSS ou JavaScript, o navegador parará de ler até baixar e processar os arquivos. Antes que o navegador possa renderizar o conteúdo acima da dobra, ele precisa baixar os arquivos CSS ou JavaScript.
Plugins ou temas que você instala podem adicionar alguns desses CSS e JS. Alguns não precisam carregar primeiro, podem carregar depois. Mas porque eles estão lá no topo, eles tornam seu site mais lento.
Então, o que o Google quer dizer com “eliminar recursos de bloqueio de renderização” é que você remove recursos desnecessários do topo do seu site porque isso diminui o carregamento do conteúdo do site.
Como encontrar recursos de bloqueio de renderização
Antes de resolver um problema de bloqueio de renderização, você precisa saber de onde ele vem. Você pode descobrir quais recursos estão bloqueando a renderização executando um teste em Google PageSpeed Insight or Web.Measure.
Você pode seguir as etapas abaixo para encontrar recursos de bloqueio de renderização:
1. Visita Google PageSpeed Insight
2. Digite o endereço do seu site e clique em analisar
3. Role para baixo e procure pelo aviso de eliminar recursos de bloqueio de renderização.
Verifique se há toque no celular e no desktop.
Escolha Ferramentas de blog, não temos problemas de bloqueio de renderização para desktop, mas temos para dispositivos móveis. Então, para isso, usaremos o Mobile, como você pode ver abaixo.
Para dispositivos móveis, como você pode ver acima, temos 2 problemas de bloqueio de renderização. Com uma pontuação de 93. A pontuação foi maior, mas por causa deste post, tive que desativar o plugin Autoptimize.
O BloggingTools.org alcançou essa pontuação sem otimização porque estamos usando um tema muito rápido e leve chamado GeneratePress. Também estamos hospedando em um host muito rápido conhecido como Cloudways.
Anote os: você não deve ficar obcecado em obter 100 na pontuação de insights do PageSpeed. É apenas um guia. Normalmente, uma pontuação média de 65 a 80 é boa para a maioria das pessoas. Não remova arquivos essenciais para o seu negócio.
O bom do WordPress é que você não precisa fazer tudo manualmente. Existem alguns plugins bem codificados para ajudar.
Como corrigir eliminar o problema de recursos de bloqueio de renderização no WordPress
Siga estas etapas para corrigir o problema de recursos de bloqueio de renderização:
1. Instale e ative o Autoptimize
Existem muitos plugins do WordPress que podem fazer isso, como cache total W3, WP Rocket e assim por diante. Mas pela minha experiência com muitos sites, o Autoptimize sempre lida com isso muito melhor do que qualquer um deles. O maravilhoso é que o Autoptimize é compatível com quase todos os plugins de cache do WordPress e é gratuito.
Vá até o diretório de plugins do WordPress para instalar e ativar o Autoptimize
2. Visite as configurações de otimização automática
Se você precisar onde encontrar as configurações do Autoptimize, no painel do WordPress, clique em configurações e clique em Autoptimize.
3. Otimize o JavaScript
Em opções de JavaScript, selecione Otimizar código de script e também selecione arquivos JS agregados. Você pode encontrar as configurações que estou usando para BloggingTools abaixo.
4. Otimize o CSS
Nas opções Otimizar CSS, selecione Otimizar código CSS. Selecione também arquivos CSS agregados e “Também CSS inline agregado”. Veja as opções que estou usando para BloggingTools abaixo.
5. Otimize o HTML
Se você deseja um melhor desempenho, também pode usar o Autoptimize para otimizar o HTML. Em Opções de HTML, selecione otimizar código HTML. Você pode ver as configurações que estou usando para BloggingTools abaixo.
6. Verifique as opções diversas
Você pode verificar as opções diversas e ajustar algumas configurações conforme funciona para você. Você pode encontrar as configurações do BloggingTools abaixo.
7. Salve e esvazie o cache.
Em seguida, basta clicar em Salvar e esvaziar o cache. Isso é tudo!
Depois de tudo isso, você pode verificar seu site novamente no Google PageSpeed Insight. Para o BloggingTools, imediatamente após fazer isso, nossa pontuação saltou para 95 e todos os avisos de eliminação de recursos de bloqueio de renderização desapareceram completamente. Veja abaixo.
Observe que, dependendo de quantos recursos de bloqueio de renderização você possui e de quão cruciais eles são para o seu site, alguns deles podem permanecer. Não tente removê-los.
Se você quiser eliminar ainda mais, você pode usar JavaScript assíncrono, um plugin do mesmo autor que Autoptimize. Eles trabalham juntos. Eu não recomendo isso, pois pode quebrar seu site. A otimização automática por si só está bem!
Conclusão
A velocidade é importante e eliminar recursos de bloqueio de renderização pode ajudar seu site a carregar mais rápido e dar ao seu site uma pontuação melhor nas ferramentas de teste de velocidade. Mas você nunca deve ficar obcecado por essas pontuações, pois elas existem apenas para orientar.
Se o seu site ainda estiver muito lento depois disso. Os três problemas mais prováveis podem ser que seu tema ou seu host da Web seja ruim ou você tenha plugins ruins instalados. Eu recomendo Coudways como o melhor host e GeneratePress como o melhor tema. Se você é um iniciante, Bluehost pode lidar, mas se você puder pagar, Cloudways é o melhor. Você pode começar de graça. Eu uso GeneratePress e Coudways para TargetTrend
Veja também:
Como tornar o WordPress muito rápido
