Making a blogger blog load very fast is one of the few steps to properly SEO optimizing BlogSpot blogs. I already listed out 11 killer tips to increase your blog load speed and among the list was Eliminate render-blocking JavaScript and CSS in above-the-fold content.
Today I am going to show you the perfect way to speed up your blog by removing rendering blocking JavaScripts or JS files which include Jquery, Modernizr, Advertisement banners, external Share buttons etc.
- Alternative Adverts: High Paying CPM/PPC Affiliate Program 2017
- MBT Blogger Horizontal Share Button With Counter
I have successfully used this trick to increase the load speed of all my blogger templates so you might want to get one for yourself. If you have used PageSpeed Insight tool to run a speed test of your blog then you should understand what the terms "Remove render-blocking JavaScript".
What Is Rendering JavaScripts?
JavaScripts are external codes such as Jquery, Modernizr that are hosted on servers and extracted to your blog each time a request is made. JavaScripts are naturally good for a blog as various JS tend to bring new features to the blog.
But when you fail to optimize the extraction (HTTP request) of javascript, it becomes a rendering blocking script which simply means a script blocking other scripts, CSS, text, and codes from loading until itself (the script) is fully loaded.
How To Find JavaScript On Blogger Blog
How To Find JavaScript On Blogger Blog
There are various ways of locating JavaScript files on your blog. They are main find after the <head>, before the </head> and before the </body>. In other to quickly find all of them, just search for ".js" using CTRL + F.
3 Ways To Remove Rendering Blocking JavaScript From Blogger Blogs
1. Host JavaScript Directly On Your Blog.
Like I earlier said, JavaScripts are codes stored on external servers which are being loaded each time you visit a page on your blog that needs it to function. What makes it a rendering blocking JavaScript is the continuous extraction of this code from external sources.
Hosting Javascript directly on your blog is a very easy way of eliminating rendering blocking Javascript. We could do same for optimizing CSS delivery which is also part of speeding up a blogger template.
Step 1
Step 1
To host your own Javascript, first, run a speed test of your blog and see what script is affecting your blog. Watch out for scripts ending with ".js" under the Remove render-blocking JavaScript.
Step 2
Hover over the URL and the entire URL will show in a modal box. Copy and Visit the URL. It will load and take to a page full of codes. Copy the entire code using CTRL + A and paste into a notepad.
Step 3.
Go to blogger.com >> Template >> Edit HTML >> Using CTRL + F search for </body>. Paste the entire code you copied right above </body> using the below format.
<script type='text/javascript'>
//<![CDATA[
COPIED CODE HERE
//]]>
</script>
Replace COPIED CODE HERE with the code you pasted in a notepad.
Step 4.
Step 4.
Using CTRL + F search for the URL in the HTML box which you found under the Remove render-blocking JavaScript early. You will find the URL with other scripts example below.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
Remove the entire code and save your template. Run a text of your blog again and you won't find that error plus you will gain a drastic increase in blog loading speed.
2. Using Asynchronous Version Of JavaScript. (Recommended)
This is a very smart and easy way to eliminate rendering blocking javascript. I recommended this because it is best, and most performing of the 3 smart ways to improve blog loading speed.
What Asynchronous Version simply does is to delay the loading of JavaScript until the entire page is fully loaded. By doing this, the page speed is super increased and eliminate javascript error is cleared from your blog.
To do this, simply add async='async' to your javascript code. This is preferably added before the src=' tag in your javascript. Below is an optimized version of Jquery JavaScript.
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
Now find all the JavaScripts on your blog and add the Asynchronous Version to them. After doing so, run a test of your blog, to see if you have added it to all your scripts.
Completely Remove The JavaScript
Sometimes I do this. A blog requires speed to boost SEO, SERP, and traffic, therefore, do anything to meet this speed criteria, if necessary just remove the code.
Minimize the usage of widgets and add-ons. Some are just not necessary. Many posts widgets e.g Recent Post, Random Post etc requires JavaScript in performing callbacks so using too many of them will kill your page speed.
Avoid fancy widgets like sliders, carousels, scrolling latest post etc because they make use of scripts. Most carousels are either built on FlexSlider, WOWSlider or OWLSlider. So imagine your site making all these requests at once.
 |
| Varvy.com |
If you still think they are necessary for your blog to function, then implement the asynchronous version of it.
Note: These 3 ways of eliminating JavaScripts, should not be used for CSS and default blogger JavaScript. Next posts will deal on Optimizing CSS delivery while another will lead you to remove default blogger JS.
More From Author
The speed boost is very important to blog SEO and not until you see it as an important aspect of SEO your blog will keep on losing search rank and traffic. The above methods will Eliminate render-blocking JavaScript in above-the-fold content from any blogger template.
Promote This Blog
Am not asking for much am only asking you to share this post with your friends so they too can speed up their blog. Use any of the share buttons to share to social media profiles.
Thanks mahn. i have been able to eliminate java blocking script. please how do i fix that of optimize css delivery
ReplyDeleteLet me try this,,, thanks for sharing
ReplyDelete