12 Quick Methods To Improve Website Speed in Blogger

improve website speed in blogger

Are you tired of slow loading speed of your Blogger blog and want to improve website speed in Blogger then read the complete article.

In the previous article, I had shown you the 9 Effective Ways To Improve Your Website Speed but in this article, I will show you 12 Quick Methods To Speed Up Your Blogger Website.

Blogger is one of the free platform provided by Google to allow people to blog without buying any top-level domain like .com, .in, .org, etc and hosting plans.

It means that if you don’t have money, you can still blog and earn money without investing any single penny.

But starting your website on Blogger is not a great idea.

Blogger lacks some most important features that are available on WordPress like Plugins, Easy customization, Themes, etc.

In WordPress, you can easily install Plugins and with some simple settings, you can use it.

Whereas in Blogger, you need some coding knowledge to put script codes in the theme.

Let us take an example if you want to speed up your site.

In WordPress, it is a lot simple by installing some plugins like W3 total cache, etc.

Whereas in Blogger, you will need to change some script, codes and you will have to analyze all codes whether they make your page to speed up or not.

Before you start to change any customization in your theme, it is mandatory to take the backup of your theme whenever you can something in the theme code.

Without knowing coding knowledge, it will be very hard for you to speed up your website.

But you can still improve your website speed by following some steps that I had mentioned below:

12 Quick Methods To Improve Website Speed In Blogger:-

  1. Remove Unwanted Widgets JavaScript In Blogger
  2. Minify HTML, CSS and JavaScript Codes To Improve Website Speed in Blogger
  3. Reduce DNS Problem In Blogger
  4. Optimize Images and Resize Properly
  5. LazyLoad Your Images In Blogger
  6. Use Expires Headers In Blogger
  7. Remove Render Blocking Resources
  8. JavaScript Placement In Blogger
  9. StyleSheet Placement In Blogger
  10. Use Content Delivery Network In Blogger
  11. Do Not Use Too Many Ads
  12. Remove All Unwanted Social Widgets

Want to learn more in detail, read below paragraphs which will breakdown all the steps and guides to implement them.

1) Remove Unwanted Widgets JavaScript In Blogger:

Most of the custom Blogger templates have unwanted widget.js installed in the theme. It causes your webpage to load slowly.

You must remove all the unwanted widget which will indirectly reduce your JavaScripts.

To remove the unwanted widget.js, follow the following steps:-

  1. Log in to your Blogger account
  2. Go to the “Theme” section on the left side of the window
  3. Click on “Edit HTML”
  4. Find </body> tag in your blogger theme.
  5. Replace it with “<!–</body>–> </body>”
  6. That’s it. Now, check your page speed.

2) Minify HTML, CSS and JavaScript Codes to Improve Website Speed in Blogger:

You can minify your HTML, CSS and javascript codes online rather than manually minifying all by yourself.

minify codes in blogger
[Credit:- PremiumSeoPacks]

To minify your HTML, CSS and JavaScript codes, visit the site like htmlcompress.com (Minification site that helps to minify HTML, CSS, and JavaScript).

Follow these steps, to minify your HTML codes:-

  1. Copy all your HTML codes in your theme.
  2. Visit htmlcompress.com and paste your HTML codes in the editor
  3. Click on Minify button.
  4. The page will automatically minify your HTML codes.
  5. Copy the Minified code and replace it with your theme code in Blogger.
  6. You had successfully minified your HTML codes.

3) Reduce DNS Problem In Blogger:

This problem generally occurs when you take other sites resources to use on your website.

DNS (Domain Name System) is basically like a phonebook on the internet. When a user enters a domain name, it is connected to a specific Ip address with the help of DNS.

Reduce DNS Problem In Blogger:
[Credit:- Cloudfare]

Example: If you embed YouTube video in your post, you will increase the DNS by one as the resources were embedded from other websites i.e. YouTube.

To reduce the DNS problem, you should try to not implement resources from unnecessary website to your website.

