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.

• 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

Where do we start?

• Benchmarks
• Application performance
• Database performance
• Load testing

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.

Together, we can make butter happen.

Forever
Pursuing
Butter.

Fin.