Designing speed with progressive enhancement

DESIGNING SPEED WITH PROGRESSIVE ENHANCEMENT

Sergey Chernyshev | @SergeyChe WebPerf Camp, 2016

Sloooowly

SPEED MATTERS

to your users and to you

SLOW MEANS LOWER CONVERSION

RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs

CONVERTED USERS HAVE FASTER EXPERIENCE

RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs

STATS

➤ Google: +500ms => -25% searches (2006)

➤ Amazon: +100ms => -1% revenue (2008)

➤ Netflix: +GZip => -43% Traffic cost (2008)

➤ Shopzilla: -5s => +12% Conversion rate (2009)

➤ Google: +400ms => -0.21% searches after experiment! (2009)

➤ Mozilla: -2.2s => +15.4% Downloads (2010)

➤ Edmunds: -77% load time => +20% page views (2011)

➤ DoubleClick: -1 redirect => +12% CTR (2011)

➤ Etsy: +160Kb => +12% bounce rate (2014)

➤ Trainline: -0.3s => +$11.5M / year revenue

http://WPOStats.com/

WHAT DOES MY SITE COST? (WHATDOESMYSITECOST.COM)

http://www.disney.com/

% OF DAILY BUDGET (WHATDOESMYSITECOST.COM)

http://www.disney.com/

DESIGNFOR SPEED

and progressive enhancement

MOVIES OR PAINTINGS?

Speed vs. Fluency, What drives user engagement?

Kent Alstad, Velocity NY 2015

PERFORMANCE CHOREOGRAPHERS

Performance Choreography

Tim Kadlec, WebPerfDays NY 2014

PROGRESSIVE ENHANCEMENT

➤ Enhance page features progressively as it loads and renders

➤ Main goals:

1. Enable features based on browser capabilities(e.g. JavaScript, image formats, local storage, gyro/compass)

2. Reveal features as page is being downloaded and rendered (render basic html + CSS, add JS handlers, fonts, etc)

FEATURES BASED ON CAPABILITIES

book by Filament Grouphttp://filamentgroup.com/dwpe/

RENDER & INTERACTION STAGES

1. Verify destination

2. Provide primary content

3. Allow interaction

4. Show secondary content

5. Invisible tasks

Acknowledge action

1. Verify destination

2. …

VERIFY DESTINATION

➤ Core branding

➤ Maybe a breadcrumb

PROVIDE PRIMARY CONTENT

➤ Leaderboards, article text and photo, product images

ALLOW INTERACTION

➤ Call to action, video play button, carousel arrows

SHOW SECONDARY CONTENT

➤ Sidebars, secondary content

➤ Additional navigation

➤ User-generated content, sharing buttons, ads

INVISIBLE TASKS

➤ Below the fold content

➤ Analytics calls (“pixels”)

RENDER & INTERACTION STAGES

1. Verify destination

2. Provide primary content

3. Allow interaction

4. Show secondary content

5. Invisible tasks

Acknowledge action

1. Verify destination

2. …

ACKNOWLEDGE ACTION

➤ Disable submit button with “in progress” label,disable form elements

➤ Show transitional overlay (e.g. “Opening PayPal…”)

➤ Erase content area of the page

➤ No spinners!

INCREMENTAL MOCKUP 1

INCREMENTAL MOCKUP 2

INCREMENTAL MOCKUP 3

INCREMENTAL MOCKUP 4

INCREMENTAL MOCKUP 5

STAGES & TECHNICAL CONSTRAINTS

Stage

1. Verify destination

2. Provide primary content

3. Allow interaction

4. Show secondary content

5. Invisible tasks

Acknowledge action

Technology Constraints

1. Inline CSS & Logo, 14K

2. no JS, CSS, just HTML, image

3. Skeletal CSS, async JS

4. All CSS, above the fold images, fonts, AJAX-in content

5. The rest

Pre-transition feedback,fake transition

THROUGHOUT DESIGN & DEV PROCESS

➤ Wires (multiple)

➤ PSD / Sketch Mockups (multiple files)

➤ HTML Mockups (separate HTML files)

➤ Front-end implementation (query string params)?

➤ Full implementation (in dev / test / pre-prod)?

http://test.mysite.com/page.html?stage=1

http://test.mysite.com/page.html?stage=2

...

SPEED(ANTI-)

PATTERNSset best practices

ANTI-PROGRESS

Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797

FAST-PROGRESS

Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797

FAST-PROGRESS

Luke Wroblewski: Mobile Design Details: Avoid The Spinner: http://www.lukew.com/ff/entry.asp?1797

ANTI-CAROUSEL

FAST-CAROUSEL

just static image, HTML & CSS

FAST-CAROUSEL

fully loaded, JavaScript, click & touch / swipe

ANTI ADS

PUSHY ADS

EXPECTED ADS

EXPECTED ADS

SPEED PROCESS

➤ Identify design components

➤Set Constraints ➤Measure and

compare to baseline ➤Avoid Anti-Patterns,

define best practices

THANK YOU@SergeyChe | sergey.chernyshev@gmail.com