Website load time is very important factor which even decides the revenue of the business. Statistical data tells that high-speed loading websites have a quantifiable result on revenue and user experience. Everyone hates a slow loading websites and applications. Though we have several programming scripts like PHP, asp.net, JSP etc., but the browsers understands only HTML, Javascipt and the CSS nothing else. Browser is not smart as we are 😉 . The browser never cares about your programming language or the database we use. No matter what technologies we use the web server just takes your server side code and generates simple mark up language (HTML). So the optimization can be done in server side and client side to make a website load fast.
- Optimizing the server side (to reduce the webserver execution time)
The recommended size of the web page is less than 1MB.
How to optimize the website to load fast?
Optimize the Client Side Stuffs first.
1. Reduce the image size
Image consumes the major part of the page size. Images are always looks nice but it definitely increases the page load time at a greater extent. Reduce your image size without compromising the quality. Try service like http://www.jpegmini.com/ & http://www.smushit.com/ysmush.it/ to compress your images.
2. Use CSS for Background Images
Applying background pattern to websites looks really cool; it avoids the boredom of the typical background. But it really kills when you use a big background images. Instead use small image may be 50*50 and use CSS to apply it on the entire website background without stretching the image.
Alternatively you can use the CSS patterns for the background like this. This pattern is actually one among the Lea Verou’s CSS 3 Pattern.
One way of reducing the http calls is reducing the number of small images. Instead of using many small images club it as one using CSS image sprites concept. A good place to start with http://www.w3schools.com/css/css_image_sprites.asp
The other way is combining the different small JS files into a single file and this applies for CSS files too.
4. Avoid using absolute path wherever possible
Using absolute paths forces the web server to establish a connection, send and receive the HTTP requests. If using relative, the connection is already established,
5. Use CDN for all the scripts wherever it is possible – Jquery, Dojo, prototype and much more
CDN – Content delivery network. Akamai and google are the major CDN providers. They simply host the famous libraries on their own set up and share you the link. The famous libraries are often used in various site we visit, so when you use CDN based libraries. The download doesn’t happen each time. So your website loads faster. CDN also reduces the DNS lookup counts. Some sample CDN
More insight about CDN http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
6. Combine all the files
7. Gzip Compression
Include this line in your .htaccess file to enable the gzip compression.
8. Yslow tool
This is really a great tool for assessing your website load and optimizes the website.
Before Optimizing the website
After Optimizing the website
I have applied the so far techniques and achieved really a great amount of speed for one of our client’s website. Initially the site was 1298.8 K and with 54 HTTP requests after optimizing the website the size becomes 752.8 K and with 51 HTTP requests.