Book review of "Speed Up Your Site" by Andy King (free)
Did you know that, for the majority of users, the average site feels twice as slow as it did seven years ago? Neither did I, and it's just one of the eye-opening statistics quoted in " Speed Up your Site" by Andy King. In this review, Bruce Lawson goes through the book and examines its usefulness, and shares some of the many real-world tips from this ruthlessly practical book.
Chapter 6: A case-study
This chapter shows how King employs the techniques about to reduce a real web site by an amazing 93.8%. Before you imagine similar savings for yourself, the site that is the guinea-pig is perhaps the most ludicrously bloated site ever. But it's a good introduction in how to apply the steps shown, giving a process to follow.
Chapter 7: CSS Optimisation
Chapter 8: Advanced CSS Optimisation
Whilst a lot of people have decided to start moving to CSS, there's a lot of confusion about how it actually works. I've seen many sites where the inheritance of styles isn't fully utilised, leading to lots of redundant rules, and this is one of the common coding techniques that leads to bloated downloads.
The rules in a nutshell
- Remove whitespace
- External CSS (rather than in-line) caches so doesn't need re-downloading
- Define rules as high up the document tree as possible
- Use grouping
- Use shorthand properties (set this in Dreamweaver with EDIT/ Preferences/ CSS Styles
In the Advanced chapter, King shows how to make CSS rollovers that save those HTPP requests and, in the case of pure CSS2 text rollovers, need no images - saving loads of bandwidth. As King points out, HTTP requests for images etc are one of the blocks to fast site delivery; they depend on the network and it is impossible to determine with any accuracy how long an HTTP request will take. Reducing the number of requests speeds up your site.
Chapter 9 Optimising JavaScript for Download Speed
Chapter 10 Optimising JavaScript for Execution Speed
These chapters were a jaw-dropper for me. JavaScript is great for low-level interactivity, client side validation etc, but some pages contain monstrous amount of JavaScript code - and remember, any JavaScript in the head of an html page must be processed before anything in the body can be shown in the browser. King also points out that sometimes the best way to optimise for speed is not to use JavaScript; using CSS for roll-overs, for example, saves lots of time.
King shows some extraordinarily geeky tips for optimising JavaScript; different ways to loop and test conditions to speed it up, but one of the best ways to speed it up is to compress it. Reduce the white-space; have short variable names; remove comments - all of those things are for your benefit anyway. This has the additional effect of making your code extremely hard to read or adapt.
So this:
function setAvatarMood(theMood) {
try {
//see if we have to reset the mood's duration
var resetMoodDuration = ((theMood != null) && (theMood
!= 'anim'));
//make sure there is a mood
if (!theMood) theMood = avatar.data.mood;
//store the new mood in the avatar
if (theMood != 'anim') avatar.data.mood = theMood;
//see if the mood exists
if (!globals.moods[theMood]) theMood = globals.defaultMood;
//set the appropriate mood-image to visible and all others
to invisible
//by moving them in or out of view
for (var aMood in globals.moods) {
avatar.labeledElements['avatar' + globals.moods[aMood]
+ 'Image'].style.top = ((aMood == theMood)?0:-10000) + 'px';
}
//let the mood expire if it is not equal to the default mood
if (resetMoodDuration && (theMood != globals.defaultMood))
{
if (theMood != 'anim') delayedEval(avatar.id
+ ".setMood", null);
delayedEval(avatar.id + ".setMood",
"try { engine.getAvatarByID('Quek', '" + avatar.id + "').setMood('"
+ globals.defaultMood + "'); } catch(e){;}", avatar.MOODDURATION);
}
} catch(e){}
}
becomes this:
function cq(de) {
try {
var ch = ((de != null) && (de != 'anim'));
if (!de) de = kj.data.hu;
if (de != 'anim') kj.data.hu = de;
if (!io.uy[de]) de = io.we;
for (var ty in io.uy) {
kj.op['avatar' + io.uy[ty] + 'Image'].style.top
= ((ty == de)?0:-10000) + 'px';
}
if (ch && (de != io.we)) {
if (de != 'anim') qw(kj.id + ".pw",
null);
qw(kj.id + ".setMood", "try {
po.pp('Quek', '" + kj.id + "').pw('" + io.we + "'); } catch(e){;}",
kj.ua);
}
} catch(e){}
}
and, after removing all white space:
function cq(de){try{var ch=((de!=null)&&(de!='anim'));if(!de)de=kj.data.hu;
if(de!='anim')kj.data.hu=de;if(!io.uy[de])de=io.we;for(var ty in io.uy){
kj.op['avatar'+io.uy[ty]+'Image'].style.top=((ty==de)?0:-10000)+'px';}
if(ch&&(de!=io.we)){if(de!='anim')qw(kj.id+".pw",null);
qw(kj.id+".setMood","try{po.pp('Quek', '" +kj.id+"').pw('"+io.we+"');}
catch(e){;}",kj.ua);}}catch(e){}}
Down from 1091 bytes to 376 bytes, with exactly the same functionality. (King points out some utilities that do this for you, see http://quadhead.de/jss.html or http://www.geocities.com/siliconvalley/vista/5233/jmyth.htm)
Bruce Lawson
I'm the brand manager of glasshaus, a publishing company specialising in books for web professionals. We've a series for dreamweaver professionals - the dreamweaver pro series.
Comments
Be the first to write a comment
You must me logged in to write a comment.