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.
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:
<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 |
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://www.mariasvemcomigo.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.
Fonte: Fala aí
0 Comentários