How to remove blocking CSS and Javascript files in Blogger, such as Widgets.js?

5

I'm trying to optimize the loading speed of my Blogger site by removing unneeded CSS files that I do not use, nor do I intend to do in the future. For example:

<link type="text/css" href="https://www.blogger.com/.../widget_css_bundle.css"/>
<script type="text/javascript" src="//www.blogger.com/.../widgets.js"></script>

I've already removed all external files from <head> of my theme / template, but keep on saying to optimize these two links:

https://www.blogger.com/dyn-css/authorization.css?targetBlogID=8710304722259354525&zx=2381a04e-88ac-4d76-996f-5a33d1055397  
https://www.blogger.com/static/v1/widgets/3645911276-widget_css_bundle.css

But these links only appear on view-source of the page, I do not even know how they are being generated or how to optimize them.

How to remove Blogger JavaScript Widgets (Widgets.js) and default CSS to increase page speed . Any ideas?

    
asked by anonymous 10.04.2016 / 14:07

2 answers

4

These files are implemented automatically by Blogger, not by the template, so in the template you will not find where they are being generated.

Removing these files can improve the upload speed of your Blogger site. But if you're using Blogger widgets or gadgets, it's extremely recommended not to do this ! This is only recommended for Bloggers who develop their own themes ( templates ) and almost never use widgets or gadgets.

RemovethedefaultCSSfromBlogger

1-InBloggersettings,navigatetoTemplate→EditHTML
2-Search&replace:

<b:skin><![CDATA[

bythefollowing:

&lt;styletype=&quot;text/css&quot;&gt;&lt;!--/*<b:skin><![CDATA[*/]]></b:skin><styletype='text/css'>

3-Search&replace(tagclosingabove)

]]></b:skin>

bythefollowing:

</style>

RemovethedefaultJSfromBlogger

1-NavigatetoTemplate→EditHTML
2-Search&replace:

</body>

bythefollowing:

&lt;!---</body>---&gt;&lt;/body&gt;
  

OnceyouhavedonethishacktoremovetheJSfiles,youwillnoticethatattheendofthe  yourpage/Blog,alittlelikethiswillappear:-->,attheendof  closureofthe</body>tagasfoundinmanyBlogsthatusethismethodtodispensewithloadingthesefiles,butwithafewmodificationsof  CSSstylescanmakethisarrow"invisible" or less visible   changing the text color of <body> , as in the example below, and then   then give the desired color again to the supposed 'body' in an element    wrapper / container with a lower level if it made me understand:

body {color:#F2F2F2; /* Escolha uma cor para que a seta fique igual à cor de fundo do body */}
#elementoWrapper {color:#000; /* Dê novamente a cor desejada para o body */}
     
<body>
    <div id="elementoWrapper">
        Conteúdo aqui...
    </div>
</body>

After this, your default CSS and JS files will not load.

    
27.04.2016 / 02:32
0

In my case it did not solve, but I discovered a new solution (which I now perceived to be the same as the above solution for the JS case). Just replace the:

<head>

by:

&lt;!--<head>--&gt;&lt;head&gt;

I do not know why, probably some Blogger update or something related to my template. The loading of .css was just under <head> in my case, I do not know about yours.

    
25.07.2018 / 16:48