Optimizing The Speed Of Your Website: The Method

Having a fast website is one of the top wish list from a webmaster or website owner. Usually I don’t really pay attention about this as it’s talking about money. The more money as your capital for your website, usually the more faster your website will be as you can afford to buy a better server or hosting plan. But I have to rethinking everything because of this additional reason.

Google indicates that the speed of your site will be considered as part of the page rank formulation. Website with speedy display will have additional point used for calculate it’s rank.

As usual, there is no exact formula, there is no definite date as when it’s going to be implemented and people is wondering around. But Google gives more definitive clue. As Yahoo has its YSlow extension, Google is now also incorporating similar tools on its webmaster tools complete with massive documentation as an instruction to everybody how to do it right. Explain below is the method to benchmark the performance of your website using mainly Google’s Page Speed tools and Pingdom performance tools. It’s quite simple and will not cost you money to do it. Let’s get started.

Resources

There are 4 main resources that need to be handy on your computer to start optimizing the speed of your website.

1. Account on Google’s Webmaster Tools (Free to signup if you haven’t has one: every serious webmaster need to have one!)
2. Google’s Page Speed extension on Firefox.
   Use your Firefox, login to you Google’s Webmaster Tools, click on your site, and on the left hand Dashboard menu, click the “Site Performance” as picture. Then click the below button.
   
   Page Speed requires “Firebug” to work. If you haven’t installed this just get it here.
3. Online Pingdom Tools , http://tools.pingdom.com/ – Alternatively, you can use “WebPageTest.Org” on http://www.webpagetest.org/. It’s more comprehensive but could be overwhelming and confusing if you are not up to it. Pingdom is good enough – you just want to compare the result before and after optimization unless you want to go deep in this stuffs.
4. Page Speed documentation as your knowledge base in doing the optimization

Method Optimizing Your Website

1. Go to Pingdom Tools : http://tools.pingdom.com/, enter the URL of the homepage of your website and run the test.
2. After test finish, note the total time required to load your website in the “Website Information” on the left bottom corner of the screen
   In this example, it took 9.7 seconds to load 41 object of 585.2KB
3. Now open Firebug (the default: press F12 key), click Page Speed and make sure “Profile Deferrable JavaScript” is active
   (click the arrow and tick the option)
4. Clear the cache of your browser and restart the browser
5. Go to your website but do not login into your website as it may behave differently (sent additional info in cookies, etc). If you are logged in, just logout.
6. Activate / open the firebug again (press f12) and click Page Speed
7. Refresh the display of your website by clicking Refresh button while holding the shift key (to not using cache)
8. Click “Analyze Performance” button on firebug
   
9. The result then will be displayed on screen, something like pictured on the right. In general there will be 3 different marking the green tick, the yellow triangle and red exclamation. Well, start fixing the problem from the reds then yellows. And basically don’t worry about items that already green.
10. Try to work the item one by one with patience. Don’t expect to be able to fix everything within few minutes. Take a good half day or full day to do this optimization. If you are not the technical person, have your technical person be with you when you do this. Otherwise with a bit effort you will find that doing this optimization is a little bit fun.
11. Repeat task (1) to compare the result

This method and tools are the one wake me up that you can really do something to speed up the website. On this actual sample website. I manage to make change the access from 9.7s to only 1.8s or roughly 5x faster.

Waterfall Chart to visualize the loading of all your file

Because of the good result, I actually now can add some functionality on the website to make it even better. If you’re curious, the real website that I did above was http://cookingbyme.com – a start-up cooking niche wordpress blog. After adding the FCG as you can see, the access is still pretty fast (under 4s). No the website is on managed VPS, not dedicated server.

Doing further comparison, it seems that although located on the same server, different website with difference theme and functionality, give me a really different result.

I would suggest to make all your website accessible and displayed around 5 second. The faster the better. Not only it will give you bonus point for the pagerank, but also make your visitor happy and in awe – stand up from the crowd: not only the content and functionality, but the speed as well.

What I really did will be written on several other article on this website as well. Stay tune !

Some articles on this topic:

• Link Building: A Must Do SEO With Some Sad Facts
• Review TEXTLINKS.COM: For your SEO Link Building Task
• Introducing SEO: The New Beast in The Neighbourhood