-->Aproveite e cadastre seu email abaixo para receber novas atualizações do site. Após colocar o seu email abaixo vai receber um email de confirmação de cadastro não esqueça de clicar.

Coloque abaixo o seu melhor email e fique atualizado:

Delivered by FeedBurner


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.

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.

eliminar-javascript-e-css-de-bloqueio-de-renderização

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.

33 comentários em “Dica como eliminar javascript e css de bloqueio de renderização”

  1. Nossa meu amigo! boa dica ! estou ficando pirada com isso ja tentei de quase tudo , e nada, vou tentar mais uma vez com estas dicas que você passa no Seu artigo, voltarei aqui para dizer se deu certo, um forte abraço.

    1. Valdeci lembrando que em alguns casos o que ele acusa é de algum serviço (recurso) externo e você não tem como alterar.

      Fico no aguardo sobre o seu resultado.

  2. Olá, Cláudio!

    Parabéns pelo post. Foi o único entre dezenas de milhares que sugeriu uma solução para o bloqueio de renderização. Além dessas opções, tem outras duas que selecionadas ainda aumentam em 1% a velocidade.

    O PROBLEMA é que quando faço o bloqueio da renderização marcando a opção “Load CSS asynchronously”, ele “voa” (76/100 no teste), mas desconfigura a paginação. Se eu fico na home, tudo bem, mas se eu clicar nas páginas dois e três e quaisquer outras que existirem fica tudo desconfigurado, com fotos grandes e fora de posição.

    Desta forma, eu não posso escolher essa opção sugerida e minha navegação no celular continua péssima +- 20s para abrir (no teste está pífios 56/100)

    1. Adilson seja bem vindo.

      Alguns fatores: alguma incompatibilidade com algum plugin (paginação) com o tema ou algum problema com tema antigo.

      Se usa algum plugin de paginação desativa, limpa o cache e testa.

      O seu tema é compatível com mobile?

  3. Infelizmente instalei no meu blog e não obtive resultado. O POST esta TOP, porém ainda continuo aqui com o problema, já tentei via código manual, etc, etc, etc e o famoso: “Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda” continua… Abs e qualquer novidade me avise. Abs!

    1. Anderson Ferro se for possível informe se algum dos passos informado no artigo deu algum erro. Acabei de olhar o robots.txt do seu blog e não tem nada de errado para que tenha esse bloqueio. Você atualizou também no seu search console?

  4. Poxa,muito obrigado mesmo ! eu estava perdido aqui,já que eu sou novo nisso,e recentemente comecei a estudar sobre sites e etc, e não tava entendendo nada que os tutoriais diziam, parece que falavam grego kk até já pensava em adquirir outro template kkk
    Mas esse plug-in e dicas que vc deu arrumaram basicamente tudo !!
    Vlw msm ! agora to indo ler o artigo sobre ”17 dicas de como fazer um blog mais rápido” já que tbm deu aquele problema de otimizar imagens kkkkkkkk vlw mesmo mano,abrçs !!

    1. Pedro eu tive o mesmo problema na época e fui estudar sobre o assunto e quando resolvi o meu problema fiz esse artigo para ajudar.

      Qualquer dúvida posta e tento ajudar.

  5. Legal o plugin, mas no meu site quando faço a config acima ele melhora no page speed porem um carousel que tem no site classiplast.com.br para de funcionar.

    1. Erick nesse caso precisa verificar o tema do seu site nesse caso o que esta acontecendo com essa parte que citou o problema.

  6. Meus parabéns pelo poste CLAUDIO GOMES, excelente trabalho!

    Um excelente resultado para todos!

  7. Eu tenho um site que aparece este problema, não entendo nada disso e gostaria da sua opinião, devo corrigir e eliminar javascript e css de bloqueio de renderização.
    Meu site é formulagratis – com – br, dá uma olhada e de a sua opinião por favor.
    Um abração e parabéns pelo conteúdo.

    1. Aparecido você fez tudo conforme é explicado no artigo? Lembrando para eliminar 100% somente pedindo alguém que entenda de programação/wordpress para alterar o código e resolver. Aqui mesmo no BMO devido algumas restrições do tema não deu para resolver tudo.

  8. Vou testar aqui no meu blog, quero deixar ele mais rápido, pelo menos no verde esta bom para min!

  9. Olá Claudio, muito obrigado pelo conteúdo.. Ajudou bastante.. Abraços

  10. Olá! Primeiramente parabéns pelo post! Está super didático.

    Só que mesmo com a facilidade, não consegui ajustar isso no meu blog. Olha só como está meu Robots .txt no yoast: (não há a expresssão “Disallow: /wp-includes/” para eu poder excluir. Você poderia me dar uma dica?

    User-agent: *
    Disallow: /wp-admin
    Disallow: /wp-content
    Allow: /wp-content/uploads

    User-agent: Googlebot-Image
    Allow: /*
    Disallow:

    Sitemap: viajandonajanela.com/sitemap_index.xml

    1. Muda o site robots para esse abaixo e upa no search console:

      # global
      User-agent: *
      Allow: /
      Disallow: /xmlrpc.php

      # qualquer endereco que contenha, [busca interna] ?
      Disallow: /*/*?s=*

      #Sitemap

      Sitemap: (adicione a sua url completa) viajandonajanela.com/sitemap_index.xml

      O seu sitemap esta acusando um erro verifica o que esta acontecendo.

  11. Não consegui, porque não tinha o includes e ainda não saiu oque faço ?

  12. Legal, Claudio, porém essa solução é só para WordPress, e para quem usa uma solução sass como eu que tenho um e-commerce na Loja Integrada, como faço para resolver isso ?
    Meu site é limphus se puder dar uma olhada e me diga qual a solução, tenho lá um Javascript que bloqueia a renderização e não sei o que fazer. O Google tem alguns post mas não ensina o que deve ser feito eu não sou programador aí meu amigo fica muito difícil. Se é difícil para os programadores, imagina para nós que não entendemos nada de programação.

    1. Arnaldo eu somente conheço e uso wordpress. Realmente não sei informar. Já tentou em fóruns sobre a plataforma que você usa?

  13. Ola Claudio,

    Me tire uma duvida, coloquei meu site no PageSpeed do google e vi que uma das opções que deixa ele lenta e sobre o meu tema.

    Se eu bloquear isso no robots da algum problema, a url que aparece lá é essa aqui (tirando o nome do meu site) : nomedomeusite-com/wp-content/themes/centiveavante/img/bg-stripes.png

    Ai no caso eu vou bloquear: wp-content/themes/
    Tem algum problema se eu bloquear assim? Pq eu acho que vou estar bloqueando o tema todo certo?
    Ou se eu colocar essa url todo Bloqueia apenas ela?

    Obrigado

    1. Lucas se você colocar no robots wp-content/themes/ vai bloquear vários recursos do tema. Ou você faz wp-content/themes/centiveavante/img/bg-stripes.png ou verifica antes o que é isso no seu tema para tentar resolver. Lembrando que somente colocar essa url completa wp-content/themes/centiveavante/img/bg-stripes.png não vai impedir a lentidão.

      1. Ok, pelo seu direcionamento deu pra entender perfeitamente o que eu tenho que fazer, obrigado!

  14. obrigado amigo, aqui no meu deu certo, o robo esta bloqueando esse arquivo

  15. Amigo, obrigado pelas dicas, o meu Robots.exe esta assim;

    # BEGIN WordPress

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ – [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]

    # END WordPress

    Poderia me ajudar? Obrigado.

      1. Olá, escrevi errado. O meu está errado? Se sim como posso corrigir?
        Obrigado

Deixe uma resposta