One of the things that I’ve heard about time and time again is about reducing page load times by reducing the number of HTTP requests. I’ve been a little skeptical and discounted it as trivial gains vs. maintenance considerations, but there’s been more and more actual scientific research in this area.
Keep an eye out for part II. They’re actually not the first to publish some findings:
Multiple CSS Files and the @Import
The trade off of maintenance vs. file load times is a serious consideration I think, but I also think it’s worth considering going forwards as far as something to emphasize in a “best practices” approach to bring to clients.
I find myself this AM staring at a CSS folder of, count them, 14 CSS files and thinking, wow, that’s a lotta HTTP going on. Granted, they’re not all loaded at one time, but even if you could cut that in half, you’d be winning something. The point behind the groups of files was easy: a home file imports design and layout, and then the home design and layout files. The drill only imports the design and layout. The Investment site loads the design and layout, and then a IR file. But there’s only one link tag, so there’s an @Import file. I love this, it’s so flexible.
In a CMS world where you might also be able to change what the core file loads by simply changing the @import file, never touching the TEMPLATE files or republishing.
These things have been my motivators. So flexible.
CSS Sprites, File Merges, Etc.
The other things you might have heard about was CSS sprites, or using many graphics in a single image and clipping to show only the portion of the image that’s important. Again, what a pain for maintenance, but, the payoff might be half again as many images requested over HTTP.
One of the things that Nate Koechley suggested was using, as part of a build process for deployment scripts which merge your multiple files. We don’t really use build processes at work, but there’s plenty of free text file merge utilities out there:
Ideally you might have a tool which is able to then split the files as well. Looking around it looks like there’s several available.
None of this solves the gains described above by having @import files, but maybe there’s some savings to be had.
There’s some others too, not just on CSS.
I was amazed while having the privilege to Beta Test the new Firebug 1.0 to witness this first hand with it’s new network tools. Below you can see a sample of loading the NavigationArts home page the order of the files loading and in fact the script files loading in order, while nothing else was loading.
I’m sure there’s more lessons to be learned here, especially on the trade offs.
Conclusions In Summary
So there’s a number of things mentioned to reduce http requests and speed page load times. For the full list, check out the articles linked at the top of the article. But, in brief my favorites:
- Reduce the number of CSS files
- Reduce the number of image files by using CSS sprites
- Consider Lazy Loading, or On Demand script file loading when you can
Possibly Related Articles
commenting closed for this article