There are thousands of ways to improve a website’s performance or load time. But all can be categorized in mainly three areas: Server side scripting like Java, Python and PHP, hardware of your hosting server and front end performance which includes HTML, CSS, JavaScript and Images used in your website. First two can be expensive to you because a dedicated server needs real money, but you can do at your end on optimizing front end performance without expending too much. It only needs some time, which is not a big deal when you are going to make your website perform better.
So here are the carefully chosen 6 ways to make your website’s performance better:
1. Find the culprit by Firebug: Firebug is a great tool to inspect HTML, debug JavaScript and to analyze network usage & performance for a website. Profile your webpage with the help of Firebug to know about the components which needs to be optimized. Firebug is a free to use tool and you can integrate it with Firefox browser.
2. Save a few bytes by minifying JavaScript and CSS: Remove unwanted characters like tabs, spaces and source code comments to reduce file size of CSS and JavaScript. For Example:
A small part of CSS:
.more-class {
color: #ffffff;
line-height: 40px;
font-size: 10px;
}
Above code can be written as:
.more-class {color: #ffffff;line-height: 40px;font-size: 10px;}
And it will work as the previous one. You don’t need to be panic for manually minify JavaScript and CSS, because there are plenty of tools to do this. Some popular tools for minify CSS and JavaScript are: CSS Optimizer, CSS Compressor, JSMIN, YUI Compressor and JavaScript Code Improver.
3. Avoid inline CSS and JavaScript: External JavaScript and CSS files are cached by visitor’s browser by default. When user navigates your website’s inner pages his/her systems have already cached JavaScript and CSS files which help inner pages to load fast. On the other hand if you use those CSS and JavaScript in your HTML document, you would not be able to take advantage of users caching. So always use CSS and JavaScript as separate files not inline.
4. Reduce HTTP requests by using CSS Sprites: You can combine smaller images into one big image and at the time of display adjust the CSS attribute (background-position) to display the correct image. In this way you can reduce the number of HTTP request for images. This technique is known as CSS Sprite. You can do it manually or with the help of a web based tool called CSS Sprite Generator. 
CSS Sprite technique is very effective in improving website’s performance especially in situation where many smaller images like menu icons are used. You would be surprised to know that Yahoo uses this technique for its home page.
5. Reduce image file size by saving in right format: Images can be real culprit for bad performance of a website if not used in right format. You can reduce image file size by just saving them in right format. Lighter images help a webpage to load fast. There are three common file format used in web designing: PNG, GIF and JPEG. You should use JPEG format for most images with smooth gradients and color tones. You should use GIF and PNG format for solid color images like charts and logos. In increasing order heavier formats are: JPEG, PNG and GIF. Now you are clear that GIF should be avoid wherever possible.
6. Reduce HTTP requests by combining JavaScript and CSS: When a webpage is requested by a web browser, an HTTP request is created for every component that is required to render that page. Let us assume that a webpage needed 5 CSS files to render the whole page and then 5 separate HTTP requests are needed. By combining those 5 CSS files we can reduce HTTP requests to generate the webpage. These reduced requests will make your webpage performance better.
Although there are many other ways to reduce page load time, but above mentioned six are really good and practically proven methods to do the same. Hope these will help you to make your website perform better on web.
