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...


@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


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


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)


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


Do This, Not That

Cache or chain selectors

Do this:


Not that:


Do This, Not That

Provide Context (source)

Do this:


Not that:


Front-end is inherently interdisciplinary

A photo of a dog and a cat snuggling.

(photo: dugspr)

Server-Side Tips

The Future

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

The Future (continued)


I'd love to hear from you.


These slides: