Quick tips: Parallel Loading
“Parallel loading” is what I like to call the feature of all modern web browsers - to request multiple files at the same time. For instance, when you load this web page the first thing to be grabbed is the raw HTML file. The HTML file then links over to a variety of files such as CSS files, JavaScript code and images used in the design. In the old days, a browser would have pretty much lined each one of these up and waited until one had finished before requesting the next. Not now though!
No, modern browsers are better behaved. They tend to begin requesting CSS files before the HTML file has finished loading, grabbing images left, right and centre and a whole lot more. Sounds great, doesn’t it ? Well, kinda.
One big pitfall of this is that you could be dealing with a lot of overhead from the raw HTTP requests in themselves. They are composed of data too, and take resources to manage (both client- and server-side). If you have dozens of images on one page, a CSS file or two and maybe a few JavaScript files, this can quickly bring a server to it’s knees with heavy traffic.
Lots of techniques exist to optimise your page load experience which are beyond the scope of this quick post. However, I would recommend reading up on the following:
- CSS sprites
You may well have heard of these - a CSS sprite just means putting multiple images into one image file and using background positioning tricks to display each individual image. The benefit is great here since you make less HTTP requests and your file sizes will drop (less image header info). - Compiling multiple CSS and JavaScript files into one file
This is pretty simple. Just whack all your JavaScript into one file (if possible) and the same with your CSS. This is more difficult to implement if you have a defined build and deployment system, but well worth trying. - Reduce the keep-alive on your HTTP server
If you are serving lots of files, try to reduce the keep-alive timeout of HTTP connections. Keeping a connection alive for 15 seconds after it was opened may sound like it would reduce overhead (less connections need to be opened) but just thing of how a few dozen connections sitting around idle will sap your server resources. Better to kill ‘em early! - Don’t serve content from domains with cookie data
Every time you make a request to a file on a web server which has cookie data associated with it, that cookie data gets sent in the request too. Chances are you don’t need to know if the user was logged in just to retrieve your site’s logo, so try running was is known as a “CDN” - Content Delivery Network. Google it and see! - Utilise caching well
Caching is awesome. Well, if you don’t mess up. Try setting far-future expires times (such as 1st Jan 2038) on unchanging content such as CSS files, JavaScript files and images. The browser won’t even make the request in the first place, then! If you do need to change one of these pieces of content, a simple trick can avoid the cache not updating: append a query string to the URL. So for http://www.example.com/cssfile.css, change it to http://www.example.com/cssfile.css?v=1. When you update it, update the links to it to say http://www.example.com/cssfile.css?v=2 - that way the caching will not interfere.
That should be enough to be going on with!

Recent Comments