1.
DESIGNING SPEED WITH
PROGRESSIVE ENHANCEMENT
Sergey Chernyshev | @SergeyChe
WebPerf Camp, 2016

2.
Sloooowly

3.
SPEED
MATTERS
to your users and to you

4.
SLOW MEANS LOWER CONVERSION
RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs

5.
CONVERTED USERS HAVE FASTER EXPERIENCE
RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs

6.
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/

7.
WHAT DOES MY SITE COST? (WHATDOESMYSITECOST.COM)
http://www.disney.com/

8.
% OF DAILY BUDGET (WHATDOESMYSITECOST.COM)
http://www.disney.com/

9.
DESIGN
FOR SPEED
and progressive enhancement

10.
MOVIES OR PAINTINGS?
Speed vs. Fluency, What drives user engagement?
Kent Alstad, Velocity NY 2015

11.
PERFORMANCE CHOREOGRAPHERS
Performance Choreography
Tim Kadlec, WebPerfDays NY 2014

12.
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)

13.
FEATURES BASED ON CAPABILITIES
book by Filament Group
http://filamentgroup.com/dwpe/

14.
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. …

15.
VERIFY DESTINATION
➤ Core branding
➤ Maybe a breadcrumb

16.
PROVIDE PRIMARY CONTENT
➤ Leaderboards, article text and photo, product images

17.
ALLOW INTERACTION
➤ Call to action, video play button, carousel arrows

18.
SHOW SECONDARY CONTENT
➤ Sidebars, secondary content
➤ Additional navigation
➤ User-generated content, sharing buttons, ads

19.
INVISIBLE TASKS
➤ Below the fold content
➤ Analytics calls (“pixels”)

20.
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. …

21.
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!

22.
INCREMENTAL MOCKUP 1

23.
INCREMENTAL MOCKUP 2

24.
INCREMENTAL MOCKUP 3

25.
INCREMENTAL MOCKUP 4

26.
INCREMENTAL MOCKUP 5

27.
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

28.
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
...

29.
SPEED
(ANTI-)
PATTERNS
set best practices

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

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

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

33.
ANTI-CAROUSEL

34.
FAST-CAROUSEL
just static image, HTML & CSS

35.
FAST-CAROUSEL
fully loaded, JavaScript, click & touch / swipe

36.
ANTI ADS

37.
PUSHY ADS

38.
EXPECTED ADS

39.
EXPECTED ADS

40.
SPEED PROCESS
➤Identify design
components
➤Set Constraints
➤Measure and
compare to baseline
➤Avoid Anti-Patterns,
define best practices

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