Google PageSpeed Tools: How they increase Blog Speed?

google Page Speed toolsOn April 09, 2010, Google  incorporated site load speed into its ranking algorithm . Google made it mandatory for site owners and web authors to keep a close look at their site loading time because now search rankings will include site response time too in order to make searching more user friendly for internet users. Matt Cutts emphasized  that though a website speed will be paid great attention in all future ranking criteria but it will still weigh less compared to important factors like relevance, topicality, reputation etc.  Which means quality of blog content comes first, speed comes next. I recently came across the latest Google product called PageSpeed which is indeed a must-to-try for all bloggers. I will demonstrate in detail on how to make better use of it in order to decrease the load time of your blogs.

Blog Speed Optimization

Why is Page Speed Important?

Fast loading web sites in fact lead to higher visitor engagement, retention and conversions.   Your visitors come from different areas with slow and fast internet connections. You often loose 50% of your traffic due to slow load time. On a recent conversation with a Google Adsense agent, I learnt that the first 3 seconds of a blog are enough to let a visitor decide whether he may let the site to load fully or hit the close button and leave away. You loose traffic by welcoming visitors with dead slow web pages and as a result loose several valuable subscribers every day. If your subscription list is not increasing then it could probably be either because of your not-so-attractive blog content, browser conflict issues or at most a slow site speed.

The more visitors leave your blog, the higher your bounce rate grows and the lesser your ad impressions. Therefore there are some easy optimization methods that will help you speedup your blog like never before!

Check your Blog Speed Score

Follow these steps to check what score do you get for your web blog: We got an overall PageSpeed Score of 87 (out of 100) taking 19 seconds to load which is surely not very good and we still need to make some improvements which I will share later in this post.

  1. Visit Check Speed Score
  2. Submit your Blog URL
  3. Note down your score
  4. If you scored anything above 80 then your blog needs a little more improvement. Any score below 80 means you need to take some serious steps to cut down the extra burden of scripts, images and server requests on your blog.

Original Speed Vs. Optimized Speed

page speed  difference

Before jumping at ways to compress scripts, images, stylesheet in order to enhance site performance, you must first find out the different all these steps could bring you. If the difference between the original and optimized is large then all Speed optimization steps becomes a must to do. Else if there is only a difference of one second then you may better enjoy a cup of coffee and relax!

  1. Go to webpagetest
  2. Submit your website URL, select zone as Virginia. The tool will run your blog on Chrome with DSL connection and display an approximate speed time based on location you chose.
  3. After waiting for 3-4 minutes, you will see a table displaying your original speed time and optimized speed (possible speed that can be obtained). For more advanced control like ignoring Ads and banners during the speed test,

   4.  You can even download the video to keep it as a record. This is so far the best tool I came across and highly recommended by Google itself.

If you see a big difference between the speeds then you must follow all tips and tools shared in this tutorial. To keep this series useful, we will look at each section separately. We have got tools for both blogger users and Wordpress users. 

Optimize Blog Speed

One PageSpeed analysis page you might have seen various suggestions categorized as high priority, low and medium. I am listing them below for reference:

  • High priority
    Serve scaled images
    , Combine images into CSS sprites
  • Medium priority
    Optimize images
    , Minimize redirects
  • Low priority
    Minify (CSS, HTML, JavaScript), Optimize the order of styles and scripts, Enable compression, Avoid CSS @import

We will be discussing important areas here only:

Serve scaled images:

Most often bloggers upload large size images in post editor and then resize them either using HTML width or height attributes or CSS properties. Instead of resizing images better first crop images and then upload them in original size. The original size of an image is its scaled size. If your uploaded image is large in size and you are adjusting it to a small or medium size then you unnecessarily increased the page size in bytes.

You will also need to specify width and height dimensions for every image you upload.

Best Tool for this:

  1. Windows Live Writer Cropper
  2. Adobe Photoshop

Combine images into CSS sprites:

Most often when we design templates for clients we often put all frequently used icons, buttons and images in just one big image. This prevents several sever requests and helps to load images fast by just calling a single image once. We have applied this method to Touch Me and Flipper sharing widgets. CSS sprites reduces the number of round-trips and delays in downloading other resources and can reduce the total number of bytes downloaded by a web page.

Best Tool for this:

  1. CSS Sprites Generator

Optimize images:

Here the word optimize refers to image size and not its SEO value. The best way to optimize images is to use images only in gif or PNG formats. You can further compress and reduce the size of PNG images without loosing quality using these tools:

  1. OptiPNG
  2. PNGOUT
  3. Adobe Photoshop
  4. Read this! Compress Images

Minimize redirects :

Upload all your images on your own server. BlogSpot users may upload image son blogger only and must not use third party storage services like flickr or photobucket. Wordpress users may upload the images directly on their servers.

