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.

Reduce Overall Latency by Reducing HTTP Requests
Properly Save Your Images
Compression (of CSS, JS and PHP)
Avoid JavaScript Where Possible
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:

Lay out your pages with CSS, not tables
Don’t use images to display text
Call up decorative images through CSS
Use contextual selectors
Use shorthand CSS properties
Minimise white space, line returns and comment tags
Use relative call-ups
Remove unnecessary META tags and META content
Put CSS and JavaScript into external documents
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.

Use CSS For Faster Pages
Use External Scripts
Remove Anything You Don’t Really Need
Avoid Nested Tables
Avoid Full Page Tables for Faster Rendering
Split Up Long Pages – Multiple Short Pages Load Faster
Remove Excess “Whitespace”
Keep Your Code Clean
Don’t Go Overboard On Images
Use Height And Width Tags on Images
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.