As well as reducing request sizes, one way to potentially boost the performance of your website is to reduce the number of requests required to load each page.
Every HTTP request has at least two layers of overhead associated with it:
- Sending request headers.
- Receiving response headers.
Each of these headers can add several kilobytes of data to the request, which quickly adds up if you have dozens of resources (stylesheets, JavaScript, images etc.) on a page. The exact amount will depend on your site and server configuration, but the default maximum in Apache is set at 8KB by LimitRequestFieldSize.
In addition, there is the overhead of resolving the host name and establishing the connection, although name resolutions are usually cached and connections are often re-used by modern browsers – e.g. to download multiple files in one connection.
Only include resources where necessary
This may seem obvious, but can often be overlooked if you have a single header template which includes every possible JavaScript and CSS file used on your site. As an example, a site which I was working on recently used jQuery for some aspects of form-handling, and so the library (around 100KB) was included on every page. However, only certain categories of authenticated users had access to the page containing forms which used jQuery. By rewriting the main header template to only include the library on these pages, the site performance was improved for all users who did not use the form pages – especially new visitors who arrived on the homepage for the first time.
Concatenating files
If you have multiple CSS files included on each page, they can be combined into a single file by simple concatenation. Provided that you concatenate the files in the same order in which they are referenced in the page, the end result will be the same, but you will have saved n – 1 HTTP requests (where n is the original number of CSS files).
You can also use the same technique for JavaScript, although depending on which libraries you are using and how your code is structured it may not be as simple a task as just concatenating the files.
CSS sprites
CSS sprites are a mechanism by which you combine multiple images into a single image file, and then use CSS to display part of that combined image. The visual effect is the same as having each image as a separate file, but your browser only needs to make a single HTTP request for the combined file. Better still, the combined file is downloaded once and then should be served up from the local cache each time it is required.
If you want to see this technique in action on a real website, try right-clicking on a smiley image when logged into Facebook and choose ‘Inspect Element’ (or the equivalent in your browser).
Whilst sprites can make a big difference if you have lots of small but frequently accessed images, I would recommend leaving this technique until last, as it can substantially affect the markup for your site.
Caching
Sensible use of caching can also reduce the number of requests required to load a page on your site. However, this is such a large topic that it will be covered in a separate post sometime in the next week or so.