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

Asked

Viewed 937 times

5

I’m trying to optimize the loading speed of my Blogger site by removing unnecessary CSS files that I don’t 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 have already removed all the external files from <head> of my theme/template, but continues to say 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

Only these links only appear on view-source from the page, I don’t even know how they are being generated or how to optimize them.

How to remove Javascript (Widgets.js) and default CSS widgets from Blogger, to increase the page speed. Any idea?

javascript css optimizing blogger

  • Be more specific in your doubt. They must be being added to the page by javascript, but I still don’t understand what you define by "locking css", what exactly problem you’re having?

2 answers

4


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

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

inserir a descrição da imagem aqui

Remove default CSS from Blogger

1- In Blogger settings, navigate to the Edit HTML Template
2-Search & replace: 

<b:skin><![CDATA[

by the following:

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

3-Search & replace (tag close above)

]]></b:skin>

by the following:

</style>

Remove Blogger’s default JS

1- Navigate to the Edit HTML Template
2-Search & replace: 

</body>

by the following:

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

Done this hack to remove JS files, you will notice that at the end of your page/Blog, will appear a arrow like this: -->, at the end of tag closure </body> as found in several blogs that use this method to dispense with loading these files, but with a few modifications of CSS styles can make this arrow "invisible" or less visible changing the color of the text of <body>, as in the example below, and then then give again the desired color for the supposed 'body' in an element wrapper/container at a lower level if you know what I mean:

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>

Once this is done, your standard CSS and JS files will not be loaded.

  • 1

    I understood everything and it worked... Only it doesn’t appear --> because that’s a comment.

  • Nice, Best yet @Carlavieira ! I have already adopted this method in several topics Blogger in which I worked and somehow this arrow is always visible. ^^

0

In my case it did not solve, but I discovered a new solution (which I now realized is equal to the above solution for the JS case).
Just replace the:

<head>

for:

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

I don’t know why, probably some Blogger update or something related to my template. Uploading . css was just below the <head> in my case, I don’t know about your.

Browser other questions tagged javascript css optimizing blogger

You are not signed in. Login or sign up in order to post.