Optimize Blogspot speed | Make Your Blogger 60 time faster


Blogger is the Second most popular platform after WordPress and still millions of User Use it.
According to me, it is the second Most SEO Friendly Platform after WordPress. The Only Difference between WordPress and blogger is that in blogger, we can't remove the date from URL which isn't a big deal for SEO, sometimes it helps us to rank for the long tail keyword.
Blogger has many advantages when it came to speed optimization. We'll talk about later.

Don't Want to Do Messy stuff? I'll Create a SEO Optimize Blogger Theme For You

Hire Me in Fiverr



Also read: blogger SEO 101
blogger speed optimization
In WordPress, There are thousands of plugins available to optimize it for speed. But the main problem with that approach is, it makes WordPress messy. Some time conflict occurs between various plugins which lead to decrease in its speed.
But in Blogspot, we use some simple techniques to Optimize it for SEO. Let's Discuss Why SEO is Speed Friendly and some major drawback of Blogspot.

In-built Optimization available in blogger

As Blogger is Made by Google, it comes With various Optimization which makes it superior to WordPress. Some of New Blogspot in-built Theme Comes With 100% Optimization.
Here Some Ib-built Optimization That already Available in Blogspot:

CDN (Content Delivery Network)

CDN is the Technology Which Helps to Serve Content Across continent seamlessly. It is the best way to make an international website and target global audiences. Because Blogspot is a Google property that's why it uses GStatic Google Static Content Usage Statistics or in easy words 'Google CDN'.
How Stuff Works?
what is cdn
Source: Wikipedia
A CDN has Points of Presence (PoPs) or data centers that are situated around the world. Within each PoP are thousands of servers. Both the PoPs and servers help accelerate the speed at which content is delivered to the end user.

author
Google has off-loaded static content (JavaScript code, images, and CSS) to a different domain name in an effort to reduce bandwidth usage and increase network performance for the end user. Which Serve best Speed Compare To other CDNs


Some Key Feature of Blogspot CDN:
  1. increases performance by increasing, in theory, the number of connections the browser can use, by default, most browsers will only make two connections to a single server. While this is configurable, most users don't bother, so having content come from multiple domains, it can open two connections for every domain the site uses. This loads the content into the users browser faster.
  2. decreases bandwidth by disabling cookies and other HTTP headers for the gstatic.com domain. Believe it or not, disabling headers greatly reduces bandwidth usage, especially if a page uses a lot of static files.
  3. static content can be offloaded to geographically diverse CDN servers. Google can push all the content to servers that are nearest to you. This is probably more applicable to a normal corporate site, as Google does a great job of pushing everything to a datacenter closest to you. But for a normal company, you could split out your dynamic content and your static content and then pay a CDN provider to host your static content, reducing your corporate datacenter's bandwidth usage, while improving load times for your user.
Source: What is Gstatic?
Here's The Proof:
blogger CDN
If you're using Blogspot than you don't have to worry about CDN or Server-Down, Google Will handle it by itself.

Compressed With gZip

Gzip is the Server Sided Compression of Your HTML in order to save Data and Load page faster. On other hosting, installing gzip is messy work. but Google Blogger Comes With In-Built gZip feature.
gzip in blogger
Some Benefits of Gzip Compression:
1.) GZIP is lossless Compression method, means it won't affect our original Document code.
what is gzip
2.)When Browser request index.html from the server, the server already compressed it with GZIP and hand it over to the browser.
3.)It Provides a good tradeoff between speed and ratio.

HTTPS Served

SSL and Website Performance? What is the connection between them?
Most of you're thinking that SSL has no effect on website speed. The Debate "whether SSL affects speed or not?" catch Fire and Internet start its search for the answer.
Some Time SSL show no effect on speed or Some time it affect website speed. But According to MaxCDN:

author
While SSL can impact the performance of your website, its effects are minor. Also, saving a few milliseconds will never outweigh the level of security SSL affords. With the forthcoming HTTP/2 and all the SSL optimizations you can implement, the numbers of milliseconds SSL adds to connections will only continue to drop.

On Other CMS, World Spend millions of dollar to make their site secure. But Google Offer you a Free SSL certificate for your website, even on the Custom domain.
free ssl for blogger
HTTPS help you to rank your Blogspot blog also. You can easily enable it from your setting > basic.

Quick server response time

No matter how optimized your web pages are for speed if your server response time is slow your pages will display slow.
Google says You should reduce your server response time under 200ms".
So, How to Reduce Server Response time? Here a Two Line Answer from varvy.com:
server response time
(wait !)
In Blogger, You don't have to pay anything to reduce server response time. As I say, it is hosted on Google server, which is really fast. So, don't worry about Your Server response time.

Leverage browser caching

