Aprenda a como eliminar o Javascript e CSS de bloqueio
de renderização do seu blog na
plataforma Blogger.
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:
1 - Procure por <head> e o substitua por:
2 - Procure por </head> e o subtitua por:
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.
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:
5.2 - Com versão mobile:
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.
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
Faça o backup de seu template antes de prosseguir
1 - Procure por <head> e o substitua por:
<head>
2 - Procure por </head> e o subtitua por:
</head><!--<head/>-->
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.
 |
| Localize o css_bundle |
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.