Read this tutorial to understand how to store images on blogger:

Advantage: If all images are stored on a single server then the browser has to connect to just one server to download all images thus it saves redirects to several external image links.

Minify Javascript:

"Minifying"  refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation.

Best Tool for this:

  1. Rea this! Compress JavaScript
  2. Closure Compiler
  3. JSMin
  4. YUI Compressor

Combine All JavaScript's:

This is properly the best method to enhance a site performance. Instead of linking the jquery or JavaScript code for every plugin separately. you may paste all the scripts in one single file and save this file with the .js extension then call it in your blogger template using this code:

<script src='PASTE THE LINK HERE' type='text/javascript'></script>

Note: If you don't know how JavaScript ordering works then better combine only the files that are close neighbors.

Never compress CSS!

You must never play with the indentation and formatting of the style sheet. A clean and neatly formatted stylesheet helps in designing and maintaining your blog. Compressing CSS would only make matters worse for you. It will indeed reduce page load time by few bytes but not very significantly. Therefore you can compress JavaScript but never try compressing CSS.

Summary:

Always do this for maximum improvement in performance :

  1. Use Scaled images. Specify width and heights in HTML. Do not resize large images instead first crop them and then upload them.
  2. Use CSS Sprites to combine tiny images into one single image file.
  3. Optimize images. Always use gif or PNG formates. Compress PNG images using online tools like OptiPNG and PNGOUT
  4. Minify Javascript
  5. Combine all scripts in one common Js file
  6. Never Compress CSS.

Your views

I will update you more on this great new Google service that has a lot of quality tools and tutorials to help you understand how page speed is controlled and optimized. If there is any point still creating confusion for you then please feel free to post your questions in the comment box below.

I would strongly recommend that you take a tour of this tool and test your blog speed and apply these six major optimization methods in order to make the most out of your blog and make it a user friendly site for both desktop users and mobile users. SEM is loading 40% faster than MBT and I surely need to pay attention to MBT now. :) Any suggestions would highly be appreciated.

Did you know of this great tool by Google? What's your Site Speed score? Do not forget to share and discuss so that we struggle together. Peace and blessings pals. :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

