More than 30 ways to increase your website's performance24 JAN
2008

Website performance optimization is a topic frequently discussed in many forums and blogs, but I've seen just a few websites actually applying these techniques. Even large to huge websites are having 100-200 KBytes pages which generate a lot of bandwidth and also are pretty hard to get loaded by the search engines or by visitor's browsers. Not to mention the amount of time used by the website to generate the output, the so called server job. This article will focus on how to optimize the output, since this task it's much easier to do and can be implemented by almost any website owner with a minimum of web development knowledge. We will cover other website performance areas in future articles.

Now, let's see why would any website (owner) roll over and do any of the changes we will describe:

• Reduce bandwidth usage or deliver more page views with the same bandwidth usage
• Speed up the loading time or server more clients in the same time
• Allow search engine crawlers / bots to index more pages on your website in the same ammount of time ( and using the same bandwidth )
• By removing the exceeding html code, the content ratio is increased. This SEO factor is not as important as it used to be couple of years ago, but you shouldn't ignore it when optimizing your website

As you can see, optimizing the content that your website outputs to your visitors, cat get you benefits in multiple areas: a less expensive hosting required, a better website from the search engine bot's point of view, a better user experience when browsing your website. And more benefits will be discovered by you and your visitors once you'll optimize your website.

So, first things first. Let's see the simplest ways to get all those enhancements:

1. Move your CSS & JavaScript code into external files
2. Remove inline CSS styles
3. Get rid of the extra/unused meta-tags
4. Trim out the white chars
5. Remove the comments
6. Use short names for media included in your website(images, flash files, movies and others)
7. Use relative links instead of full url links
8. Move irelevant or non-unique content into subpages or popups
9. Remove or refactor un-needed widgets
10. Remove site-wide links from your footer

If this is not enough, and you're feeling like you could do something extra, here are some more advanced techniques that require better CSS / JavaScript knowledge:

1. Convert your design to a tableless design
2. Use short names for CSS classes and IDs
3. Group css selectors having similar properties
4. Use short-hand css styles and compress the CSS files
5. Use short JavaScript function names and obfuscate/compress your JavaScript files
6. Replace CSS classes and ID's with CSS hierarhical selectors
7. Replace inline JavaScript events with Prototype generated events
8. Replace complex html rendering code with images
9. Use AJAX to load only variable content from your pages
10. Use Javascript to render complex tables and forms
11. Deliver compressed content when possible

The content files are not the only ones that would required some optimization. Usually, all resources used in a website (css files, java script files, images, flash movies, etc) can be optimized so the bandwidth is used with maximum performance and the sites are running as fast as possible.

1. Optimize images for web
2. Use GIF images when possible
3. Reuse images
4. Use cookies only if necessary
5. Make sure you maximize the client side cache-able content
6. Combine multiple css or javascript files into single resource files
7. Combine multiple small resource images (sprites) into one single image
8. Convert audio/video content into streamable content
9. Use preloaders for flash content
10. Use as few external objects on your website as you can
11. Put your static images, JavaScript files and CSS stylesheets on a different domain/subdomain.