Designing speed with progressive enhancement
-
Upload
sergeychernyshev -
Category
Technology
-
view
304 -
download
1
Transcript of 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 | [email protected]