Dica como eliminar javascript e css de bloqueio de renderização

Se você já usou o Google Pagespeed, na maioria dos casos, você verá uma sugestão que você deve eliminar javascript e css de bloqueio de renderização no conteúdo acima da borda. Veja como resolver.

Elimine recursos que impedem a renderização

O Google enviou muitas notificações recentemente dizendo às pessoas que estão bloqueando seus CSS e Javascript.

Muitas pessoas me perguntaram sobre isso, então eu pensei que poderia explicar isso em termos leigos para aqueles que podem estar confusos e não tem certeza do que fazer.

O que é esse tal de CSS e JavaScript?

CSS é o código que contém as folhas de estilo do seu site. Ele determina coisas como quais fontes devem ser usadas na página e o tamanho de diferentes elementos da página. Os arquivos JavaScript são geralmente arquivos que fazem coisas legais em um site. Por exemplo, se você tem um controle deslizante no seu site, provavelmente isso é controlado por JavaScript.

Por que eu teria CSS e JavaScript bloqueados e por que deveria desbloqueá-lo agora?

No passado, os motores de busca não fazia a leitura do JavaScript. Qualquer coisa que estivesse em JavaScript seria completamente ignorada. Naquele período não havia nenhum interesse em ter o Google rastreando através desses arquivos, pois seria apenas desperdiçar recursos. No entanto, o Google está melhorando e melhorando a compreensão do JavaScript. Há pouco mais de um ano, o Google lançou uma publicação no blog avisando os proprietários de sites deveriam bloquear essas opções.

Da mesma forma, no passado, o CSS raramente era importante para o conteúdo da página. Mas agora, você pode fazer algumas coisas maravilhosas com o CSS. Em alguns casos, se o Google não pode ver o CSS na página, isso pode significar que eles não conseguem ver algumas partes importantes do conteúdo da página.

Eu pessoalmente acredito que a capacidade do Google de interpretar o javascript é parte integrante da forma como o Google está aprendendo a determinar quais são os sites de alta qualidade e que os usuários gostam. Em última análise, o objetivo do Google é mostrar os sites mais úteis no topo dos resultados da pesquisa.

Agora que eles podem ver o javascript eles podem determinar isso.

Como eu sei que estou bloqueando CSS e Javascript?

Primeiro será pela mensagem que o Google envia para o seu e-mail cadastrado junto ao Search Console sobre o bloqueio.

Em seguida, dê uma olhada no seu arquivo robots.txt. Para fazer isso, digite o seguinte na barra de url do seu navegador:

www.seudomínio.com/robots.txt no meu caso seria blogmarketingonline.com.br/robots.txt.

Se você estiver executando um site no WordPress, você pode ver algo que se parece com isto:

Essa linha que está desativando / wp-includes / está bloqueando o Google de ver seu JavaScript, como normalmente é onde os arquivos JavaScript são armazenados para um site do WordPress.

Aprenda como eliminar javascript e css de bloqueio de renderização

Isto é o que diz o Google para Javascript:

Antes que um navegador possa processar uma página para o usuário, tem que analisar a página. Se encontrar um script externo ou bloqueio durante a análise, tem que parar e baixar esse Javascript. Cada vez que ele faz isso, está adicionando uma rede de ida e volta, que vai atrasar o tempo para primeira renderização da página.

Isto é o que diz o Google para CSS:

Esta regra acionada quando PageSpeed Insights detecta que uma página inclui processamento de folhas de estilo externas, que atrasa o conteúdo e causa esse bloqueio.

Nem sempre é fácil ou prático corrigir esse problema ou não tem ideia de como eliminar o javascript e css de bloqueio de renderização o que não é prático na maioria dos casos, como a maioria dos usuários WordPress não é programador fica ainda mais perdido sem ter ideia do que fazer.

Então, qual é a solução?

1. Fazer o que o Google diz.
2. Carregar os arquivos de forma assíncrona.

Qual é o objetivo de eliminar javascript e css de bloqueio de renderização?

Antes de passarmos, devemos saber o qual é o nosso objetivo e o que diz essa mensagem do google. Como eu disse acima o google quer conteúdo acima da dobra e deve mostrar ao usuário sem ter que esperar por esses arquivos serem baixados, que o objetivo é reduzir o tempo de espera e ter mais informações do seu site. Lembre-se que o objetivo é reduzir o tempo de espera, e não para obter uma melhor pontuação no Pagespeed até o momento.

Lembre-se isso se trata de melhorar a experiência do usuário.

