Criar um Site Online

Como Eliminar CSS de Bloqueio de Renderização no Blogger

<h2>
Como Eliminar CSS de Bloqueio de Renderização css_mobile_bundle.css e css_bundle.css</h2>
<br />
Este truque é destinado aos blogueiros que utilizam da plataforma blogger e desejam melhorar o carregamento do blogger e consequentemente aumentar sua pontuação no <a href="https://developers.google.com/speed/pagespeed/insights/?hl=pt-BR" rel="nofollow" target="_blank">Page Speed Insights</a>.<br />
<br />
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.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7CYBTlABeL-gmK84pnuiiDIZzATwPZYLyPrO6PDzs8whIaCF95jCy270m_pdemaOlYGji7UDpFB25WS76FX8ur5Ro_UF8PHG2mGtGUK8cntVuanr92T_agZMZcUlJ0d2GL2uqM_MBYRw/s1600/Remover+bloqueio+de+renderiza%25C3%25A7%25C3%25A3o.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7CYBTlABeL-gmK84pnuiiDIZzATwPZYLyPrO6PDzs8whIaCF95jCy270m_pdemaOlYGji7UDpFB25WS76FX8ur5Ro_UF8PHG2mGtGUK8cntVuanr92T_agZMZcUlJ0d2GL2uqM_MBYRw/s1600/Remover+bloqueio+de+renderiza%25C3%25A7%25C3%25A3o.JPG" /></a></div>
<br />
<br />
Este código que mostrarei abaixo é uma maneira simples de bloquear o acesso ao css Bundle do blogger.<br />
<br />
<h3>
Passo 1 - Altere a tag de abertura e de fechamento do HEADER</h3>
Este truque é destinado a bloquear totalmente o acesso ao pacote CSS diretamente do blogger. E depois disso podemos otimizar seu acesso.<br />
Para começar, altere a tag header<br />
<br />
<b><head></b>  altere para <span style="background-color: white; color: #222222; font-family: "arial"; font-size: 13.3333px; text-align: justify;"><b>&lt;head&gt;</b></span><br />
<span style="background-color: white; color: #222222; font-family: "arial"; font-size: 13.3333px; text-align: justify;"><br /></span>
E a tag de fechamento do header<br />
<br />
<b></head></b> altere para <b>&lt;/head&gt;&lt;!--<head/>--&gt;</b><br />
<br />
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 <b>EXIBIR CÓDIGO FONTE DA PÁGINA</b>, procure pela tag </head> e você verá algo parecido com a imagem.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-VXC4RwXv6WXUabvQQH3AIM9Z-_YazXfGkpiUsSa55K0XlmOPSBa8zC5YFnp7NVUlx2bIc3FJJsdfOyVnl4m9X0DHwrkZCaFfYLbdDaBTWU0isoh8on5UZDOtIXHjEXdfP0UxtlSTJ4/s1600/eliminar+css+de+bloqueio+de+renderiza%25C3%25A7%25C3%25A3o.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-VXC4RwXv6WXUabvQQH3AIM9Z-_YazXfGkpiUsSa55K0XlmOPSBa8zC5YFnp7NVUlx2bIc3FJJsdfOyVnl4m9X0DHwrkZCaFfYLbdDaBTWU0isoh8on5UZDOtIXHjEXdfP0UxtlSTJ4/s640/eliminar+css+de+bloqueio+de+renderiza%25C3%25A7%25C3%25A3o.jpg" width="640" /></a></div>
<br />
Você deve ver o código verde, isso significa que seu pacote CSS agora é apenas uma tag de comentário.<br />
<br />
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<br />
<br />
O CSS de bloqueio de renderização será parecido com o seguinte link no Page Speed Insights<br />
(<span style="color: #236e25; font-family: monospace; white-space: pre-wrap;">https://www.blogger.com/static/v1/widgets/4235914959-widget_css_bundle.css</span>) ele estará um pouco após a tag </head><br />
<br />
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 <b>?m=1</b> no final da URL do seu blog, veja o exemplo<br />
<br />
seublog.blogspot.com.html<b>?m=1</b><br />
<br />
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.<br />
<br />
<span style="color: #236e25; font-family: monospace;"><span style="white-space: pre-wrap;">https://www.blogger.com/static/v1/widgets/</span></span><span style="color: #236e25; font-family: monospace; white-space: pre-wrap;">4235914959</span><span style="color: #236e25; font-family: monospace;"><span style="white-space: pre-wrap;">-widget_css_mobile_bundle.css</span></span><br />
<br />
<h3>
Passo 2 - Coloque o CSS Bundle e o CSS Mobile Bundle no blogger</h3>
<div>
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.</div>
<div>
<br /></div>
<div>
<div>
<b:if cond="data:blog.isMobile"></div>
<div>
<style type="text/css"></div>
<div>
<span style="color: red;">------COLE SEU CSS_Mobile_Bundle.css AQUI --------------</span></div>
<div>
</style></div>
<div>
<b:else/></div>
<div>
<style type="text/css"></div>
<div>
<span style="color: red;">------COLE SEU CSS_Bundle.css AQUI --------------</span></div>
<div>
</style></div>
<div>
</b:if></div>
</div>
<div>
<br /></div>
<div>
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.</div>
<div>
<br /></div>
<div>
Após todo esse processo você terá eliminado o CSS de Bloqueio de Renderização <b>css_mobile_bundle.css</b> para celular e o<b> css_bundle.css</b> para Desktop</div>
<a href="https://mensagemfelizpascoa2019.club/">Feliz Páscoa 2019</a><br />
<a href="https://mensagemdefelizdiadasmaes2020.club/">Feliz dia das Mães 2020</a><br />
<a href="https://happy4thofjuly2019.club/">Happy 4th of Jully 2019</a><br />
<a href="https://happymothersday2019.club/">Happy Mothers Day 2019</a>

Como Eliminar CSS de Bloqueio de Renderização no Blogger

Como Eliminar CSS de Bloqueio de Renderização css_mobile_bundle.css e css_bundle.css Este truque é destinado aos blogueiros que utilizam ...

Código Convertido