O bloqueio de renderização no carregamento dos sites pode se dizer que é um "carma" dos web sites WordPress que dependem de JavaScript, CSS e fontes do Google para obterem melhores efeitos visuais. Estes scripts e estilos aterrorizam praticamente todos os Webmasters envolvidos com SEO e também aqueles que estão preocupados em fornecer melhor experiências para os usuários. O certo é que todos nós temos esta preocupação devido ao fato de que os mecanismos de pesquisa; principalmente o Google; dão alta relevância a estes recursos.
Neste site já tem um artigo publicado orientando para você não aprofundar muito neste assunto a ponto de arrancar os cabelos. No entanto é consideravelmente essencial que seu site esteja dentro dos termos aplicados para o SEO. O carregamento rápido das páginas e o desbloqueio da renderização são pontos necessários para se aprimorar estes recursos.
Índice
O que é renderização?
Renderização é um processo usado no desenvolvimento da web que transforma o código do site nas páginas interativas que os usuários veem quando visitam um site. O termo geralmente se refere ao uso de códigos HTML , CSS e JavaScript. O processo é concluído por um mecanismo de renderização, o software usado por um navegador da web para renderizar uma página da web. Por causa de sua estreita associação com navegadores da web, os mecanismos de renderização são comumente chamados de mecanismos de navegador.
Para você entender mais sobre o bloqueio de renderização, veja como os navegadores da web renderizam páginas da web na seguinte sequência:
[wpsm_list type = "marcador"]
- Constrói DOM e CSSOM a partir de código bruto
- Ao carregar uma página da web, um servidor da web envia uma pasta de arquivos contendo código HTML, CSS e JavaScript para o navegador do usuário.
- O mecanismo do navegador converte esses dados (bytes) em caracteres (o código HTML).
- Ele analisa os caracteres em tokens [1] , que são posteriormente analisados em nós [2] .
- O mecanismo do navegador vincula os nós em uma estrutura semelhante a uma árvore conhecida como Document Object Model (DOM). O DOM é a representação JavaScript do HTML.
- Simultaneamente, o navegador converte o código CSS em CSS Object Model (CSSOM) por meio de um processo semelhante.
[/ wpsm_list]
Notas sobre a renderização dos websites e carregamentos de páginas
Não adianta, você perder horas e horas tentando melhorar os tempos de carregamentos do seu site, se ele utiliza o Google Adsense. Os scripts do Google Adsense, Google Analytics e os links das fontes deste mesmo fornecedor, são os que mais atrasam o carregamento dos sites. É até irônico mencionar isso, já que é o maior buscador e dominante de todas as técnicas de SEO para o mundo da web. No entanto, tente desativar todos os scripts deste gigante, que estão adicionados em seu site e faça o teste o Page Speed Insights. A diferença será nítida no carregamento dos sites!
Como eliminar o bloqueio de renderização do Google PageSpeed Insights nos sites WordPress?
Há muitas opções de mercados para eliminar o bloqueio de renderização no site WordPress e eu só quero mostrar algumas boas opções para você praticar no seu site. Uma dessas opções é instalar plugins de cache e compactação de JS e CSS, que são fáceis de configurar e usar.
Opções de eliminar bloqueio de renderização através de plugins:
Com o plugin WP-Optimize:
Instale o plugin e ative as opções de cache e minify. Já nas opções de javaScript ative DENFER todos os arquivos JS, ou liste os arquivos.js a serem carregados depois da análise e carregamento da página HTML.
Na aba Fonts, selecione a opção de carregar de forma assíncrona as fonts do Google, se estiver usando.
Com o plugin Perfmatters
O plugin Perfmatters é uma boa opção para este trabalho, pois ele tem recursos para ajudar limpar os cabeçalhos, que muitas vezes são desnecessários, elimina também as versões de scripts e outros recursos não utilizados. Na parte de configuração extra é possível pré-carregar as fontes do Google, que causam bloqueio de renderização.
Com o plugin Autoptimize
Este é um ótimo plugin gratuito que minimiza os códigos e arquivos Java script, HTML e CSS. Ele ainda tem configurações para carregar as fonts do Google de forma assíncrona sem bloquear a renderização do site no Google PageSpeed Insights. Basta escolher a opção de fonts e seleciona o carregamento Assíncrono.
