8 Most Effective Methods to Optimize and Boost Website Performance

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:

• How to optimize your site with gzip compression
• Configuring HTTP Compression in IIS7
• 17 Useful htaccess tricks and tips

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:

• Google Libraries API
• 3 reasons why you should let Google host jQuery for you

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:

• 15 CSS Tips and Tricks
• 12 Principles to keep your code clean

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:

• 15 ways to optimize CSS and Reduce CSS File size
• CSS Sprites: Image Slicing's Kiss of Death
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
• 10 must see CSS Sprite tutorials

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:

• Most effective method to reduce optimize PNG images
• PNGOUT - Window PNG optimizer
• Shrink O'Matic - an AIR application to easily (batch) resize (shrink) images. It handles JPGs, GIFs and PNGs.

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.

• TAGS:
• Tips
• Tweak