6 Ways to Get Better Website Performance

Posted by Jack White - May 26, 2011 - Design/Development - 5 Comments

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:

firbug for firefox1. 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.

 

About the Author

Jack White

Jack Sam White is online marketing executive and technical writer for Social Media Outsourcing provider company, Techndu. He is expert in web designing and SEO, have contributed as writer in many blogs including Social Media Management Tool Blikini.
5 comments
morrison real estate
morrison real estate

Wow, these are really good suggestions. I am often in the lookout for ways on how to make my site faster and I must say that this is the first time someone had actually suggested techniques that actually make a difference. Thanks!

rakesh
rakesh

I am following all these recommended features except CSS sprite. Will Try to do the same on my template to enhance it's performace. My recent post How StumbleUpon Can Help Drive targeted Traffic for Your site

gem
gem

Wow thanks for this one! I must say that i really need to read stuffs like this to help me learn more about blogging since i am just new to this. It's a good thing that i was able to come across this article because i am very much willing to explore more about this stuff. Thanks so much for sharing the tips... can't wait to apply it once i create my own website! My recent post Don’t Be a Quitter

gem
gem

:) My recent post Don’t Be a Quitter

jacksamwhite
jacksamwhite

Hi Gem, thanks for appreciating my writing. Apply above tips to optimize your website's performance and I am sure that you will succeed because all techniques are proven by experts.