Wasimasif's Blog

Recently I have been working on performance optimization of a site. There are several guidelines available from Yahoo! and Google. These include techniques from optimization of CSS code to use of CDN, yes the list includes a lot.
What are the top techniques which can benefit any site the most? In this post I will list top 3 techniques and describe them briefly.

The top techniques are

1. Reduce HTTP Requests
2. Use browser cache properly
3. Compress your content with gzip

Reduce HTTP Requests

Reducing the components (images, JS, CSS) on a page reduces the HTTP requests. Popular ways to reduce the components include, using image sprites, image maps, combine multiple CSS and JS files into one.

If you see this page test you will notice that only 11 HTTP requests are made to fully load home page of an eCommerce site, which is very few as compared to similar sites.

One important thing you also need to check if Keep-Alive is on. For most servers its on by default. This allows persistence connections for HTTP requests. Other wise new connection is made for each request.

Use browser cache properly

A first-time visit to a page may require several HTTP requests to load all the components. Using browser cache can avoid unnecessary HTTP requests on next page. Browser cache should be used for all components including images, js, CSS, and Flash etc. This not only reduces number of HTTP requests it also saves a lot of bandwidth for visitor and server.

See the repeat view test result which shows only one request is made rest of components are served from local browser cache.

Cache is utilized by setting proper expiry headers for components. Read my other post Using browser cache image expiry for performance which explains how to set these headers.

Compress your content with Gzip

Compressing HTML, CSS and JS etc reduces response times by reducing the size of data sent. Gzip is the most used and effective compression available. Gzip normally reduces the response size by about 70%. All major browsers support Gzip compression. This saves a lot of bandwidth on client and server end at very small CPU cost. In my post Compress your web pages I have explained gzip in bit more detail.

To make your website successful its important that its availability is 100%. Site downtime can cause serious damage in SEO and drop in sale.
What can cause down time?
Well there can be a lot of reasons for a site being down. This includes database server issues, web server server issues and DNS issues etc.

How can you monitor it?
For database related issues you can write a piece of code which can send email whenever its unable to connect database.

For server side or DNS related issues you can use some free websites which monitor your sites and send email or SMS alters. There are many paid services available which provide advance monitoring. They can monitor site from multiple geo locations and send alters.

Few free sites providing basic monitoring are

• http://www.freesitestatus.com/en/
• http://www.montastic.com
• http://www.serviceuptime.com

To improve response time of web page to visitor, it is highly recommended that web page should be compressed with gzip. Compression reduces response times by reducing the size of the HTTP response. YSlow and PageSpeed rate this as very important aspect of performance. To see how gzip compression works see my other post about gzip compression.

According to Yahoo, Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Good thing about gzip is that almost 90% of browsers support this compression.

CRE Loaded already have built in system to enable gzip compression for pages. This feature is disabled by default but can be enabled easily. To enable gzip go to admin area and click on “Configuration” > “GZip Compression” menu. Here you can enable gzip compression by editing “Enable GZip Compression” configuration.

To test gzip compression you can use this tool http://www.gidnetwork.com/tools/gzip-test.php. You can also use YSlow to confirm gzip.

Visitor click recording is very effective way of knowing behavior of visitors. Its results can help improve site navigation and flow.

In this post I will discuss two methods to record clicks. The two methods are

• Event Tracking of Google Analytics
• Third party click recording

Event Tracking of Google Analytics

Google Analytics (GA) provides a handy to record clicks and events. As most of the sites already have GA installed it becomes easy to use its event tracking.

Syntax for the recording function is

._trackEvent(category, action, optional_label, optional_value)

• category (required) The name you supply for the group of objects you want to track.
• action (required) A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
• label (optional) An optional string to provide additional dimensions to the event data.
• value (optional) An integer that you can use to provide numerical data about the user event.

For example if you need to record clicks on a link following will be the code.

<a onclick="pageTracker._trackEvent('Page', 'Click', 'My Link')" href="#">My Link</a>

Here pageTracker is GA’s main object that is used to track page views etc. If you are not using standard GA JavaScript code this might have different name.

The code to work properly you ensure that pageTracker is available other wise the code will generate error. Also it is good idea to write a custom function to use _trackEvent. For example you can create a JavaScript function and call this function in your links. In this function you can write code to call _trackEvent.

The function can look like this

<script>
function myTracking(category, action, label, value){

if(typeof(pageTracker)!='undefined'){
pageTracker._trackEvent(category, action, label,1);
}
}
</script>

The above function will not generate error if pageTracker is not initialized properly.
Official documentation can be found at http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html

