Oct 25, 2016

Google PageSpeed Insights Tips - Score 98/100 with Blogger

data:blog.title
Have you ever checked your Blogger Blog's page speed score using Google PageSpeed Insights Tool? If not, then you should check it because it is the major thing to get high traffic from search engines. Regular publishing quality content and backlinking strategies are not sufficient to improve Google search ranking because search engines are also considering user experience and how much time your blog is taking to load completely.

Improve Google PageSpeed Insights Blogger Speed, Google PageSpeed Insights Tips

In previous 5-6 days, I'm not active on my blog because I'm busy in maintaining my blog's page speed score and user experience and today jubilant to tell you guys. Finally, I've got success. Now I've achieved 98/100 page speed score and 100% mobile user experience as per Google PageSpeed Insights Tool.

Some of us are saying, Scoring 90+ Page Speed is not possible on Blogger platform, but I've proved that nothing is impossible in this world. If you work hard, you'll get the best result. Here I'm going to insert screenshot to give you proof.

PageSpeed Insights Tool Scoring Tips for Blogger, BlogSpot PageSpeed Insight Tips

Okay! Now the question is How I make this possible? Don't worry guys, today in this article I'm not here to only share the result instead I'm here to share How I Achieve this.

Note: Some of the tricks I've applied without the knowledge of legal and illegal. ;) So please forgive me, guys. ;)

How I Achieved 98/100 Page Speed Score for my Blogger Blog?

When I checked first time my blog's page speed score, then it was 62/100 and seriously I got upset that time. Just like others, I also thought that Compare to WordPress, Scoring 90+ loading speed is not possible in Blogger hosted Blogs.

But one day I've opened www.hackinguniversity.in the blog of Rishabh Jain's (That is also hosted on Blogger) and get shocked by the loading speed, and I again click on the Reload button, and it is taking only 1-2 seconds to load. I opened the Google's PageSpeed Insights tool and checked the speed score and again get amazed by the result. Just like as me his blog also have 97-98 page speed score. That was the time when I changed my think about the blogger platform and start checking what he did at their blog to achieve this and here I'm going to share what he did and what I've done to get this fantastic result.

#1 - Removed All Unnecessary Plugins

Sometimes our goal is only to provide high-quality content to our visitors, but we never think about how they feel when to opening your blog. We should think about ourselves that what we feel when we open other's blog which is taking a lot of time to load. We always leave that blog instantly when it is taking too long to loading and never think again to reopen. So first thing is providing good user-experience to the readers.

I realize that some of the plugins are taking a lot of time to load and then I've started to find useless plugins on my blog and remove one by one all of them.

According to me, Twitter and Facebook widget is useless (This is my personal view.). Instead of the widgets, you should use only buttons because they're taking half time to load.

Popular Posts, Random Posts, and Recent Posts widgets are also increasing blog loading time. So I'll recommend you to use it but without snippets [Featured Images]. This trick is helpful but not sufficient to get this fantastic result. Now read what I've done next.

#2 - Default CSS Bundle Widgets

Do you know, by the default setting of the blogger, There are hidden CSS Bundle Widgets available inside your template which you couldn't see in the code area, but when you check your blog's view-source code then you can see it easily?

I'll recommend you to remove that CSS bundle widgets from your blog, but by making this change, maybe you'll face some problems. But if you've some knowledge of the CSS coding then you can fix that bugs quickly. I've written a detailed guide about removing default CSS bundle widgets. You can read - How To Remove Default CSS Bundle Widgets from Blogger?

#3 - Remove Default JavaScript [widgets.js]

Just like as the bundle widgets, there is also a hidden JavaScript [widgets.js] file available in your blogger template. When you check your blog at Google PageSpeed Insights tool there, you'll see a message like "Render Blocking JavaScripts."

Removing the default JavaScript [widgets.js] file is too easy, but it occurs some problems. If you remove it then you'll found many widgets are not working; like; Contact form gadget, default search box, newsreel, default Wikipedia widget, and many others too. But the most important widgets are contact form plugin and default search box.

I'll recommend you to use any alternative to the search box, and for the contact form gadget, I have a solution. If you want to use the contact form, then I'll recommend you to add it on a static page and after adding read that guide which I've published before and that will help you in removing default JavaScript from Blogger Template. I've also mentioned there a trick about how you can make default contact form working when you have removed default JavaScript (widgets.js) hidden file from blogger. - How To Remove Default JavaScript (widgets.js) file from Blogger?

#4 - FontAwesome CSS and jQuery Library 

Nowadays every template designer uses many widgets to make it more eye-catchy and stylish like; slider posts widgets, back-to-top button, and many other widgets too which will not work without the jQuery library but do you know these libraries are taking too much time to load. But the issue is how you can remove it if your widgets do not work? :)

This was the trick, above I'm talking about; I don't know the method is legal or illegal, but I did and got a good result. I've also faced the problem When I've removed it. Some of mine blog's widgets are not working. So, I've tried to add the whole jQuery code inside my blogger template instead of using the jQuery link in the template.

