Performance
and the Pursuit of Butter
Andrew Krawchyk
4/29/15
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
- NewRelic
Frontend
- WebPageTest
- User testing
- Browser profiling
- Network waterfall
- NewRelic
Gather Metrics
Document Visual UX
- Record user interactions
- Account for region and device differences
- RAIL specific information on different devices
- How different do sited 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 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
- Developer: define performance budget for projects
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:
- Over budget? Optimize existing features to make room
- Over budget? Remove low priority feature from the page
- Over budget? Don't add feature
- Under budget? Add feature.
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
Together, we can make butter happen.
Forever
Pursuing
Butter.
Fin.