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

Jakob Nielson: Response Time Limits

• .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.