I’ve made so many rants about using JavaScript correctly over the past couple of months that I’m starting to lose count! Now, I would seem quite pretentious if I expected every web designer on the Internet to have read them but I’m not the only person preaching that JS/CSS should be used responsibly and under adult supervision…
Very large sites are pushing out horrendous JS/CSS combinations and for some of them they’re causing an extremely large problem in terms of system responsiveness.
IconBuffet recently redesigned their site and added a bevy of javascript features to it. As soon as it was made public, it was immediately noticeable how slow it all was… A glance at the source for each page instantly tells us where the problem lies.
<link href="/stylesheets/global.css?1176394146" media="screen" rel="Stylesheet" type="text/css" />
<link href="/stylesheets/admin.css?1176394146" media="screen" rel="Stylesheet" type="text/css" />
<link href="/stylesheets/sco.css?1176394146" media="screen" rel="Stylesheet" type="text/css" />
<link href="/stylesheets/jmc.css?1176394146" media="screen" rel="Stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/effects.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/controls.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/admin.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/application.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/auth.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/builder.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/global.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/lightbox.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/login.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/overlay.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/posts.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/scriptaculous.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/sifr.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/slider.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/tooltip.js?1176394146" type="text/javascript"></script>
<script src="/javascripts/unittest.js?1176394146" type="text/javascript"></script>23 external files?!! No — we only have half the story. There are actually 23 JS files and 15 CSS files! Some of them are in body code. Everything is GZipped so the bandwidth impact is minimal. Just around 115k. So what’s my problem?
38 external files! Each time a user loads the page, they make 39 connections JUST for the HTML, CSS and JS. Whack the images on top of that and you’re talking 100s of connections per user.
To compound the issue, they appear to be masking a random variable onto the end of the filenames to ensure they are not cached. So rather than have the files cached, the users are actually (albeit unknowingly) fisting IconBuffet’s server in its pooper, every page they hit… Well done IconBuffet!
Stop the abuse!
So how can they fix it? Roll all your damned files into two — 1 CSS file; 1 JS file. Done. The bandwidth you use by not having dynamically loaded stylesheets is made up instantly by saving your server the shed-load of connections. You’re probably using that bandwidth just on the HTML to list all the files!
You should also recognise that compression rates work best with more data. By rolling all the files into one, you’ll end up with so many more duplicate terms that it will compress much smaller than all of them separately!
With this done, you save your server god-knows how many millions of hits (the real meaning of “hits” — files downloaded) a day and your server will be so much faster!
It also frees up the HDs. The time they’re currently spending in random access cycles finding all these files, can be spent just pushing out the 2 external files in a sequential matter. So. Much. Faster!
I hope somebody at IconBuffet sees this post, pulls their finger out and whacks the design around because it really will serve to make the whole site much better. Equally, I hope if there are any other people who have sites that use so many multiple files (ala Digg) like this come around to the right way of thinking.
If you are in that situation and you’re considering bodging everything together as recommended here, please leave me a comment. I’m just curious to know how endemic the issue really is.