Techniques

8 Most Effective Methods to Optimize and Boost Website Performance

Written by Kevin Liew on 15 Dec 2010
23,226 Views • Shares
10 comments

Introduction

I have been in web development industry for quite a long time now, start from personal interest, to freelancing and now working as a full time web developer in an vibrant and fast pace digital agency. I have learned heaps of techniques and skills in developing websites as well as make sure websites perform well in an optimised server environment. So, I created this post, as a reference to myself and some tips and tricks to all of you.

1. Use HTTP Compression

Server side Compression is one of the most effective and quickest ways to optimize your website performance. Basically, when the client requesting for a webpage, the web server compresses the webpage and send it back to the client. Client's browser will unzip and then present the content to the viewer.

However, you might not want to compress everything, for example, images. Luckily, you able to specify file types you want to compress. The following is the code in htaccess:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files>
SetOutputFilter DEFLATE
</files>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

References and credits:

2. Use Google Libraries API

I think this point is pretty important as most of the websites are using javascript framework. Hosting the script in your own server can consume fair a bit of bandwidth. Why don't use the bandwidth free solution from Google? It's free, fast, simple and better caching.

Not convincing? You should read this detailed analysis from Dave ward - 3 reasons why you should let Google host jQuery for you. The following is the snippet from Google:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files>
SetOutputFilter DEFLATE
</files>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

References and credits:

3. Clean Code

Well, the best thing to start with website optimization is start from the source code. Writing clean code isn't easy and it takes some times to learn from experience, however, we have a few tips here to assist you:

  1. Keep your CSS and Javascript external: We should always separate HTML, CSS and Javascript in external files. It not only make your code easy to read, clean but also allow you to optimize each individual files according to its language.
  2. Eliminate unnecessary divs in HTML: It happens quite often that some of the divs we wrote are doing nothing. Sometimes we just have to go through it and remove them.
  3. Use CSS Shorthand: Shorthand can save a few bytes! :) Visit my previous post for CSS Tips and Tricks and Shorthand - CSS Shorthands
  4. Try to write your own jQuery script: This is purely my own preference and I think it's pretty good too. There are heaps of jQuery plugins out there, but most of the time it's different from what you want or, they are packed with thousand of features but you only need one. So, in such scenario, writing your own simple script could save heaps of space! Drawback is, time consuming and hey, you learn stuff from it!

References and credits:

4. CSS Sprite

"CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment." - Yahoo Developer Rule

One of the famous techniques widely used by web designers/developers. Reducing the HTTP connection definitely will make the loading of your website faster! However, it does require some knowledge of image editing tool to make the CSS sprite.

References and credits:

5. Image optimization

Needless to say, images are always the first thing to look at when you reducing the file size of a website. If you're using Adobe Photoshop, always use "Save for web..." option for web optimized images. You are allow to adjust and optimize images to the file size you want, of course make sure the image quality is still at an acceptable level.

The following tools and articles will able to guide you to achieve this point:

6. Caching

Caching is the great way to make your website load insanely quick. Basically, clients save a copy of your web content - html, css. js and images locally, when they visit your website again, if the cache has not expired, they will just load it locally without request from the server. It's a great way to reduce network traffic and bandwidth of your website.

The following PHP script, set the cache expiry period to 3 days. For other implementations, visit : Caching Tutorial

 

7. Compressed CSS and JavaScript

If you have a lot of CSS and javascript files, you might want to consider this method - compress and minify your CSS and javascript files. The goal of compressor is to minify files and to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). The best compressor out there is completely free, read more on YUI Compressor

8. Amazon S3 - Not free

This is one of the most efficient ways to save your server bandwidth. This solution is simple, it reduces your server bandwidth by storing all your files in Amazon storage services. Files such as images, zip files and pdf can be stored in different servers. Take Amazon Simple Storage System S3 as an example, it offers large amount of storage and bandwidth with reasonable price.

Conclusion

That's all I can think of at the moment, but if you have some other suggestions do drop it in the comment below! :) Thanks for reading.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

10 comments
technology review 6 years ago
Effective and vital tips for enhancing site performance
Reply
tawatchanan 6 years ago
I think so with your post. By the ways, I didn't understand about Google Libraries API a little bit.
Reply
Leyon 3 years ago
Pretty awesome. I really liked the post and bookmarked it though. But I believe there are some other tools, tips and tricks which you can follow to optimize your website in true essence of performance optimization. You may look at some of the tips on Cloudreviews website http://www.cloudreviews.com/blog/website-performance-optimization-tips-and-techniques
Reply
techwench 6 years ago
that would help me in optimize my site
thanks!!!
.....
Reply
anehra63 6 years ago
I completely agree with you , these should be the one of the most effective methods to enhance website performance.
Reply
inspirationfeed 6 years ago
Thank you so much for these valuable resources!
Reply
Ben 6 years ago
Great article - thanks for the tips!
Reply
Adrian 6 years ago
good tips, thank you. i think my site load quickly
Reply
Kombo 6 years ago
I'd add "configure your server to use keep-alive function". It's funny, but many webmasters forget about that vital option.
And there's a useful website that checks all those things - http://siteloadtest.com
Reply
khoa 6 years ago
thank very much
Reply