Simple and effective techniques for speeding up your web pages

Sunday, June 28th, 2009

It’s important for our website to load as fast as possible.

The following are Simple and effective techniques for speeding up your web pages.

1. Use YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis.

https://addons.mozilla.org/en-US/firefox/addon/5369

yslow

2. Add future Expires Header

Adding an Expires header to your components with a date in the future makes them cacheable, reducing the load time of your pages.
<FilesMatch “\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Expires “Thu, 15 Apr 2010 20:00:00 GMT”
</FilesMatch>

3.  Lay out your pages with CSS, not tables

Because CSS downloads faster than tables.

4. Use shorthand CSS properties

Example:

Use:

padding: 20px 10px 30px 40px (top, right, bottom, left)

…instead of:

padding-top: 20px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 40px

5. Put CSS and JavaScript into external documents

To place CSS in an external document use:

<link type="text/css" rel="stylesheet" href="style.css" />

To place JavaScript in an external document use:

<script src=”file.js” type=”text/javascript”></script>