geekandpirate

Welcome to my blog. GeekAndPirate is all about the web programming tricks,tools and techniques that I will be sharing with you. I will be also sharing all the tricks and techniques of hacking stuff(yeah that's true!!) I would be also interested in talking about the latest developments about the world of the WEB. So stick with me!

Tag Archives: gzip

Best Practices for Speeding Up Your Web Site

What makes a website good? Is that looks and presentation created by combination of some cool CSS and images? Or is it it’s pure functionality, what features it provides, it’s user friendliness, never mind the looks? Well, for some people, looks matters while other prefers it’s functionality. But in reality, a web developer really has to balance these things while creating web application, if he is expecting something out of it.

But having said that, many web developers ignores the speed which is a really crucial factor for judging the site’s popularity. They are too busy improving looks and functionality, that they simply overlook this important aspect. This aspect of speed is really crucial for the professional, business oriented site as the investors want to monetize their investments as much as possible, while a bad speed means potential loss of business. Many developers think that speed is not an important aspects ┬ánowadays due to faster network connections. This is however not true, coz as the bandwidth of the network is increasing, the site are more and more taking advantage of it and acting as a data hub. Ten years back, we were using dial up connections with the bandwidth of few bytes or kbs at the most, and the sites at that time were suitable to adopt that connection. We now have broadband/wireless connections having speeds in several Mbs. So now we have more data fetching site like youtube. So in short, one can not depend on the newtwork.

So what makes a site run ‘slower’? Or in other words, what one should do to make the site run ‘faster’? Well, it involves several factors. It involves both client and server side optimization.
Let’s see some of the best practices web developer must follow to improve the speed of the site.

HTTP Request –

According to report by some experts, 80% of the end user response time is spent on the front end, downloading components of web page like style sheets, javascript files, images, flash, frames etc. naturally, reducing the number of these components will make the page load fast. A developer can achieve this by avoiding loading unnecessary files. Many developers don’t take proper care while using these components. There several ways to achieve this-

Combine files – Combine all script files into single script where ever possible. This will result in fewer HTTP request.

CSS Sprites – Combine your background image into single image and use the CSS background-image and background-position properties to load the desired image

This is a very important factor in site’s speed. If you are able to reduce the number of HTTP request, you have almost won the battle.

Adding Cache Control header or Expiry –

If site is having some static elements which will eventually last forever, you can set far future Expires header. In this case, browser will cache that element and if the page is visited again, that element will be loaded from the browser cache rather than making a request to the server

If site contains some dynamic content, you can use appropriate Cache-Control header.

keep in mind that, if you decided to change the element, use different file name which will force the browser to make a http request for that rather than loading it from the cache. If same name is used, it will be loaded from cache and user will see old(and outdated) element.

Gzip

Very few developer knows about Gzip. It is a compression method to reduct the size of the HTTP request. Client (browser) initiates request with following header –

Accept-Encoding: gzip, deflate

When server encounters this header, it compresses the response with gzip compression method. It reduces the size of the http response making it faster to travel across the network. it response with following –

Content-Encoding: gzip

Using CSS at the top

Putting stylesheet at the top makes a page load progressively generating a good user experience. Html specification suggest that stylesheets are to be included in the <head> section. If it is placed at the bottom, user will see a white page for longer time, especially on the slower conenction, generating a bad user experience.

Load scripts Asynchronously

According to specifications, a browser can’t download more than two elements of the page from the same domain. However, in case of scripts, it can download only one at a time. So a while a script is loading, it halts downloading of the remaining components of web page until it finishes, resulting in bad user experience. Loading scrips asynchronously make the parallel download possible, that is page does not waits for the script to get finish, but keeps on downloading the other components.

External javascript and CSS

One should use the external javascript and css rather than using inline js and css. The benefit of using this is that browser caches js and css files, so subsequent loading of the page will improve the performance since those files come from cache rather than from server, while inline css and js does not posses this benefit.

Minify javascript and CSS

Minification is a process of removing unnecessary code from the file. It also includes removing unneeded characters, spaces, new lines, tabs and comments. This significantly reduces the size of the file resulting in reduce load time for that file

Remove Duplicate Scripts

If proper care is not taken, there is a chance of loading the same script twice. This will not only cause an extra HTTP request, but also takes additional time to evaluate the script. This happens mainly when developer has spited the document into multiple section, the file may be accidentally duplicated on multiple places

Split Components Across Domains

Splitting components across domains allows you to maximize parallel download possible. We can have static contains of the site like banner image, css etc reside on different domains which results in faster downloads

No HTML Image scaling

Don’t use width and height attribute of the html <img> tag. If you are having a div of size 200 * 200, then use image of that size rather than using a bigger version of that image, for eg. 500 * 500 and scaling down that to 200 * 200. It will make page load slower.

Avoid image tag with empty src attribute

Avoid image tag with empty src attribute, since browser will anyway request the server for the image.  It will not only slow down the page response time, but will also increase the server computation time to process that request.

Use CDN

Use Content Delivery Network(CDN) to split your content across servers spread across various geographical locations. The location of a user from server affects the speed of the site. Proximity to a server means improved speed from user’s perspective.