Performance
and the Pursuit of Butter
Andrew Krawchyk - @krawchyk
4/21/16
Andrew Krawchyk
- Senior Web Developer at ISL
- FEWD Instructor at GA
- ❤️ pour-over coffee
The WorldWideWeb (W3) is a wide-arena hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.
- http://info.cern.ch
The WorldWideWeb (W3) is a wide-arena hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.
- http://info.cern.ch
Why would we give that up?
Poor Performance Costs You Users
- Influences a user's ability to retrieve content
- Influences a user's ability to run heavy JavaScript
- Influences a user's interest in staying on your site
Pro-tip: All influence bounce rate ;)
If we're ignoring performance, we're ignoring users.
Performance Impacts UX
What Matters is the User
Common benchmarks don't represent a typical user experience on the web.
What does a user feel?
How do we measure "slow"?
Google Defined 4 Types of Interactions:
- Response to Input
- Animation & Scrolling
- Idle
- Loading
Response to Input
- User taps or drags for an action.
- Expects reaction to that event to be immediate.
- User scrolls page or sees animation.
- Expects the effect to be buttery smooth at 60fps.
Animation & Scrolling
Idle
Loading
- User loads the page and sees critical path content.
- Expects for page to be ready for interaction quickly.
- User isn't active now (but could be).
- Expects page to be immediately ready for interaction.
What are Good Performance Goals?
- Context sensitive
- 10ms for a website - not a big deal
-
10ms for a game or WebGL - laggg
- .1s - result feels immediate
- 1s - user's flow of thought is seamless
- 10s - zzzzzzzzzz lost user's attention
Response to Input
Goals:
- Tap to paint: 10ms
- Touchmove: <16ms
Animation & Scrolling
Idle
Loading
Goals:
- Work completes quickly
- Small batches
- 50ms chunks
Goals:
- Frames draw in <16ms
- 60fps
Goals:
- Ready to use in 1000ms
- Satisfy response goals during full load
Where do we start?
Backend
- Benchmarks
- Application performance
- Database performance
- Load testing
Frontend
- User testing
- Browser profiling
- Network waterfall
- Speed Index
- WebPageTest
Gather Metrics
Document Visual UX
- Record user interactions
- Account for region and device differences
- RAIL specific information on different devices
- How different do sites look during loading?
- What about across the globe?
Beat the Competition
Aim to be at least 20% better.
Take pride in results
Document improvements and compare the changes.
Forever in Pursuit of Butter
Butter is that feeling you get when everything goes so smoothly you don't even notice it.
Never "Good enough"
Pro-tip: that's not butter :(
How do we get there?
Everyone Can Help Improve Performance
- Design: consider performance during creative
- Strategy: analyze competition, schedule user testing
- Development: define performance budget for projects
Know Where You Stand With a Performance Analysis:
- Identify top 10 competitors
- Identify important metrics (context clues)
- Compare current positions across a typical user experience
Make the Cut With a Performance Budget
- Define limits for important metrics
- People recognize difference of 20%
- Easily expose the information during dev
- Meet baseline 20%, or be aggressive
- Stick to it!
Choose Carefully When Prototyping New Features:
- Optimize existing features to make room
- Remove low priority feature from the page
- Don't add feature
- Add feature.
Under budget?
Over budget?
Together, we can make butter happen.
Forever
Pursuing
Butter.
Fin.
Copy of Performance and the pursuit of butter
By Andrew Krawchyk
Copy of Performance and the pursuit of butter
Performance is like butter, you don't really notice it until it's gone.
