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
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.Faça o backup de seu template antes de prosseguir
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.
![]() |
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:
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.