New Perspectives on Performance

NEW PERSPECTIVES
ON PERFORMANCE
@mennovanslooten
jQuery San Francisco 2012

HI, I’M MENNO

•I live in The Netherlands

•I make websites for http://www.aanzee.nl

Can you improve the
performance of this page?

PILLARS OF PERFORMANCE

• Visibility

• Interactivity

• Responsiveness

Before you start optimizing...

ESTABLISH A BASELINE

• Measurable

• Repeatable

• Stable

Tip: Always focus ﬁrst on
low-hanging fruit

PILLAR 1:
VISIBILITY
Going from about:blank to a styled web page

PILLAR 1: VISIBILITY

• Read High Performance Web
Sites by Steve Souders

PILLAR 1: VISIBILITY

• Install Firebug and YSlow

• Do whatever YSlow tells you (if you can do it in a day)

• Don’t worry too much about the rest

Tip: Crowdsource your
measurements with
Google Analytics

<html>
<head>
<script>
__START__ = new Date;
</script>

$.ready(function() {
var time = new Date - __START__;
_gaq.push(
'_trackEvent',
'performance', 'dom_ready', '',
time, true
);
}

Tip: 8-bit PNG’s with alpha:
http://www.8bitalpha.com/

PILLAR 2:
INTERACTIVITY
Going from visible and styled to fully clickable

PILLAR 2: INTERACTIVITY

• Read Even Faster Web Sites
by Steve Souders et al.

// Don’t do this:
whatever_happens();
here();
}

// to this:
console.profile();
whatever_happens();
here();
console.profileEnd();
}

// Immediate init
function init() {
// Do lots of stuff with #form
}
init();
});

// Delayed init
function init() {
// Do lots of stuff with #form
}
$('#form').one('mouseenter', init);
});

PILLAR 3:
RESPONSIVENESS
Going from user action to visual feedback

PILLAR 3: RESPONSIVENESS

• Read High Performance
JavaScript by Nicholas Zakas

Tip: throttle/debounce events
http://benalman.com/projects/jquery-throttle-debounce-plugin/

// Don’t do this:
$(‘input’).on(‘keydown’, someHandler);

// Do this:
$(‘input’).on(‘keydown’,
$.debounce(500, someHandler));

// Don’t do this:
$(‘body’).on(‘mousemove’, someHandler);

// Do this:
$(‘body’).on(‘mousemove’,
$.throttle(500, someHandler));

New Perspectives on Performance

Tip: this one is easiest to fake

Performance optimizations
are expensive

Performance optimizations
can increase costs

PHOTOGRAPHS

• http://www.flickr.com/photos/thehenryford/4929428611/

• http://www.flickr.com/photos/thehenryford/4930039724/

• http://www.flickr.com/photos/proctorarchives/6831872685/

THANK YOU
menno.vanslooten@gmail.com
@mennovanslooten

Thanks to Aan Zee (http://www.aanzee.nl) and the jQuery Foundation

New Perspectives on Performance

More Related Content

What's hot (20)

Similar to New Perspectives on Performance (20)

Recently uploaded (20)

New Perspectives on Performance

Editor's Notes