Although, DNS Problem is basic in Blogger. The most preferable solution is to find such themes that do not have too much DNS.

Like my current theme does not have too much DNS. I only use blogger needed DNS like 1.bp, 2.bp, 3.bp, 4.bp and null.

These are basic DNS and will be found in every blog which is made on Blogger.

4) Optimize Images and Resize Properly:

In Blogger, one of the crucial fact that most sites lose their page speed is due to not compressing their images and resizing it properly.

You can use software’s like Photoshop to compress and resize the image properly.

You can also use online images compressing website like CompressJPEG, CompressPNG or Short Pixel to compress your image properly.

Image optimization helps to boost page speed a lot and also helps to improve your website speed in blogger.

5) LazyLoad Your Images In Blogger:

Lazy Load technique can help you to improve your website speed by loading the images after all the critical resources have been loaded on the browser.

Improve Website Speed in Blogger
[Credit:- CSSTricks]

Although, it is quite difficult to add lazyload technique in Blogger as it requires the implementation of a few codes in your theme directory.

To add the lazyload technique in your blogger blog, follow these steps:

  1. Login to your blogger account blog.
  2. Go to the “Theme” section present on the left side of the window below “Layout” section
  3. Click on “Edit HTML” section
  4. Copy the below code and paste it before </body> tag (which is present in the bottom of your theme)
  5. Save your theme.
<script type='text/javascript'>
// Jquery LazyLoad Script by www.Bloggersstand.com
//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://4.bp.blogspot.com/-oA8G9t61JXk/VtLrtkAzObI/AAAAAAAAFTY/EjT6jl2MEFM/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

The above code was taken from “BloggerStand” with proper credits.    

6) Use Expires Headers In Blogger:

Expire headers help the browser to know for how much long tie the files have to be cached by which your visitor will not have to download all the Javascript, CSS and Other Codes again and again.

Use expire headers
[Credit:- Cloudfare]

Therefore, it helps to reduce your page size and improves your website speed in Blogger.  

To add expire headers in Blogger, follow these steps:

  1. Login to your blogger account
  2. Go to the “Theme” section
  3. Click on “Edit Theme”
  4. Add the below code just </head> tag in your theme code.
  5. Save your HTML Theme
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta http-equiv="expires" content="sat, 02 jun 2020 00:00:00 GMT"/>

The above code was taken from ProBlogBooster with proper credits.    

7) Remove Render Blocking Resources:

Most of the cases JavaScript makes the page to load slowly as it stops renders the page until the script are executed.

It can be eliminated by making the script to load asynchronously. Asynchronously makes the browser to load script codes simultaneously with all other page codes.

To remove render blocking resources, follow the mentioned steps below:

1) Find JavaScript codes. It could look like the code mentioned below.

<script src=”location of the script code” type=”text/javascript”></script>

2) Add ‘async’ before “>”. Now the code would look like:

<script src=”location of the script code” type=”text/javascript” async></script>

This method will not work for JavaScript codes having callbacks.

Example: Recent posts, Related posts widgets, and ads code.

8) JavaScript Placement In Blogger:

JavaScript placement at the top of the page makes your page speed to go low as it blocks the browser to render the remaining codes until script code is not executed.

You must place your JavaScript codes at the bottom of the page i.e you must place the code before the ending tag </body>.

Take a backup before changing even a single script every time because if the script is not placed correctly, it will show error in your theme.

You can directly go to the Ready Mobi site, which helps you to find all the javascript codes present in your blogger website theme.

9) StyleSheet Placement In Blogger:

All your Theme styling codes must be placed at the top of your theme document i.e. all your CSS codes must be placed below ending head tag (</head>).

You must copy all your b:skin styling CSS text and paste it into the following code mentioned below in “place your CSS code here” section and then replace your theme code with the given code which should be placed above ending head tag.

To do the Styling Placement, Follow the steps below:-