48 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Very nicely Explained Bro

    My blog got 84 first and 85 score on second website u mentioned

    On Internet Explorer 8 it loaded in 24.5 sec and on Chrome 24.3. Is it ok ?

    ReplyDelete
  3. as always, u are greatm Bhai.. shukriya for sharing this :)

    ReplyDelete
  4. My Blog Speed Is 2.98s And Size is 1.4MB Yeah!!!!!!!
    http://lordhtml.blogspot.com

    I test my blog speed with Pingdom

    ReplyDelete
  5. Awesome Tips Mohammad Waiting for the CSS Sprite Tutorial

    ReplyDelete
  6. Mohammad can you briefly Explain the CSS Sprite in upcoming post

    ReplyDelete
  7. Its weird, i was just checking this page speed thing yday, and today you have post on it! awesome!

    ReplyDelete
  8. My blog www.ptmaroct.blogspot.in got 88 on desktop and 82 on mobile, good enough

    ReplyDelete
  9. My Blog is 93 Out of 100 what Should I do ?

    ReplyDelete
  10. Thank You Brother! my blog scored 88/100. What should I do next?
    http://atchaya-krishnalaya.blogspot.com

    ReplyDelete
  11. This is really Awesome!!! Thanks Google :)

    ReplyDelete
  12. really awesome pal. .. I enjoyed knowing this new stuff:)

    ReplyDelete
  13. very helpfull informations for new bloggers

    ReplyDelete
  14. It is really great that almost most of you scored above 80. There is only one thing that would be appropriate to suggest in this case. The recommended load time is often less than 10 seconds by all major search engines and the Alexa tool would even mark a 10 second loading site as slow. We must keep in mind that as webmasters you must not accept every single recommendation put forward by Google or anyone. You will only tend to accept the tips and implement it to an extent to your site so that it may not effect other goals of your blogging. For example though a load time under 10 seconds is great but to achieve it you will have to sacrifice trendy stylesheets and scripts and this badly effects reader engagement and subscription because site deign matters a lot. Reader does not only enjoy browsing blogs that load well but with the introduction of jquery, CSS3 and HTML5 people have started valuing a site layout, design and first-impression a lot. So do keep balance of all factors and do not try to fit perfectly into the tips provided by search engines only try to get close to them in a wise manner.
    For example look at the following two renown blogs,

    mashable:88
    TechCrunch:89

    both of them are scoring close to that you scored and they both took around 15-20 seconds to load properly. Mashable has more data per page compared to MBT but still Mashable team is not killing their design and plugins just to keep Google happy, they value reader engagement more and so should you.

    Therefore I would advise that push your score to at least 85 if you can. For doing this try to display at most 7-10 posts on homepage with small thumbnail images. Link all images inside your template from blogger. Do not use too much of JavaScript. Quit unnecessary widgets and plugins. If any social media plugin is sending you no traffic then better quit it. Reddit and Delicious never sent us good visitors so we kicked it and gave more value to twitter, Facebook and Google plus alone. We enclosed the remaining plugins inside the Add-this share button.

    Avoid adding those useless directory badges on your blogs that promises to deliver reciprocal traffic. Read: Is Directory submission a waste of time?

    Track your alexa rank, increase your post frequency, write just 3 guest posts on good blogs to attract robots, resubmit sitemaps once a week to refresh indexing and keep spirits high. Rest everything will follow up naturally. Stupids like me brought this blog and a new blog to living then why not potential youngsters like you. Wish you all the best brothers. :)

    ReplyDelete
  15. Hi, Thanks for this. Now my blog will open in just 8 seconds :D

    ReplyDelete
  16. Wow thank God, and thank you so much to you, Mohammad. My blog got an overall PageSpeed Score of 92 (out of 100).

    I've got a lot of things going on my sidebar and yet load time is considered not bad. I have lots of ads and I have users online counter, etc. Tons of widgets really. Thanks a lot for this!

    Yours is the only one I read, of all blogging tips blogs.

    ReplyDelete
  17. The page Teentainment - Your Source Of Enterta... got an overall PageSpeed Score of 90 (out of 100). Learn more .. <3

    This was really awesome Post .. We all learned many things new from here :) Love yaa

    ReplyDelete
  18. My books blog has a page speed of 94.. Awesome I think.. And guess what, its without optimization, may be because I already optimized it way way before :D

    ReplyDelete
  19. Hey... Looks like I am the highest scorer over here :p

    ReplyDelete
  20. Sorry for the different different comments but they are coming in the mind one after the other.

    Why you suggest using gif or png and why not jpeg??
    I always used jpeg and reduce the size and image quality using Riot software. Image quality doesn't matter much on my blog.

    ReplyDelete
  21. My blog scored 93. How to defer parsing of javascript? It is showed as high priority?

    ReplyDelete
  22. @krishna Patel

    That sounds too fast! :p


    @Lagalag
    Most welcomed buddy. I visited your blog and I will suggest few things that will improve it even further

    1. do you think you need to display visitor flag counters? Does it ad any advertising value to your blog or instead it gives a non-pro look? I recommend removing all such widgets that gives no return value in terms of revenue and reader engagement.

    2. Display linkwithin related posts inside post pages only. Read this tutorial: Hide linkwithin on homepage

    3. You are using too many reciprocal links to directories. Please Read: Should you join those several traffic promising directories

    Hope this helps you and others too :>

    @yahya
    Amazing pal. Maintain that speed yahya :)

    @Bhavesh
    Oh surely you are the winner so far :p that is a great score and indeed the credit goes to displaying useful widgets only and ignoring the bulky non-related ones.

    png and gif are both web standards by w3c. They are rendered and displayed well on all browsers including IE except IE6 that does not support png transparency. JPEG is too heavy a size since it is color rich graphic used mostly in digital photography for c learn and nicely edged pixels. a gif and png weigh too less in size compared to jpeg and thats why we often ignore it while creating templates but do use it while displaying a rich photo portfolio and related content.

    @Nirmal
    I inetentionally did not talk about it because it doies not apply to us directly. It is useful for mobile applications. By defer parsing of javascript we mean that let javascript load at a later time. Most often the page graphics load compeletly but the loading icon still indicates that something in the background is loading and the user has to wait until it stops indicating. As a solution we normally add javaScript just below the opening <head> tag to avoid the delay. Therefore to link this issue to blog templates, I would advise that add non-ordered JavaScript functions just below Head tag.Examples include direct links to Jquery, plugins like google plus javascript link and sliders.

    Hope this helps :>

    ReplyDelete
  23. Well Mohammad...
    Whenever I see the size of the image the jpeg format is smaller than png. Suppose a jpeg image is of size 10KB then same in png format is more than 20KB then how can one say that png weigh too less in size.

    In my experience I always saw jpeg smaller in size than png.

    ReplyDelete
  24. Wonderful suggestions related to blogger found on blogtariff.com, i subscribed on that site and also in this site.

    ReplyDelete
  25. Wow.. Thank you very much.. Now I can add this slide show in my blog.. :D

    ReplyDelete
  26. @Mohammad Mustafa Ahmedzai

    From Vesselin:

    Thank you very much for this explanation, Mohammad! I tried to reduce some thing to my site http://www.hristiyanstvo.com/, but the test always shows higher value than before my compressions. It was 82, now it is 83 and I really doubt this mothod. I checked also one my unused blog with only one short post and it shows me a result 89. What I proved to myself with several sites is that the number of publications that are visible to your blog does not affect so much this google speed value!

    ReplyDelete
  27. My blog got 87 out of 100 From 1st site

    PS3Honey.blogspot.com

    Thanks

    Will you check and suggest anything for my blog? & How you find it
    Will be much appreciated

    Thanks

    ReplyDelete
  28. Yes scaling down and optimizing images is really useful. And yes, avoiding useless directory badges is a good strategy. Thanks for sharing this informative and detailed post on this subject.

    ReplyDelete
  29. thanks bro

    http://android2arabic.blogspot.com/

    ReplyDelete
  30. Hi, My site http://www.final-yearproject.com/ got 92 Score. Do you think i need to work more on the speed.

    ReplyDelete
  31. Hi Mohammad, thanks for this great post, i got 89 as my page load time, but when i tried compressing my javascript , i got this error message
    Unexpected token: Operator (>)

    what does that mean,
    Ordinarily, i would love it if you can help me take a look ayt the blog template i used MBT church theme, but i think i messed things up a little bit and the page load time is a little bit slow for my liking. www.makeeasymoneyng.com \
    thanks.

    ReplyDelete
  32. hi......muhammad if i forward you my template would you please make it better for loading. I got 92/100 with loading time 8.76 seconds. it shows suggestions in javascript and css image sprites, css not used so if you do it for me, will be very useful, i designed my template by modifying your monop template. but i am not so good in this work.

    ReplyDelete
  33. My blog score 62 how to improve it. www.sharingship.com

    ReplyDelete
  34. Mohammad Bro My blog Posts Takes 10 to 15 hours to index on google search . How can i Decrease index time To search on google for my blog posts. Please given my some valuable Tricks

    ReplyDelete
  35. Hi Mohammad,

    I am regular visitor to your blog. and I was taken you as my inspiration, recently I have started (www.idleindia.com) new blog for full of movies stuff. and previously i had another blog(www.a2zjntuspecial.blogspot.com).

    this article is really awesome.. and i know like these kind of ways are there to increase the speed. but i didn’t find explaining each and every small point anywhere in other websites like in this tutorial.

    here I am requested you to please have a glance on my new blog(www.idleindia.com) and please let me know what are the require modifications have to take. now I am using a template form johny series which is fully customized by me.

    and i got the score - 85/100, first time: 56.061s, Repeat view: 10.884s.

    I know while Blogging in a starting phase page views, impressions everything will be low, but i want to make my blog like a very big movie website. Please help me to reach my goal.

    ReplyDelete
  36. Mohammad Brother... There is a big problem. My Blog's i.e. www.studentvoice.in Google Page Speed score is 89/100. But It take more time to load. Is there any need to compress the whole xml or html code to load or I would use another template. Please tell...

    ReplyDelete
  37. This comment has been removed by the author.

    ReplyDelete
  38. This comment has been removed by the author.

    ReplyDelete
  39. This comment has been removed by the author.

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. This comment has been removed by the author.

    ReplyDelete
  42. This comment has been removed by the author.

    ReplyDelete
  43. hi Mustafa, i am a loyal reader to your posts and most of my blog is because of ur posts and i owe a lot 2 u man.Tested @ PINGDOM i got 82/100 (18sec)for a blog page nd 90/100(12sec) for my homepage . Speed HIGH PRIORITY issues:
    1)apis.google.com/js/plusone.js
    2)Leverage browser caching,
    3)Combine images into CSS sprites,
    4)Enable compression,
    5)Prefer asynchronous resources
    6)HOW to use small thumbnails 4 recent& popular widgets?.

    Hope u posts a detail HOW-TO about these issues & please check my site Copy Cats Revealed and give ur precious feedback my site@

    ReplyDelete
  44. my blog (www.regnumfinancials.com) scored 90 from that tool you provided in tutorial. do i still need to speed it up?

    ReplyDelete
  45. The logo of this page, logo2.png, compressed with http://compresspng.com:

    Source: 19K RGBA PNG
    Compressed: 8.4K (-55%) Indexed-RGB PNG
    No visual difference.

    ReplyDelete
  46. After testing my page speed the following error is showing...

    "An error occurred while running PageSpeed Insights. Please try again later."

    ReplyDelete
  47. My Blog is about HD wallpapers www.hdwalle.com how to increase the site speed??

    ReplyDelete
  48. Very good article and suggestions. This page score on google pagespeed insights are 64% for mobile and 74% for desktop page!. How is that!!

    ReplyDelete