Practical Patterns for Performant Web Design
Follow along at dryan.com/performant
- Developing since 1998
- Background in the agency & freelance worlds
- Director of Front-end Development at Obama for America
My time at Obama for America
- 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 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
Generally GZIP provides a 70% smaller file size
Reduce the number of HTTP requests
Rules are made to be broken
If you have a good reason. Laziness doesn’t count.
In high traffic web apps,
modularize your code
When you can't be fast, fake 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.