1) First find the b:skin tag in your theme. It could look like the below code.

<b:skin><![CDATA[Your CSS codes]]></b:skin>

2) Copy all the CSS codes that would be present in the “Your  CSS codes” section in the above code.

3) Now, find all your external CSS codes and paste below “Your CSS codes”.

3) Now Paste all your CSS code in below-mentioned code in “All your CSS codes” section below

.<style type=’text/css’>All your CSS codes</style>

4) Now copy all the codes and paste it in the “[*/]” code mentioned below.

<style type=”text/css”><!– /*<b:skin><![CDATA[*/]]></b:skin>

5) Now Copy the above-modified code and replace it with the step 1 code.

6) You are all done. Now, check the page speed.

10) Use Content Delivery Network In Blogger:

You can use Cloudflare to speed up your website. Cloudflare does not allow their services for hosting domains like Blogspot, Wix, WordPress, etc.

Cloudflare helps to minify Javascript, CSS and HTML code running in the website and also help to cache the website which drastically improves the website speed performance.

Content Delivery Network to improve website speed in blogger
Use CDN

You can read the post, to know about how to use CDN for blogger and WordPress.

11) Do Not Use Too Many Ads:-

Google provides a great way to earn money online through their advertising option by displaying ads on your online content.

I had seen a lot of online websites which places a lot of ads on their website to earn money but due to excessive ads, their website speed goes low as the ads require JavaScript codes to run on your website.

Therefore, do not use too many ads on your website as it will make your website to load slow and also reduces the User Experience on your website.

Only use 2-3 Ads on your website.

12) Remove All Unwanted Social Widgets:-

If your website has to many social sharing widgets even if you do not have any social page on that social site, remove them as soon as possible.

Let’s consider an example:- If I do not have any youtube channel, but still, I have a social widget on the site, it is of no worth of using it on your site.

Remove that unwanted social widget as it loads JavaScript codes and CSS codes which reduces page speed of your site.

Now, let’s check your page speed now after implementing all the changes from the above ways to improve your blogger speed.

You can easily check it with Google PageSpeed, GTmetrix or Pingdom Tools which are fabulous to test as they cover all the details report of your website speed.

This will help you to improve website speed in blogger

Also Read:- 9 Effective Ways To Increase Website Speed in 2019

Conclusion:

I guaranteed that the above ways had surely speed up your blogger site.   Especially the Unwanted Widget, Placements, Lazyload, Expire Headers technique boost up the speed a lot.  

You can comment below if you face some issues and I will provide you the solution as soon as possible.  

Do not forget to share the article with your other Blogger friends.

14 Comments

  1. Page speed is an important factor for ranking. I searched a lot and after various searches, i find your post which had superbly explained us how to increase website speed in blogger. Loved your content.

  2. Hello. I have checked your shoutmeback.com and i see you’ve got some duplicate content so probably it is the reason that you don’t rank hi in google.
    But you can fix this issue fast. There is a tool that
    creates content like human, just search in google: miftolo’s tools

    1. No it cannot be. I write my own points while writing my blog post.

      Can you tell which post is marked as duplicate content?

      If you are talking about the codes in this post, then it was taken with proper credit with the code holders like bloggerstand, etc.

    1. Try placing stylesheets and JavaScript one by one and analyze what code is creating problem.
      One’s the code is found, place the other codes rather than problem creating code.

  3. O man, I don’t have any words to say, you just solved my problem, I think you should also make a dedicated youtube video on this, it will help the new blogger a lot. If you can’t make a video, just allow me to go for it.

    I just have one question – how can I solve Eliminate render-blocking resources

    I can’t add async on the following, it’s not working

    /css?family=Open+Sans:400,400i,700,700i(fonts.googleapis.com)
    and
    …css/font-awesome.min.css(stackpath.bootstrapcdn.com)
    and
    /css?family=Oswald

Leave a Reply

Your email address will not be published. Required fields are marked *