Establishing performance contexts

Ian Feather - @ianfeather

Performance at !

!

We don’t know how important speed is to our users at a given time

It’s not that hard to get fast

It’s not that hard to get fast

It’s not that hard to get fast

It’s not that hard to get fast

You can use these techniques to optimise

(to a certain extent)

Total: weight: 674 KB !

Until you scroll down the page…

!

Performance vs Design is all about compromise

Performance vs Design is all about compromise

You can only get as fast as the design allows

Performance Contexts

We have to accept there are things we don’t know

We are constantly required to make assumptions…

Assumption 1:Users on mobile devices want a different experience to those on desktop

Assumption 1:Users on mobile devices want a different experience to those on desktop

Viewport !== contextViewport !== network

Assumption 2:Users want every site to load within X seconds

Assumption 2:Users want every site to load within X secondsUsers want a site to load in-line with their expectations

Serving the same experience across multiple unknowns

is a compromise

Currently we don’t have the tools to do anything about this

But… !

The Web is for everyone

How can we determine a user’s performance context?

Why not ask them?

Hostel Mode

http://blog.chriszacharias.com/page-weight-matters

“We even burned through our monthly data plans in 40 minutes.”

LightMode

Default

Segmenting in to two ‘modes’ can be very powerful but…

Are we still making assumptions?

Did we ever ask users with retina screens if they want a slower experience?

And are we still compromising?

We can’t leverage the best of the platform… whilst limiting page weight.

LightMode

Default

LightMode

Default

Enhanced

Segmenting allows us to design focused User Experiences

Asking the user

How could this look?

Implementation Advice

Don’t build three different websites!

Abstract out the development complexity

if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window && 'classList' in document.documentElement && lpHostelMode() !== "light") {}

Global feature switches

<div class=“my-module”> <h1>{{ moduleTitle }}</h1> {{ img_tag(moduleImage) }} <p>{{ moduleContent }}</p> </div>

Authoring must stay the same

def img_tag(image_url, opts={}) return if @hostelMode !

image_tag(image_url, opts) end

Use helpers to abstract switches

Stateless vs Stateful

Consider the preloader

Future: Could the browser expose these user options?

Recap

You can only get as fast as the design allows

Your application may be entirely inaccessible to parts of the world

Segmenting the user experience can be very powerful

Don’t guess. Ask.

Don’t do it at the expense of complexity

Thank youIan Feather - @ianfeather

Creative Commons !

!

!

Arrano : https://flic.kr/p/4WjZDf Patrick Quinn-Graham (thepatrick): https://flic.kr/p/Tk4Ha Leonardo Rizzi (L1010913): https://flic.kr/p/cVRiZm