Yes, Blogspot has in-built Leverage browser caching feature which helps our website to set cache in browser. So, next time we visit our website we don't have to download that data again.
As we Know, Blogspot is a blogging platform and Content of Dynamic website change continuously that's why it cache validation remains for few hours.
Here a Proof of Leverage browser caching in Blogspot:
Caching in blogger
In above image, you can saw that when We visit Our our website the second time. It load 1s faster because in the first time it set up some cache in browser.
So, Where's The problem?
Most People Face caching Issue blogger. But the problem wasn't in blogger it was in third party resources used by people such as (Google Analytics, AddThis, and other external scripts)
Don't worry about caching issue in blogger :)

Other Optimization

Keep Alive
Keep Alive Is the method Which allows the same TCP connection for HTTP conversation instead of opening a new one with each new request. Means Browser doesn't run many requests at a time which increases rendering time. By Default, Keep-alive is enabled in Blogspot blog.
Compressing External Js
Blogger Use Some External Resources for some of its feature which was hosted externally. but most of them are highly compressed and didn't affect website speed.

Above I share All Optimization which already available in blogger and didn't need to be modified. but some features of blogger that can't change and affect website speed are:

Things Can't optimized in blogger

Some Things which we can't change in Blogger are:

Hosting on Own Server

We can't Host files, images and other media data on blogger server. All images are hosted by Google CDN and blogger didn't allow us to host any file in its root directory.
When Files are hosted on an external server, they always tend to increase request which leads to increase in website speed.
The Same problem happens with blogger stylesheet, We can't host CSS file on blogger. All styles must be placed inline which can't be cached to improve speed. Because in External CSS we can add caching but not in inline.
This is the only major drawback of blogger :|

Fixing All Blogger Speed issue

It's Time To Optimize Blogger for Max Speed. Choose your speed issue solution from below:

Please Backup Your Template before Proceeding further. Some of these Fixes can change the look of your blog and some widget stop working.

Avoid landing page redirects

Landing Page redirects always Tends to increase website loading time. This is the one of the main factors which decreases your website loading time.
Redirecting from one domain to another take few milliseconds which matters a lot. So, how do we avoid landing page redirects?
What is landing page redirects?
In Easy Words, When You enter one URL address in your browser and when page load completely the URL you enter is changed. This is to due to redirect.
Here some common redirect example:
From http://website.com to https://website.com (as you can saw that our domain is changed from http to https which is count as one redirect)
from http://website.com to http://www.website.com (Our Domain Redirect from Non-www to www which is also a redirect)
from http://website.com to https://www.website.com (as you can saw our domain redirect from http to https and then Non-www to www here two redirect takes place)
You can vice-versa from www to Non-www. Now Let's discuss where you get the problem:
#problem one
Maybe You Enter the wrong URL in Speed checking tool. Assume your website when loaded completely its URL is with https with www but you enter non http and non www URL is your speed tool.
#The Solution
lading page redirect
(Before)
First Enter Your website URL in the browser and let your page completely load, When Your Page Completely loaded copy URL from the address bar and use it in speed insight tool.
after landing page redirect

#Problem Two
Indexed Wrong URL version - Maybe, In webmaster, you add website URL without www and you use redirect from non-www to www. So, whenever someone clicks on Google search they must have to face one redirect. This can happen with https too, you entered http URL in webmaster and using https on your website. So, the user must have to face one redirect when they came to your website through Google.
#solution
Use The above solution to copy URL from address bar then go to webmaster > add property and add that URL. Once you added that URL in your Google search console than go to search console > Newly added website > site setting and set that website as preferred version.
Didn't Work? - Report Issue in Comments

Eliminate render-blocking JavaScript and CSS in above-the-fold content

This is the problem which is faced by most of the blogger user, Render-blocking JavaScript and CSS affect your first Render (content will appear on screen whether the page is completely loaded or not).
Render-blocking JavaScript and CSS
in Easy Words, Whether Your Page completely loads or not as soon as browser get the request it starts to build page and starts painting website on screen. So, Users don't have to wait to load the pages completely. but when some Javascript file and CSS block first paint this is known as Eliminate render-blocking JavaScript and CSS in above-the-fold content.
This Problem is mainly Caused by External Js and CSS
Some Most Popular Render-blocking JavaScript and CSS are:
Jquery
Google Fonts
Fontawesome
authorization.css(Solution Down in Post)
plusone.js (Solution Down in Post)
Adsense Ads

