Website's performance using Firebug and YSlow

In this episode, I am going to measure the website's performance on the browser's side. I am going to test the responsiveness (the amount of time it takes to load on web browser) of the website. I am going two things

1. Measure the responsiveness
2. Improve the responsiveness

1. Measure the responsiveness

There are two different methods to measure responsiveness. One is through

a. Firebug

Firebug is a plugin. It integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page (Source Ads on for Firefox). You can download it from its official website. (https://addons.mozilla.org/en-US/firefox/addon/1843/ )

After you install firebug, open the firebug (For this go to Tools>>Firebug >> Open Firebug ).

Today I am going to test the responsiveness of the famous news portal of Nepal ie nepalnews.com. To check its responsiveness, browse www.nepalnews.com and check its performance by going to Net Menu and All submenu and it shows the result like this:


If you view the large section of the image, then you can see the timeline which show the time to load different components like CSS, Javascript files, images, and so on. Here in this figure, it shows

Total time to load is 28.45 seconds
Total size loaded is 200 KB.

It seems pretty slow responsiveness of the website. We will analyze the reason for taking much time to load in the browser and will optimize to make the website load fast.

b. Using Safari

For this go to Settings>> Preference and then click on Advanced tab there. You can check in Show Develop Menu in menu bar

Now you have Develop menu added. Click on that menu and go Show Web Inspector and then click on Resources tab.

Enter nepalnews.com in the URL section and you can see the total time it takes to load all the components. You can also see the separate section where it provides the total time it takes to load documents, stylesheets, images, scripts and so on. The snapshot is shown below:

Here,
Total time to load is 33.8 seconds
Total size loaded is 477.07 KB

Here the total size loaded and total time to load differs in two different approaches based on the total size of the files loaded from cache.


2. Improve the responsiveness

Basically there are some ways to improve responsiveness which are:

a. By improving server performance
b. By improving browser load time

By improving server performance is not really worthy for the time being to improve/optimize the time it takes to load the components in the browser end. So we are going to discuss the ways to improve the browser load time.

To improve the performance, the first step is to install YSlow plugin, which is Firefosx's adds on created by Yahoo!. To download and install it, here you go by following this link (https://addons.mozilla.org/en-US/firefox/addon/5369/)
You will see the little icon at the bottom right side of the browser and looks like this
Then go to nepalnews.com, click on this icon and and click on Run Test to see the performance report.


We can see that the nepalnews.com got the perfomance score 59 and grade E, which is very much poor with respect the responsiveness.

There are various ways we can improve responsiveness which has also been listed out there by YSlow:

I will go through some of the steps so that we can improve on these topics.

The very first one is making fewer HTTP requests, where the site has got even below the average grade ie F.

The reason behind this poor grade has also been shown by YSlow:

The reasons are

a. This page has 12 external Javascript scripts. Try combining them into one.
b. This page has 9 external stylesheets. Try combining them into one.
c. This page has 14 external background images. Try combining them with CSS sprites.

You may the see the actual screen shot of the analysis here too:

The suggestion is like this:

"Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps."

To implement this, I am using Ruby programming language which works on Rails framework.

Rails has some built-in tools to solve this issue. One of the ways we can do is by caching javascript pages. We using the following source code to implement this:

<%= javascript_include_tag :all, :cache =>true %>

What this code will do is that, suppose if I have three JavaScript files viz application.js, prototype.js and effects.js, then this code will help merge the javascript pages into one called all.js

We can also customize the name of the cache if we like to. We can do this by changing the above code a little bit:

 <%= javascript_include_tag :all, :cache => "main" %>

,Now the name of cache file will be created as main.js