Yesterday’s post entitled “Best Practices for Speeding Up Your Web Site” has had me thinking about other ways to increase the loading speed of websites. People obsess over optimising SQL queries, caching templates and other more minor things. But what about the more obvious things? What will increase your site’s loading speed more: knocking 5kb off the size of an image, or making an SQL query 8ms faster?

I have trawled the search engines to find some sites with good ideas about how to optimise your website.

The first step is to analyse your website. The tool I most frequently use is Web Page Analyzer from Website Optimization. Enter your URL and it will tell you the total size of the page, the estimated download speeeds on various connections and a list of each different type of object on the page. Under “Analysis and Recommendations” it will tell you where you will need to focus your attentions. Putting mywebcards.net into the tool shows that the page size is far too big. There are apparently too many scripts and too many images. The total page size is 203517 bytes.

Next, read yesterday’s post about speeding up your website and implement the ideas that are relevant to you.

Here are a list of some of the best articles I have found about optimisation. I will list some of the ideas from each one.

The first is an article from Paul Stamatiou. It was published back in June 2006 but the principles still remain the same.

1. Reduce Overall Latency by Reducing HTTP Requests
2. Properly Save Your Images
3. Compression (of CSS, JS and PHP)
4. Avoid JavaScript Where Possible
5. Strip Extraneous PHP/MySQL Calls

Read the full article.

Next is an article from Webcredible - Ten ways to speed up the download time of your web pages. This from even further back - 2004 - but again, the principles are the basic ones that always remain the same.

Here are their suggestions:

1. Lay out your pages with CSS, not tables
2. Don’t use images to display text
3. Call up decorative images through CSS
4. Use contextual selectors
5. Use shorthand CSS properties
6. Minimise white space, line returns and comment tags
7. Use relative call-ups
8. Remove unnecessary META tags and META content
9. Put CSS and JavaScript into external documents
10. Use / at the end of directory links

Read the full article.

Third is an article from Webweaver entitled Formatting Tips To Speed up Your Website. The same ideas are beginning to crop up in each article, but this one features a few new ones.

1. Use CSS For Faster Pages
2. Use External Scripts
3. Remove Anything You Don’t Really Need
4. Avoid Nested Tables
5. Avoid Full Page Tables for Faster Rendering
6. Split Up Long Pages - Multiple Short Pages Load Faster
7. Remove Excess “Whitespace”
8. Keep Your Code Clean
9. Don’t Go Overboard On Images
10. Use Height And Width Tags on Images
11. Correctly choose gif, jpg or png

Read the full article.

The final article is aimed particularly at the server but is also worth a read. It is entitled Don’t just wait for Digg to kill you - be prepared!. It looks at the “Digg effect” and how it can hammer your server. Definitely worth a read.

Also, you should take a look at this book, Web Performance Tuning, 2nd edition for some more great ideas (disclaimer: affiliate link).

Over the next few days I will begin to optimise the WebCards homepage. I will see if I can reduce the page from 203517 bytes to something (well, according to that tool anyway) a little more reasonable. Let me know if you can notice any difference.