Make it Faster, Make it Badder, Make it Awesome

Ryan DeBeasi

Front-End Developer

352 Media Group

Atlanta HTML5, 4/19/2012 (Video)

What is performance?

We can measure the time it takes to...

Why?

@mikeyk on performance

"Mobile experiences fill the gaps while we wait. Nobody wants to wait while they wait. Mobile needs to be fast."

- Instagram Cofounder Mike Kreiger, via LukeW

How?

Greyhounds Running

What we think websites do

Photo: Clearly Ambiguous
Greyhound Sleeping

What websites really do

Photo: Sage the dog

The Basics

The Basics (continued)

Essential Tools

Test time!

A photo of a very messy, old-school computer lab. Photo: Tobias Wolter

Before

Not combined or minified: 6 seconds

(via Dropbox)

A screenshot of WebKit's net panel.

24 requests ❘ 686.86KB transferred ❘ 6.31s (onload: 6.20s, DOMContentLoaded: 5.73s)

After

Combined & Minified: 3 seconds!

(JS was combined but not minified because of semicolon funkiness)

Another screenshot of WebKit's net panel. This one shows far fewer requests than the previous one.

9 requests ❘ 679.88KB transferred ❘ 2.99s (onload: 2.72s, DOMContentLoaded: 2.09s)

Next Steps

JavaScript/jQuery

Do This, Not That

Cache or chain selectors

Do this:

$('div.awesome').addClass('fun').show();

Not that:

$('div.awesome').addClass('fun');
$('div.awesome').show();

Do This, Not That

Provide Context (source)

Do this:

$('div.awesome').show();

Not that:

$('.awesome').show();

Front-end is inherently interdisciplinary

A photo of a dog and a cat snuggling.

(photo: dugspr)

Server-Side Tips

The Future

<picture>
<source src="high-res.jpg" media="min-width: 800px" />
<source src="mobile.jpg" />
<!-- Fallback content: -->
<img src="mobile.jpg" />
</picture>

The Future (continued)

Questions?

I'd love to hear from you.

www.ryandebeasi.com

@RyanDeBeasi

www.352media.com


These slides: ryandebeasi.com/words/faster/

/

#