Remove all Render Blocking JavaScript and CSS from Blogger Easily


#1

If you check your site on Google Page Speed Tool or Other Tools then you must know it. Here i am giving the solution. You can block it easily. But using this trick there will be some cons. After removing all the default blogger javascript and css bundle blogspot contact form, archive (only drop down) and stats widget not going to work. If it ok for you then forward. Always backup your template for your safety.

  1. Find <head> code and replace it with &lt;head&gt; code. Now again find </head> code and replace it with &lt;/head&gt;&lt;!--<head/>--&gt; code.

  2. Now find </body> code and replace it with &lt;!--</body>--&gt;&lt;/body&gt; code. Save your template. You are done.

This will remove all the default blogger google plus javascript and other css bunlde to load. Now if you use other javascript manually in your template then use asynchronous version of it like async='' . Here is example of asynchronous version <script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> code. In part 2 i will post about font awesome css load asynchronously, easily compress images before upload and minify all your existing javascript and css code. After doing all kind of tricks i made my template 99 out 100 in mobile version and 95 out 100 in desktop version with all kinds of important javascript & css and also thumbnails on homepage.

Also check my previous tutorial about making blogger label url or permalink like wordpress - Make Blogger Label URL or Permalink Like WordPress

And solve all the duplicate problems easily - Solve all the Duplicate Problem Easily


#2

That’s a nice tip. I tried it on my bloger blog and it works well. But Blogger being a Google platform, i think its not necessary.


#3

you guys should never find shortcuts to such things. Optimizing for page speed is easy but you need a CDN.


#4

Can you school us on how to use CDN to optimize page speed of our template thanks await your reply


#5

Most of it is there in google page speed itself. Minify you html / css / javascript and dont use images that are large then they need to be.

You need to also see how your css and javascript is loading only load what you need and if you dont have jQuery being used in above the fold dont load it there,

If you fix all these issues you should hit a 70 and to go from there to 90 you need to use a CDN.

I can optimize a site to hit 100 on 100 but to go from 90 to 100 takes a little work but as soon as you get image optimization , CDN and minified HTML - you should be hitting 85+ unless you have a poor dns set up.


#6

where is your template. A CDN is a copy of itself.

so https://d3a48kc7dsk77n.cloudfront.net/wp-content/themes/MMW16/images/new-theme/services-image1.png is a copy of the site itself https://www.mindmyweb.com/wp-content/themes/MMW16/images/new-theme/services-image1.png


#7

My template is having the score of 73 for Mobile and 75 for Desktop I want to improve it more to at least 90 for mobile and 80 for PC


#8

@akorstayblessed follow my tutorial and you will get 90+ on mobile and 80+ on desktop score.


#9

I have done the first part of your tutorial now having 94 for Mobile and 80 for PC

This part i don’t really understand asynchronous version code. Can you explain a little more thanks


#10

@akorstayblessed At first congrats for your achivement. Check this post about asychronous - https://developers.google.com/speed/docs/insights/UseAsync