Note: When you'll try to add script code inside blogger template then you'll face many errors because BlogSpot template is in XML format and will not accept '&' and ">" like characters. So you need to add the jQuery library like as below example.

<script type='text/javascript'>
 /*<![CDATA[*/
Add jQuery Code Here
/*]]>*/
</script>
Replace "Add jQuery Code here" text with the code.

Now come up to the FontAwesome Icon CSS library link. I was using it but I realize FontAwesome icons are useless for me and then I've also removed it and customize HTML coding to eliminate all icon codes and shocked by the result because now I've scored 86 by making above changes and I'm too happy with making these changes.

#5 - Compressing CSS and Remove Useless CSS Codes

Do you know you can compress your CSS codes using some online tools and Compressing CSS codes is a good idea to make your blog fast to load, and Google Page Speed Insights tool is also recommending to minifying CSS?  So I've compressed the whole CSS Codes in my blogger template.

Compressing CSS is not enough. You need to find all useless CSS codes available in your blogger template and remove one by one all of them. It'll help you out of sure.

#6 - Removing the Featured Image from HomePage

You can check my Blog's home page, I've removed all featured images from there. This step is optional. I know featured images at home page will help you in attracting visitors to click on the link and increasing page views but to get more clicks from search engines and to make my Blog's home page quick to load I've removed all images from there.

So this is an optional trick. I've faced the problem of page views after changing the template. So I'll not recommend anyone to take the risk. I always love to do experiments, that's why I've made this change, and still I'm not using featured images because I'm waiting, is Google improve the ranking of my blog posts? :)

#7 - Using The Technique of Click to Load Disqus 

To get more control and for improving comment section you should use Disqus comments widget but it is taking too much time to load, and it is always reducing our Blog speed score on Google Page Speed Insights Tool.

There are many methods to handle Disqus comments widget like; click to load Disqus, load only on the scroll or both, but the best one is load Disqus comments on click because the load on the scroll is working well but not as click to load. If you're also interested in applying any of this technique, then you've to read this complete guide - How To Load Disqus Comments on Click or Scroll in Blogger?

#8 - Compress All Your Images Before Use

This one is last but not least. When you create a picture for your blog post, have you checked it's size (KB)? Some of the newbies never think about it, and they never get good Google PageSpeed Insights score. You can check all images of mine blog. They're not higher in the KB size.

I'll recommend you to use tinypng.com to compress all of your images before uploading them to use in your blog posts. Tinypng.com is an excellent site which will compress your all images 60-70% without losing the quality of your pictures. I hope this site will help you. :)

In Last of the Scoring Google PageSpeed Insights:

So above I've shared tips to improve your blogger blog loading speed and how to get 90+ Google PageSpeed Insights score with Blogger. I hope this article will help you in boosting the loading speed of your BlogSpot Blog.

Did you like this article? If you like this, then share it on social media platforms. You can also subscribe us to get free newsletter direct into your mailbox for free.

I've not thought about writing this article. This post is here today because of the Umar Farooq (Easyasfart.com) and because of the motivational words of my brother Abdul Samad Essani (bornblogger.net).

Thank you so much, guys, for appreciating my work. :) Thanks for supporting and keep motivating me. Love you friends :) Do share, please. ;)

6 comments:

  1. Thank you for the mention, mate! ^_^ I'm going to apply some of these methods to my blog as well. :) Thanks for sharing...

    ReplyDelete
  2. Thank you so much for your kind feedback dear @Umar Farooq . Yes you've to apply these all techniques on your blog and I'm sure by applying these techniques everyone can improve blog loading time and get 90+ score from Google PageSpeed Insights tool.

    Thanks again. :)

    ReplyDelete
  3. Bro Its Working Its Awesome...maybe i hope this effect on google page ranking thank you bhai

    ReplyDelete
  4. Thank you so much @Mohammad Gouse. If you have applied these techniques, then you'll get better rank with 100% of surety man [If your content is unique and qualitied].

    Thanks for your valuable comment. :)

    ReplyDelete
  5. Hello Parmjot,

    I really never though that you can even Optimize Page Load Time In Blogger but you've proven buddy.

    Enjoyed each and every word you've written.

    I Appreciate buddy! :) <3

    ReplyDelete
  6. I'm very thankful of god he give me a friend and a mentor like you. I've never asked any question because your each blog post have already answer there.

    Blogger is best platform but only for those who are skilled in coding. I love BlogSpot and maybe I'll never leave it.

    I've 18 months of experience about blogger so now I can say, I know each and single part of it and also know how to handle blogger.

    Speed optimization is very easy and yes I've proven it.

    This post is here just because of you and Umar Farooq bhai. Thanks for your motivating words. Love you guys. Keep motivating..keep blogging.

    A big thanks of you. <3

    ReplyDelete

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.