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/

DESIGN
FOR 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 Group
http://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-)
PATTERNS
set 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