Practical Patterns for Performant Web Design

Daniel Ryan

@dryan

Daniel Ryan

  • Developing since 1998
  • Background in the agency & freelance worlds
  • Director of Front-end Development at Obama for America

My time at Obama for America

Obama for America logo
  • First responsive campaign website in political history
  • Developed systems that engaged hundreds of thousands of volunteers
  • Registered over 1 million voters online
  • We raised over $690 million online, $125+ million as a result of optimization and testing

What does performant mean?

Speed.

We made the new platform 60% faster and this resulted in a 14% increase in donation conversions.

Kyle Rush dryan.com/krush

General Rules for Speed

  • Proper placement of resources in the markup
  • Compressing text assets
  • Reduce the number of requests
  • Optimizing images
  • Cache the shit out of everything

Compress assets

Generally GZIP provides a 70% smaller file size

Reduce the number of HTTP requests

Optimize images

Almost a 50% reduction in file size

See the original tests at dryan.com/fgretina

Photoshop preset: dryan.com/jpgretina

Cache Everything.
Aggresively.

Rules are made to be broken

If you have a good reason. Laziness doesn’t count.

CSS “Above the Fold”

dryan.com/cssatf

There is no fold

dryan.com/hfwd10 dryan.com/hfwd11 dryan.com/hfwd12

In high traffic web apps,
modularize your code

When you can't be fast, fake it

dryan.com/igspeed

Upload

Faking it

  • Preemptively start uploads when it makes sense
  • Assume non-critical API calls are successful
  • Update the UI with feedback often

The Internet is hard, dude.

Matt Gipp

Thank You

Photography by Manik Rathee