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

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.

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

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 sabe como eliminar 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. carrega 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. Lembre-se que o objetivo é reduzir o tempo de espera, e não para obter uma melhor pontuação no Pagespeed.

Lembre-se sempre 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.

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, porém esse não é atualizado + de 2 anos “Async JS e CSS configurações“. Mas lembre-se que não esta sendo mais atualizado ainda pode testar.

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

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 é para melhorar a velocidade e o tempo de um site na hora de carregar.

Existem muitos casos que a mensagem deixa louco 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 Pagespeed de como eliminar javascript e css de bloqueio de renderização 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.

Dica como eliminar javascript e css de bloqueio de renderização
3.92 (78.46%) 13 votes
-->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.<--

Receba novidades no seu email:

Delivered by FeedBurner

Claudio Gomes

Empreendedor online e offline. Empreendimentos e negócios. Trabalho com Internet Marketing/Negócios Online alguns anos e consegui acumular muitas informações sobre negócios e formas de ganhar dinheiro online. Trabalho com informática e represento uma empresa de perfumaria e cosméticos.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *


*

12 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.

  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 !!