É possível eliminar javascript e css de bloqueio de renderização no conteúdo acima da borda wordpress?

Sim, e se você deseja reduzir o tempo de espera, mas no caso se você deseja melhorar junto ao site pagespeed depende de alguns fatores.

Como corrigir o problema?

A solução é remover o / wp-includes / disallow do seu robots.txt.

Ainda assim, para a maioria dos sites WordPress, a correção é bastante simples. Se você tiver o plug-in Yoast SEO instalado, permitirá que você edite seu arquivo robots.txt. Se você não tiver instalado, você pode instalar o plugin com segurança apenas para este fim. Então, na sua barra lateral esquerda, clique em SEO e Ferramentas:

Agora, selecione Arquivo Editor e robots.txt . Então você pode remover toda linha que bloqueia wp-includes que é "Disallow: /wp-includes/" e salvar o arquivo.

Se você não quiser instalar o plugin Yoast poderá fazer tudo manual pelo ftp e acessar o seu robots.txt.

Após ter feito isso entre no seu Search console - Rastreamento - Buscar como google e clique em Buscar e Reinderizar.

Atenção faça primeiro com a opção Computador e depois Googlebot Mobile.

Essa opção abaixo também poderá usar caso a de cima não funcione corretamente.

E quanto a questões de segurança?

Algumas pessoas têm seu JavaScript bloqueado por razões de segurança. Eu não sou um especialista em segurança, por isso é difícil comentar completamente sobre isso. Gary Illyes, do Google, comentou dizendo mesmo que o Google pretenda rastrear seu CSS e JavaScript, eles não incluem esses arquivos no índice do Google

Eliminar o bloqueio de render JavaScript e CSS acima da borda do conteúdo usando plugin Speed Booster Pack

1. Instale o plugin "Speed Booster Pack" no WordPress.
2. Agora navegue até Configurações > abra o speed booster pack
3. Na parte superior em general options marque as seguintes opções: Move scripts to the footer e defer parsing of javascript files.
4. Agora mais abaixo clique na opção: Still need more speed e marque a opção Load CSS asynchronously (habilitar) a opção "carregar o CSS de forma assíncrona", vai remover o erro da parte do CSS.
5. Tem outras opções nesse plugin se precisar usar para melhorar o desempenho faça testes e verifique.

Se estiver precisando de um plugin para otimização de imagens indico a leitura do artigo 17 dicas de como fazer um blog mais rápido.

Existe um outro plugin "Async JS e CSS configurações".

Configurações para o plugin:

1.Load Javascript Asynchronously: Enable
2.Detect <script> tags in wp_head: Disable
3.Detect <script> tags in wp_footer: Disable
4.Load CSS asynchronously: Enable
5.CSS loading method: Leave as it is
6.Minify CSS: Enable
7.Remove “?ver=XXX” part from URLs: Enable

Como você pode ver, existem várias opções que você pode configurar. Minha recomendação é que você deixe como está configurado por padrão (a menos que você saiba o que está fazendo), então clique em "Salvar alterações".

Com um bônus, este plugin também diminui seus arquivos CSS, então é um fantástico 2 × 1.

É muito importante que a próxima coisa a fazer seja revisar cuidadosamente se o seu site ainda está funcionando perfeitamente depois de ativar esse plug-in , pois dependendo do tema ou dos plug-ins usados, algumas funcionalidades podem parar de funcionar.

Após feito um dos procedimentos muitos tem o conceito que vai melhorar a pontuação no site Pagespeed, porém não é esse o conceito e sim melhorar a experiência do usuário final, melhorar a velocidade e o tempo de um site na hora de carregar.

Existem muitos casos que a mensagem deixa uma pessoa louca e não percebe que as vezes o que esta causando essa mensagem é algum banner de afiliado que esta usando. Já passei por isso e agora você entendeu que não é complicado remover os javascript de bloqueio de processamento.

Tem pessoas pirando com os alertas do Google e do Pagespeed de como eliminar javascript e css de bloqueio de renderização e como eu já passei dessa fase hoje eu fico mais preocupado com o Search Console e o Google Analytics.

Agora você tem ideia de como eliminar javascript e css de bloqueio de renderização wordpress e alguns casos pode ser que não funcione 100% por depender de outros fatores.

Atenção: Você não vai conseguir eliminar todos os erros de banners/adsense ou afiliados externos por não ter 100% do controle sobre esses externos.

Espero que tenha curtido o conteúdo sobre:
Dica como eliminar javascript e css de bloqueio de renderização
Em DICAS BLOGS temos diversos artigos sobre este tema. Recomendo :)