Practical Patterns for Performant Web Design

Daniel Ryan


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?


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

Kyle Rush

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

Photoshop preset:

Cache Everything.

Rules are made to be broken

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

CSS “Above the Fold”

There is no fold

In high traffic web apps,
modularize your code

When you can't be fast, fake it


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