How to build faster loading websites

Coding considerations

How you code can make a big difference to site speeds. Although some developers advocate whitespace removal, that's only really useful for high traffic sites, and even then speed differences are typically negligible. But smaller modifications to code can actually make a bigger difference.

First and foremost, how you attach style sheets will affect your site's speed. In IE, @import behaves like putting elements at the bottom of a page, which hampers progressive rendering (meaning a browser can't easily and quickly display content correctly – problematic for pages with lots of content being downloaded across slow connections).

To avoid this, use and place style sheet links in the head of your web page. Avoid proprietary filters. For example, evidence suggests AlphaImageLoader, often used by designers to force PNG transparency in versions of Internet Explorer prior to 7, freezes rendering while the relevant image is downloaded. Graceful degradation is therefore preferable.

"You should also collate styles and scripts into single files, rather than several includes," advises Heilmann. "Every script or link to a CSS file on your page slows it down, because the browser needs to negotiate the DNS, load the file and render it. If you put several CSS files into one document, you don't have that overhead."

In contrast to CSS, modern thinking recommends placing scripts at the bottom of a document, because scripts block parallel downloads. With style sheets at the top and scripts at the bottom, the result is that users start scanning a page that appears to be loading, and scripts catch up in the background.

"I also recommend the lazy-loading optimisation trick," says Heilmann. "JavaScript can load a very small script initially, check the user's preferences and the current page, then pull necessary bigger scripts only when needed. You can even load images only when they're visible in the browser viewport."

The host with the most

We've already mentioned that minimising HTTP calls speeds up sites, since browsers only run a small number of simultaneous concurrent HTTP requests. Other hosting considerations can also make a big difference to a site's performance. "Tune your database server," argues IT manager Sam Gaw. "Most of the time, database servers aren't properly tuned for the job or the hardware." He suggests you look beyond generic configurations.

"Most people use MySQL," he says, "so set shared memory and buffers properly, enable slow query logging, look at what you're using specific tables for and set the appropriate storage engine. If you're not an admin, run something like MySQL Tuner to point you in the right direction."

DATA MANAGEMENT: Check your SQL database for possible problems and speed up access to your content

Clearleft developer Natalie Downe suggests "using different servers for images or static files, so that you're increasing the number of concurrent connections that you can have". Alternatively, you can use content on the same server, but work with a few sub-domains, which the browser sees as separate servers.

Another in-vogue tip is the use of gzipping to reduce the size of HTTP responses. Rather than a server sending standard documents, they're sent compressed and then unpacked in the browser. This can hugely increase speed when it comes to text files, which compress well, with the trade-off being more processing power required by the server and some old and creaky browsers not supporting gzip.

Downe adds that, with care, you can make the compression even more effective: "If you're consistent in ordering CSS properties and HTML attributes – be that alphabetically or by some other method – this helps the gzip algorithm and reduces sizes further." (Note that you need to configure your server so it returns gzipped content if a browser can deal with it – is.gd/TTaS provides an overview of how to do so.)

External factors

It's also essential to think outside of the box to find further means of speeding up your site. Often, you might have blazing code and highly optimised content, but a site that's slow due to being held back by sluggish external content, such as adverts. If that's the case, weigh up advertising revenue versus major performance issues.

You should also check your host's site on a semi-regular basis. McLellan recalls how last year he investigated what his hosting company was offering for new accounts. "Technology is always getting cheaper and better, and we found the hosting account we were paying for was more expensive and not as good as the current new accounts being offered by the same company. So we made sure we were getting the most out of our limited budget by asking to be swapped to a new account. It saved us money and doubled the performance of our server in one simple move."

Finally, explore online resources for more information about site optimization – although be wary. Modera CEO Siim Vips explains: "There are optimisation tests online, but many are neither reliable nor trustworthy, since they're built to generate leads for developers." He suggests restricting yourself to freely available resources, including the well-known W3C validation services, along with "guidance and instructions from trusted and respected founders of principles that have set the standards that are still used today."

Two internet giants have made the greatest strides in this area. As Heilmann notes, "Yahoo and Google have both done a lot of research on web performance and released their findings." The Yahoo approach is particularly interesting – along with information organised into categories (images, CSS, mobile, and so on) at developer.yahoo.com/performance/, there's Firefox extension YSlow.

"Using YSlow, you can analyse a web page and you get rated A to F for each optimisation technique. You can click on each mark to learn what you can do to get a better score," says Heilmann. "Using tools such as these, you can easily optimise a site without being an expert – and they're great for showing just how much impact a few changes can have."