Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda | Blog do Joanir -->

Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

terça-feira, 23 de fevereiro de 2016
Aprenda a como eliminar o Javascript e CSS de bloqueio de renderização do seu blog na plataforma Blogger.

Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda
Css_bundle

Este tutorial foi escrito por Ahmad Zamron e você pode ler o original (em inglês) clicando no link: 2 step to eliminate render blocking css mobile 2 bundle.css and css 2 bundle.css. Se quiser, pode assistir ao vídeo que ele fez clicando aqui.


PageSpeed Insights

Como blogueiros, sempre devemos aprimorar o nosso blog. Não basta apenas deixá-lo "bonitinho". Devemos também adaptá-lo a todos os tipos de públicos e dispositivos. Ou seja, deixá-lo bem legível com fontes confortáveis de ler; torná-lo responsivo (se adequando aos diversos tipos de telas, principalmente às telas dos dispositivos móveis, já que nos últimos anos, se aumentou muito o acesso vindo deles) e principalmente, deixá-lo leve e rápido.

Este último ponto é, por muitas vezes, deixado de lado. É comum você entrar num blog (principalmente desses de moda feminina) e ver que o layout é formado por várias imagens de fundo, bem colorido, com diversos plugins, etc. Isso pode ser visivelmente bonito, mas pesa muito para o navegador carregar a página, principalmente se no caminho ele encontra alguns links externos para códigos de JavaScript e CSS. Quando isso acontece, o navegador praticamente para de carregar a página para ler o código e só depois, prosseguir.

Quem usa a plataforma Blogger, já deve ter verificado a velocidade de seu blog no PageSpeed Insights e se deparado com alguns códigos de bloqueio de renderização.

Nesses casos, você não precisa excluir esses códigos, basta apenas, no editor HTML do seu blog, localizá-lo e colocar o atributo async='async', como no exemplo abaixo.

<script async='async' src='http://ajax.googleapis.com/ajax/jquery.js' type='text/javascript'/>

Este atributo adia o carregamento deste plugin para depois do carregamento total da página.

Porém, no Blogger, temos um probleminha chato: não conseguimos localizar no editor HTML estes dois códigos de bloqueio:

Códigos de bloqueio do Blogger

Eliminando CSS de bloqueio

Neste tutorial, vamos aprender a como localizá-los e melhorarmos seu carregamento.

ATENÇÃO
Faça o backup de seu template antes de prosseguir

1 - Procure por <head> e o substitua por:

&lt;head&gt;

2 - Procure por </head> e o subtitua por:

&lt;/head&gt;&lt;!--<head/>--&gt;

3 - Salve o seu template. Ele já não carregará esses dois códigos, mas estará uma verdadeira bagunça. Abra uma página do seu blog, clique com o botão direito do mouse em qualquer lugar dela e clique em Exibir código fonte (Ctrl+U).

4 - Nesta página, procure por </head> e você encontrará o seu código CSS, como na imagem abaixo. Então, copie esse código e o abra em outra janela. Deixe-a aberta.

O código está no href do link após o fechamendo de </head>
Localize o css_bundle

4.1 - Se você tem a versão mobile do seu blog  ativa, então abra uma página do seu blog e acrescente ?m=1 no final da url (por exemplo: http://masqueseyo.com.br?m=1) e repita o processo dos passos 3 e 4.

5 - Volte para o editor HTML do seu blog e cole o seguinte código antes de <b:skin>:

5.1 - Sem versão mobile:

<style type="text/css">
-----------COLE SEU CSS_2_Bundle.css AQUI ------------
</style>

5.2 - Com versão mobile:

<b:if cond="data:blog.isMobile">
<style type="text/css">
------COLE SEU CSS_Mobile_2_Bundle.css AQUI -------
</style>
<b:else/>
<style type="text/css">
-----------COLE SEU CSS_2_Bundle.css AQUI ------------
</style>
</b:if>

5.3 - Apague a linha que está escrito COLE SEU CSS... e no lugar dela, coloque todo o código que estão nas respectivas páginas que você abriu no passo anterior.

6 -  Salve o seu template e verifique se a velocidade de carregamento do seu blog melhorou.

Prós e contras

O bom é que o conteúdo da página é exibido mais rapidamente, mesmo que o carregamento não tenha terminado por completo. Isso é ótimo, principalmente se o usuário estiver acessando seu blog pelo celular.

Porém, nem tudo são flores. Há algumas funcionalidades pequenas que não funcionarão corretamente. Uma delas é que os botões da compartilhamento padrão do Blogger desaparecerão. Na verdade, eles ainda estarão lá, mas não serão visíveis. Outra coisa que não aparecerá é aqueles "lapisinho" de edição de post. Mas, para isso, há uma solução: procure por:

.item-control{display:none}

 E substitua none por inline-block. Só que fazendo isso, esse lápis ficará visível para todos, mas só você poderá editar a postagem.

  Quer ajudar o nosso blog?

Este tutorial foi útil pra você? Te ajudou a melhorar o seu blog? Então nos ajude também, dê like, comente e compartilhe este post. Ah, e deixe também sua doação em dinheiro:
FAÇA SUA DOAÇÃO ONLINE CLICANDO AQUI

Qualquer dúvida, deixe seu comentário aí embaixo ou visite o post original para saber de mais detalhes. Até a próxima!

Tá difícil?

Podemos fazer isso pra você.
Contrate-nos