Recently found an interesting tool from Google “Page Speed” for FireFox, similar to yahoo’s YSlow. Page Speed is installed with firebug extension. The tool is very useful for analyzing the performance of any page.

It gives suggestions in different categories to improve page load time. The suggestion include compression, browser cache, serving from cookie less domain, optimize images etc. The suggestion are much similar to which provided by YSlow, but more detailed analysis of images and css etc makes it different.

Page Speed gives cool stats about the images optimization and actually allows us see and save the optimized version in PNG format. The optimized version seems to be as good as the original version when compared visually but significant reduction in file size is achieved. I recently used images optimized with Google Page Speed tool in CRE loaded based project, and observed significant improvement.

For last few days worked on performance optimization of CRE Loaded site. Now all major performance measuring tools Yahoo YSlow, Google Page Speed and WebPageTest.org are rating the site as A grade site.

I have been studying and applying performance guidelines for a while. Recent addition of Site Performance stats in Google Webmaster Tools have motivated me to run a full optimization cycle on CRE Loaded.

A number of performance tweaks were applied over a time, like cache, gzip compression, image cache etc. Still few things were missing like proper use of browser cache, http requests, css gzip etc.

Now following are results from performance measuring tools
YSlow

Page Speed

WebPageTest.org

Detailed test results can be seen at http://www.webpagetest.org/result/091228_3WME/

If you want your site to perform as good as A grade site you can contact me by posting a comment for free advice.

Web servers log a lot of information regarding request served. These logs can be used extract a lot of information about your site. For example which images are requested most, which pages are famous etc etc. As these logs are in text format so its very difficult to get any meaningful information manually.

I have recently used a tool to get a lot of information which helped in performance optimization of my site. The tool is called WebLog Expert. The tool can analyze apache or iis logs both in compressed form (gzip) or plain text format. Its Lite version is free of cost but pro and std version have small tag price. More information can be found at weblogexpert.com.

Google have added its site performance tool under Webmaster Tools. The tool is available under “Labs” menu, so it means its still in testing mode. See the image below

The tool includes a graph of average page loads time. The stats shown are collected from visitors who use Google tool bar with PageRank option enabled. The graph gives clear idea how your site is performing for the visitors. see the image below

Next part of the tool shows some tips to improve page load time based on Google Page Speed tool.
The release of the tool shows that Google likes faster sites from visitor point of view, and how important site performance can be in Google ranking. To read more how to improve site performance please follow Web Performance Optimization category.

When optimizing web performance, most consideration is given to reduce number and file size of images, CSS and JS etc., and less consideration is given to size of HTML being sent to browser, called “document size”. Optimizing document size can be very beneficial.

There are two ways you can reduce the document size

1. Reduce HTML
2. Compress HTML sent

1. Reducing HTML: Well its not easy for developers, but its good to consider during writing html. A good way to do it is to use DIVs instead of tables. If used correctly divs reduces the code to text ratio in document. Secondly avoid using inline css styles and java script. You can use external css and js files for this purpose.
2. Compressing HTML: The best way to reduce the document size is to send html in compressed form. Today most of the browser capable of receiving html in compressed format, un compress it on client side and display it correctly. This reduces the time spent and bandwidth usage between browser and server significantly. If you are working with PHP and apache it is really easy to compress HTML before sending to client. Most of the PHP installations have built in gzip library. You only have to use it. If you have static files or don’t want to use PHP or have static html files you can use apache module mod_deflate to compress html. Both of above methods use gzip compression.

How gzip Works
gzip compression works by finding identical strings within a html, and replacing those temporarily to make the overall size smaller. Its compression algorithm makes is very suitable to be used with html, css as they have repetitive tags and definitions. For example if our html has tag <div> 100 times it will replace this tag during compression thus reducing the size significantly.

Some times for connivance webmasters don’t specify dimensions of images (using height and with attributes). If thumbnails of user uploaded image are created proportionally it become difficult to specify a fixed size of an image as one dimension may be smaller then other. See in example page here image dimensions in listing are not specified as images are of different sizes.

Not specifying image sizes causes “Browser reFlow”. Browser reflow means that browser have to adjust height and width of image once its downloaded. After browser determines the image dimensions it has to adjust height and width of all parent elements. For example if an image is located inside a TD, the browser will adjust height/width of TR, table and then page body.

All these operations consume client CPU so the page renders slower, thus giving impression of slow loading to client. So it is good idea to specify dimensions for all images. I recently fixed this issue on one of my CRE Loaded based project.