designing speed with progressive enhancement @ ny web performance meetup
TRANSCRIPT
DESIGNING SPEED WITH PROGRESSIVE ENHANCEMENT
Sergey Chernyshev | @SergeyChe
SPEED MATTERS
to your users and to you
SLOW MEANS LOWER CONVERSION
RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs
WPOSTATS.COM
➤ DoubleClick: 5s vs. 19s => up to 2x revenue on mobile (2016)
➤ Trainline: -0.3s => +$11.5M / year revenue (2016)
➤ Etsy: +160Kb => +12% bounce rate (2014)
➤ DoubleClick: -1 redirect => +12% CTR (2011)
➤ Edmunds: -77% load time => +20% page views (2011)
➤ Mozilla: -2.2s => +15.4% Downloads (2010)
➤ Google: +400ms => -0.21% searches after experiment! (2009)
➤ Shopzilla: -5s => +12% Conversion rate (2009)
➤ Amazon: +100ms => -1% revenue (2008)
➤ Google: +500ms => -25% searches (2006)
% OF DAILY BUDGET WHAT DOES MY SITE COST.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➤ 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 constructed(render basic html + CSS, add JS handlers, fonts, etc)
FEATURES BASED ON CAPABILITIES
book byFilament Group filamentgroup.com/dwpe/
REVEAL FEATURES
as page is being downloaded and constructed
RENDER & INTERACTION STAGES
1. Verify destination
2. Provide primary content
3. Allow interaction
4. Show secondary content
5. The rest & invisible tasks
Acknowledge action
1. Verify destination
2. …
Expe
rien
ce
VERIFY DESTINATION
➤ Core branding
➤ Maybe a breadcrumb
PROVIDE PRIMARY CONTENT
➤ Leaderboards, article text & photo, product title & image
ALLOW INTERACTION
➤ Main calls to action (CTA), Video play button, carousel arrows
SHOW SECONDARY CONTENT
➤ Sidebars, secondary content
➤ Additional navigation
➤ User-generated content, sharing buttons, ads
THE REST & INVISIBLE TASKS
➤ “The Rest”
➤ Invisible Tasks
➤ Subsequent Carousel slides
➤ Below the fold content
➤ Analytics calls and instrumentation code (“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. “Connecting to PayPal…”)
➤ Erase content area of the page
➤ No spinners!
INCREMENTAL MOCKUP 1
INCREMENTAL MOCKUP 2
INCREMENTAL MOCKUP 3
INCREMENTAL MOCKUP 4
FULL MOCKUP
PROGRESSIVE STORYBOARDS
Home Page
Action Verify Destination
Primary Content
Allow Interaction
Secondary Content
Rest & Invisible
0 1 2 3 4 5
ACKNOWLEDGE ACTION MOCKUP
ACKNOWLEDGE ACTION MOCKUP
SUSPECT’S LAWYER: IT’S NOT WHAT YOU THINK
PROGRESSIVE STORYBOARDS
Main ArticleSUSPECT’S LAWYER: IT’S NOT WHAT YOU THINK SUSPECT’S LAWYER: IT’S NOT WHAT YOU THINK
Acknowledge Action
Verify Destination
Primary Content
0 1 2
200ms 300ms
STAGES & TECHNICAL CONSTRAINTS
Stage
1. Verify destination
2. Provide primarycontent
3. Allow interaction
4. Show secondarycontent
5. The rest + invisible tasks
Acknowledge action
Technology Constraints
1. Inline CSS & Logo, 14K
2. no JS, CSS, just HTML,1/2 images
3. Skeletal CSS, async JS
4. All CSS, above the fold images, fonts, AJAX-in content
5. The rest
Pre-transition feedback,fake transition
Use
r Ex
peri
ence
Flo
w
Com
plex
ity
THROUGHOUT DESIGN & DEV PROCESS
➤ Wires (multiple files)
➤ PSD / SketchApp Progressive Storyboard
➤ 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 PROCESS
➤ Identify design components
➤Set Constraints ➤Measure and
compare to baseline ➤Avoid Anti-Patterns,
define best practices
