The goal of this article is to give you some pointers in optimising a website or webpage. There are many areas that could be covered here, I will concentrate on the methods that I used and found most useful in optimising some pretty heavy web sites/pages.
Essential Tools
Firefox 3+
Plugins:
- firebug – net section
- yslow
- FF – Lori
- Page Speed
The above plugins are very useful for what we want to do, each one has its strengths and weaknesses. YSlow offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint. Another cool tool is Page Speed. It is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to check the performance of their web pages and to get suggestions on how to improve them.
Below are recommendations once you have established that your site is under performing.
1.0 Images
Compress images as far as possible before loosing quality. JSLint and Smush.it are easy tools to use as mentioned above in YSlow. Reusable images should be combined into one file and manipulated through CSS.
2.0 Javascript
Move all js files to the bottom of the file where possible. Compress files where possible with jsmin.
3.0 HTML/W3C Compliance
W3C compliance is important as the browser has to do extra work if there are syntactical errors.
4.0 CSS
Compress files where possible with jsmin. Make sure CSS is not redundant.
5.0 Server Compression
Assumptions: Website is running on Microsoft Platform and website is running on IIS (Internet Information Server). I found this step to have the most immediate impact and one of the simplest and fastest optimization techniques. IIS Compression using GZIP . Using this technique I was able to cut download size by 40%.
[update] Found this recently posted resource which gives an even more in-depth tutorial then the above link on fine tuning IIS Compression.
6.0 Reduce the number of files
The number of files being included into a page has a big impact on page load time. Combine image into one if used across site. Combine CSS/JS where possible.
Using the simple steps above I was able to cut the page footprint by 70%. This is not only a time saving for the end user but a huge financial saving for the host in terms of bandwidth.
Related:
Another quality article from smashing magazine, http://www.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/
