User Expectations

Slow google
result link?

Some stats

• Users expect pages to load in 2 seconds
• After 3 seconds, 40% will leave
• 85% of mobile users expect things as faster or faster than desktop

* Designing for Performance - Lara Hogan

Performance Affects brand

• Google made searches load 400ms slower for some users for a week.
• Bounce rate went up and usage plummeted.
• They turned speed back to normal
• Bad effects lasted two more weeks

* Designing for Performance - Lara Hogan

We need a
performance budget

use metrics that
Reflect user experience

• "Speed Index"
• "Time to Interact"
• "Feature Ready"

Keep it balanced

• Take something out
• Optimize something
• Don't add the new thing

 

 

... or suffer the users' wrath

How do we
design for performance?

Strategery

• Mobile & Critical First
• Shared Code & Patterns
• Image Optimization
• Prioritize Perf in Teams

Mobile / Critical First

"The amount of content needed to render your page 
will directly impact how long it takes to load for
your users — the smaller, the better"
- Lara Hogan, Etsy

Mobile First?

Critical First?

Conversions First.

How can ux?

• Clarify critical content
• Prioritize it
• Decide how early it should be usable
• Hold team to the budget

 

 

 

... party with the happy users!

How can devs?

• Measure ready time of critical content
• Prioritize Critical content. Load it first
• Then, load less-critical content
• Measure again

 

 

 

... join party with happy users!

Shared Code / Patterns

custom styles make
every page slower

Shared code makes
every page faster

Use FS-Styles

Use shared modules

Image Optimization

Images are great

But...

Image tips

• Use as few as possible
• Match dimensions used on site
• Always optimize!
• Simple SVGs are tiny and scale well
• JPG for photos (blurry is small, high detail is large)

62KB

119KB

Who optimizes Images?

• UX & WebDev should get together on it
• "Save for Web" isn't good enough
• Use tinypng, jpegmini, imagemin, or other
• Future: automatic in Frontier Stack (Q3/Q4?)

Prioritize Performance

Ux owns
user experience

Performance is a huge part of this

Influence perf early

• You have the ear of the Product Owner and story council
• Get perf into acceptance criteria early
• Be sure feature has perf budget matching intended user experience from the earliest stage of planning

We all have our part

We can make exceptional
performance experiences for our users

Fight for the user!

and always...