#Solution
This Problem Can be Solved By the Various method, But we're going for most effective one. For Plusone.js, authorization.css, and widget.css the solution is below down in the post.
We're going to fix all third party link except Adsense(The only solution is removing adsense or hurting your income)
1.) Find all external javascript which Render-blocking by using speed insight, now search them in your HTML by CTRL + f. they're placed inside code like <script src="URL_OF_SCRIPT"/>
2.)Place All Those Script just above your closign </body> tag.
3.)Similarly, Find all CSS and they all are placed inside code like < rel='stylesheet' href='URL_OF_CSS'/>
4.)Copy URL of CSS and place in both places in below code (Place it just above </head>);
<link href='URL_OF_CSS' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='URL_OF_CSS' rel='stylesheet'/></noscript>
5.)Repeat Process for all CSS file
Fix Problem with jquery , Font Awesome and Google Fonts
1.)Remove Jquery, Fontawesome and Google Font from Your Document.
2.)Place Below Code just Above closing head tag.
<script type='text/javascript'>
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = '//ajax.Googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.Googleapis.com/css?family=Roboto:400,400italic,700,700italic");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");
//]]>
</script>
3.)You can Place your Google font in above code.
Didn't Work? - Report Issue in comment

Enable compression

As we Already Discussed Above, Blogger is GZIP enable which means you don't have to worry about Compression. But If you, unfortunately, got this error then don't worry I have a solution for it.
Follow Below Step To Enable Compression in blogger:
1.) Go to Dashboard > Theme > Edit HTML and cut whole code;
2.)Now Go to HTML compressor and paste the code there.
3.) Choose Below Setting in HTML compressor;
html compressor
4.)Once Your code is compressed, Paste that code in your blogger and save.
5.)You can also compress your individual Post's HTML with that tool.
Didn't work? - Report in Comments

Minify CSS

Blogger mainly uses inline CSS, but if you're using external CSS than you might get this error. Here some Tips to fix this error:
1.)This error mainly occurs due to heavy Google fonts.
2.)Check Your Font Load Time before Choosing it.
fast Google fonts
3.)Choose Light fonts to fix this error
4.)If you're using any third-party CSS than make sure it is compressed. We don't have any control over external CSS except deleting them.
Solution on Found ? - Report Issue in Comment

Serve scaled images

When You Use CSS or HTML to resize an image dimension than you might catch this error. To Fix this add Original Width and height in Image Tag. I recommend you to use original size of the image.
Here's How To Do it:
1.)Find img tag which causing this problem it should look something like <img src='IMAGE_URL' alt='Alt text'/>
2.)Now Add original Height and width of image in above tag as : <img height='500px' width='500px' src='IMAGE_URL' alt='Alt text'/> (Change 500px with your Own Dimensions)
3.)Add below code inside your CSS.
.widget img,.widget a img{max-width:100%;height:auto;}
Didn't understand? - Ask Freely in Comment

Optimize images

Image Consume Most data on the internet, 50% of data of a page consumed by images only. So, how to optimize them?
1.)Compress Image Before uploading them to blogger will a lot of data without losing image quality.
2.)You can Use .jpeg image instead on PNG to save data.
3.)SVG is the next gen Images which are faster than PNG and JPG.
Also Read: Image SEO
Use Lazy Load Plugin
Lazy load plugin will save your data like magic and make your page 50% faster, Here's a proof:
lazy load plugin for blogger
(Before Lazy Load Plugin)
lazy load plugin for blogger
(After Lazy Load Plugin)
Install Lazy load Plugin in blogger
Follow below steps to install lazy load plugin into blogger:
1.)place below code just before your closing body tag:
<script defer='' src='https://cdn.rawgit.com/ajaymalik14/Lazy-Load-Minimal-Js/51c80c33/lazy-load-min.js' type='application/javascript'></script>
2.)Now go Post for which you want to Use it and choose HTML Option in the editor.
3.)In that Post, find all img tag which should look something like:
<img src='IMAGE_URL' alt='alt text' height='100' width='100'/>
4.)Now make all image code look like this (Don't edit first img tag of your post) :
<img cass='lozad' data-src='IMAGE_URL' alt='alt text' height='100' width='100'/>
5.) As You can saw we change src with data-src and add class='lozad' inside our img tag.
6.)Add below code in your CSS:
.fade{animation-name:fade;animation-duration:2s}
7.)Enjoy Speed :)
Didn't work? -Report Issue in Comment

Prioritize visible content

When Your Above the fold content made up of only CSS and image than you'll get this error. Here some things that you can do to fix it:
1.)Don't place the image above the first paragraph in your post.
2.)Find all javascript inside head tag and place them before the closing body tag
3.)Remove below header Ads
4.)Don't Use any Widget Below Header
5.)Remove unnecessary CSS and javascript from your code.
Didn't work? -Report Issue in Comment

Leverage browser caching

Ad we Discussed above blogger comes with in-built Leverage browser caching. But if you're getting this issue this means you're using the external script like Google analytic and tag manager. Just place Google analytic code in the bottom of the page.
Didn't work ? -Report Issue in Comment

Remove Plusone.js from Blogger

