Designing Faster Sites

Most of the time we don't think about the way a page is styled or the HTML output could affect performance for users.

However you'd be surprised that the location of a css file or adding an additional meta-tag could give your site performance gains.

Most of the details of how to improve your site is talked about in this article.

Just a few highlights to mention:

* Loading CSS files at the head tag
By moving the CSS file as high as possible in the page gives the appearance the page is loading quicker. This is because the browser is able to download the CSS and begins rendering the styling earlier

* Use Expires or Cache-Control
By adding meta tags to tell the browser when to cache/not cache content can help save performance. This alleviates the amount of content the browser needs to download from the server.

* Put Javascript At The Bottom
If you can placing the Javascript at the bottom of the page helps parallel downloads in the browser (e.g. download images in parallel before Javascript is loaded). Javascript traditionally wasn't downloaded in parallel because of the order that Javascript needed to be executed and the changes that could be made to the DOM.

* Use GIFs over JPEG when possible
Smaller files that's why.

* CSS and Javascript As External Files
So that these files can be cached by the browser.

Also check out YSlow - this firefox plugin tells you what parts of your site (e.g. images) causes performance impacts on your site

I'll definitely be rolling these changes out myself on my site