Further to my pointers about how to improve the performance and quality of your website and my blogs on Google's musings about a website's speed affecting it's rankings I thought a few more pointers about things to consider when looking at improving the speed of your Webpages might be helpful.

Reduce File Sizes

You can find out the sizes of your files by looking at the "Site Inventory" page in your Sitemorse Audits or looking at the "Page assets" info of a Snapshot report and see the impact on performance by looking at the "Performance" info.

Use a HTML Compression tool

There are multiple methods of reducing the time it takes to send a file from the server to the client. Gzip is a compression tool used on servers to compress files in order to save those precious kilobytes. It is the most popular and effective compression method at this time, reducing the response size by about 70%. It can be used to reduce the size of any type of file, however as images and pdf files are already compressed, it is typically best not to attempt to compress these with gzip as there may be loss of quality and can potentially increase file sizes.

Don't Scale Images In HTML

Just because you can set the width and height of an image in HTML does not mean you should! If you want to display an image that is 100px wide and 100px high, then the image should be 100×100px rather than a scaled down 500×500px image! This will reduce the size of the image therefore make it load faster.

Optimise your CSS and JavaScript

Removing unnecessary code from JavaScript and style sheet files will reduce the file size, thereby improving load times. Minification takes this a step further by removing all comments, new lines, tabs and spaces. This improves response time as the size of the downloaded file is reduced drastically. A popular tool for minifying JavaScript code and CSS is YUI compressor.

Reduce Server Calls

You can find out the number of CSS and JavaScript files by looking at the "Site Inventory" page in your Sitemorse Audits or how many are on a particular page by looking at the "Page assets" info of a Snapshot report.

Combining style sheets (and JavaScript files for that matter) into as few files as possible will reduce the number of calls being made to the server. Combining files is more challenging when the style sheets and scripts vary from page to page, but the improvement in response times makes it well worth the effort.

CSS Sprites combine background images into a single image, reducing the number of image requests, and using CSS can show only the parts as desired using the background-image and background-position properties.

Script Locations

You can find out the sequence of how files are loaded by looking at the "Performance" info of a Snapshot report as well as seeing the impact they have on the page's load times.

Where you import your CSS and JavaScript can make a huge difference on how long a page takes to load, and how long it appears to take.

CSS At the Top

Moving style sheets to the HEAD makes pages appear to be loading faster as the page will render progressively. Not only is this stated in the HTML specifications, but by placing them near the bottom of the document, many browsers will be unable to render the page correctly as these browsers block rendering to avoid having to redraw elements of the page if their styles change.

JavaScript At The Bottom

Browsers are able to download from multiple sources at the same time (usually two downloads in parallel per host) allowing a page to load a smidgen faster. The problem with JavaScript is that they block these parallel downloads. Moving them to the bottom of the page gives everything else time to load. Sometimes this is impractical as some script may be needed in order to insert content into the page, for example if the script uses document.write. A work-around for this is to create a function at the bottom of the page and use an on-load command, where you want the content, to call a function when the page has finished downloading.

Flush

In PHP the function flush() allows a partially ready HTML response to be sent back to the browser. This is useful while the back-end is putting together the rest of the HTML page and is most noticeable on busy back-ends, where a script requires a lot of time to pull together a lot of resources and complete making the page before sending it to the browser. A good place to consider flushing is right after the HEAD as this is usually the easiest part of the page to create and allows the browser to start including any CSS and JavaScript files the browser requires while it waits for the rest of the HTML page, which the back-end is still constructing.

For example:
...<!-css, js->
</head>
<?php flush();?>
<body>
...<!-content->