Como Eliminar CSS de Bloqueio de Renderização css_mobile_bundle.css e css_bundle.css
Este truque é destinado aos blogueiros que utilizam da plataforma blogger e desejam melhorar o carregamento do blogger e consequentemente aumentar sua pontuação no Page Speed Insights.
Geralmente os modelos do blogger possuem alguns CSS de bloqueios de renderização, que significa que o conteúdo de seu blog não será aberto ao usuário até que o CSS acima da dobra seja totalmente carregado, causando assim um atraso na renderização de sua página.
Este código que mostrarei abaixo é uma maneira simples de bloquear o acesso ao css Bundle do blogger.
Passo 1 - Altere a tag de abertura e de fechamento do HEADER
Este truque é destinado a bloquear totalmente o acesso ao pacote CSS diretamente do blogger. E depois disso podemos otimizar seu acesso.Para começar, altere a tag header
<head> altere para <head>
E a tag de fechamento do header
</head> altere para </head><!--<head/>-->
Agora salve seu modelo. Após esse passo abra alguma postagem de seu blog e clique em CTRL + U ou com o botão direito do mouse clique em EXIBIR CÓDIGO FONTE DA PÁGINA, procure pela tag </head> e você verá algo parecido com a imagem.
Você deve ver o código verde, isso significa que seu pacote CSS agora é apenas uma tag de comentário.
Ainda não paramos por aqui, agora você deve procurar a URL do código verde que refere-se ao css_Bundle.css copie apenas o Url
O CSS de bloqueio de renderização será parecido com o seguinte link no Page Speed Insights
(https://www.blogger.com/static/v1/widgets/4235914959-widget_css_bundle.css) ele estará um pouco após a tag </head>
Abra esse URL no seu navegador e copie o código CSS. Faça também com o modelo para celular, para obter o CSS_Mobile_Bundle.css basta abrir seu blog no navegador pela vista móvel. Para fazer isso abra seu blog no navegador do desktop mesmo e acrescente ?m=1 no final da URL do seu blog, veja o exemplo
seublog.blogspot.com.html?m=1
Faça como da mesma forma da sequencia acima, pressione CTRL + U copie a URL, abra essa URL no seu navegador e, em seguida, copie co código CSS.
https://www.blogger.com/static/v1/widgets/4235914959-widget_css_mobile_bundle.css
Passo 2 - Coloque o CSS Bundle e o CSS Mobile Bundle no blogger
Seja cuidadoso - Se colocarmos este código em qualquer lugar, vai entrar em conflito com o layout do blog. Para fazer isso, devemos separar o acesso que será para Desktop do acesso móvel usando a tag.
<b:if cond="data:blog.isMobile">
<style type="text/css">
------COLE SEU CSS_Mobile_Bundle.css AQUI --------------
</style>
<b:else/>
<style type="text/css">
------COLE SEU CSS_Bundle.css AQUI --------------
</style>
</b:if>
Coloque todo aquele código que você copiou a partir de cada URL que você abriu no navegador na parte destacada em vermelho, e cole este código após a tag <head>. E agora salve seu modelo.
Após todo esse processo você terá eliminado o CSS de Bloqueio de Renderização css_mobile_bundle.css para celular e o css_bundle.css para Desktop
Feliz Páscoa 2019Feliz dia das Mães 2020
Happy 4th of Jully 2019
Happy Mothers Day 2019
MEU QUERIDO PARABÉNS PELA POSTAGEM, CONSEGUI RESOLVER ESSE PROBLEMA NO MEU SITE. GRATO PELA POSTAGEM, AJUDOU BASTANTE.
ResponderExcluirQue bom que você conseguiu resolver seu problema qualquer dúvidas não hesite em perguntar, obrigado
Excluir