To Remove plusone.js follow below steps:
1.) Add b:js='false' inside <html> tag.
2.)Replace <.body> tag with &lt;!--</body>--&gt;&lt;/body&gt;
3.)save Template
Warning! After adding This code you can't able to access layout section in the dashboard. So, change false to true when you need to access layout section and then turn it back.
Didn't work? -Report Issue in Comment

Remove authorization.css and Blogger Bundle Widget CSS

To remove these CSS follow below steps:
1.)First add b:css='false' inside <html> Tag and than change <head> with &lt;head&gt;
2.)Change <b:skin><![CDATA[ with below code:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
3.)Change ]]></b:skin> with </style>
4.)Change </head> with &lt;/head&gt;&lt;!--<head/>--&gt;
5.)Save Template
Didn't work ? -Report Issue in Comment

Defer Parsing Javascript

Defer is the method which help your html to load first and javascript last, here's how to do it:
1.)Add defer='defer' in all your external javascript code like this:
<script defer='defer' src='JAVASCRIPT URL'/>
2.) for Inline javascript, wrap your inline javascript code inside below code:
Your Original Code:
<script>//<![CDATA[
YOUR CODE HERE
//]]>
</script>
Defer Code:
<script>//<![CDATA[
    window.addEventListener('DOMContentLoaded', function() {
YOUR CODE HERE
    });
//]]>
</script>
Didn't work ? -Report Issue in Comment

Reduce DNS lookup Time

To reduce DNS lookup time we're going to use a special method called DNS Prefetch. It looks something like this:
<link rel="dns-prefetch" href="https://external.com">
Here's the proof of Reduced DNS lookup time:
DNS prefetch
(Before DNS Prefetch)
DNS prefetch
(After DNS Prefetch)
As you can saw DNS Prefetch Reduce Our Website loading time 100 milliseconds. Here's how to Use DNS Prefetch:
1.)Go to Webpagetest and check your website there.
2.)Once Your Website analyses complete go to domain section as shown in below image:
WEbpagetest result
3.)Now Find All request Made from Your website on that page as shown in below image:
request made by blogger
4.)Now copy all domain(which made more that one request) into a txt file.
5.)Place all those domain into separate <link rel="dns-prefetch" href="//Put_those_domain_Here"> code same as:
request made by blogger
6.)Now Place all DNS-prefetch code in your head section.
Didn't work? -Report Issue in Comment

Final Words

Don't Want to Do Messy stuff? I'll Create a SEO Optimize Blogger Theme For You

Hire Me in Fiverr


I'll Hope this Post will help you to fix all you blogger problem If you've any issue or I miss something in the post then comment below. I'll answer it within few hours.

12 comments:

  1. Very useful post for all bloggers. I will try to use this information and make my blog load fast. Thanks a lot !

    ReplyDelete
    Replies
    1. Thanks dr.paritosh for Your Feedback! I'm sure this guide will help you :)

      Delete
  2. You are a great; Awesome Post. Thanks for Sharing

    ReplyDelete
  3. hi thanks this is one of the most valuable posts i read, i do most of them, i have questions, i am using b:css='false' b:js without <head> and <!--/body--></body>, and so plusone.js and authrization.css still show?
    in html4 i used body--></body> but my blog is now in html5, and using them cause fatl error in the w3 validator, and i think it hurt my ranking, so if that possible, and beside if my blog is fast loads in less than 1 to 2 seconds and have no render blocking except the labels but with small affect, the above plusone.js and authreization.css affect server response time, but still my blog is fast so can the body--></body> and head hurt my blog, do i let it be. and thanks.
    here is my google The deception and inception continues | J Is Back. if you may

    ReplyDelete
    Replies
    1. Hi Elmujtaba,
      Usign b:js and b:css isn't enough, you have to add below code too for max performance:
      &lt;head&gt;
      HEAD CONTENT HERE
      &lt;/head&gt;&lt;!--<head/>--&gt;
      <body>
      BODY CONTENT HERE
      &lt;!--</body>--&gt;&lt;/body&gt;
      Here's how it save your data:
      (Without b:js and b:css code)
      Open Image
      (After using b:js and b:css)
      Open Image
      I'll hope this will help you :)
      Also Read out Super Guide to blogger SEO

      Delete
  4. Hi new to blogging have problems with the coding and adscene. Was wondering if you could please help me with this

    ReplyDelete
    Replies
    1. Please tell your problem. I'll try to fix it.

      Delete
  5. This great post it has helped me solve some of my blogger problem but when l add this code <style type="text/css">
    <!-- /*
    type='text/css'> by template don't upload but report error and when l change the head and body tags my posts appears in half and a line will cross my first post image on home page.

    ReplyDelete
    Replies
    1. Where do you add this code? in Place of <b:skin>

      Delete
    2. <![CDATA[/ l used it to replace that code and my template test is saying l have inline Java script and too many Java script

      Delete
    3. I think You must Read This step properly.

      Delete

Share