Designing speed with progressive enhancement @ NY Web Performance meetup
-
Upload
sergeychernyshev -
Category
Technology
-
view
567 -
download
4
Transcript of Designing speed with progressive enhancement @ NY Web Performance meetup
![Page 1: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/1.jpg)
DESIGNING SPEED WITH PROGRESSIVE ENHANCEMENT
Sergey Chernyshev | @SergeyChe
![Page 2: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/2.jpg)
SPEED MATTERS
to your users and to you
![Page 3: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/3.jpg)
SLOW MEANS LOWER CONVERSION
RUM data. Aaron Kulick, Cliff Crocker @ Wallmart Labs
![Page 4: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/4.jpg)
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)
![Page 5: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/5.jpg)
% OF DAILY BUDGET WHAT DOES MY SITE COST.COM
http://www.disney.com/
![Page 6: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/6.jpg)
DESIGNFOR SPEED
and progressive enhancement
![Page 7: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/7.jpg)
MOVIES OR PAINTINGS?
Speed vs. Fluency, What drives user engagement?
Kent Alstad, Velocity NY 2015
![Page 8: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/8.jpg)
PERFORMANCE CHOREOGRAPHERS
Performance Choreography
Tim Kadlec, WebPerfDays NY 2014
![Page 9: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/9.jpg)
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)
![Page 10: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/10.jpg)
FEATURES BASED ON CAPABILITIES
book byFilament Group filamentgroup.com/dwpe/
![Page 11: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/11.jpg)
REVEAL FEATURES
as page is being downloaded and constructed
![Page 12: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/12.jpg)
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
![Page 13: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/13.jpg)
VERIFY DESTINATION
➤ Core branding
➤ Maybe a breadcrumb
![Page 14: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/14.jpg)
PROVIDE PRIMARY CONTENT
➤ Leaderboards, article text & photo, product title & image
![Page 15: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/15.jpg)
ALLOW INTERACTION
➤ Main calls to action (CTA), Video play button, carousel arrows
![Page 16: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/16.jpg)
SHOW SECONDARY CONTENT
➤ Sidebars, secondary content
➤ Additional navigation
➤ User-generated content, sharing buttons, ads
![Page 17: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/17.jpg)
THE REST & INVISIBLE TASKS
➤ “The Rest”
➤ Invisible Tasks
➤ Subsequent Carousel slides
➤ Below the fold content
➤ Analytics calls and instrumentation code (“pixels”)
![Page 18: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/18.jpg)
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. …
![Page 19: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/19.jpg)
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!
![Page 20: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/20.jpg)
INCREMENTAL MOCKUP 1
![Page 21: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/21.jpg)
INCREMENTAL MOCKUP 2
![Page 22: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/22.jpg)
INCREMENTAL MOCKUP 3
![Page 23: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/23.jpg)
INCREMENTAL MOCKUP 4
![Page 24: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/24.jpg)
FULL MOCKUP
![Page 25: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/25.jpg)
PROGRESSIVE STORYBOARDS
Home Page
Action Verify Destination
Primary Content
Allow Interaction
Secondary Content
Rest & Invisible
0 1 2 3 4 5
![Page 26: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/26.jpg)
ACKNOWLEDGE ACTION MOCKUP
![Page 27: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/27.jpg)
ACKNOWLEDGE ACTION MOCKUP
SUSPECT’S LAWYER: IT’S NOT WHAT YOU THINK
![Page 28: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/28.jpg)
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
![Page 29: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/29.jpg)
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
![Page 30: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/30.jpg)
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
...
![Page 31: Designing speed with progressive enhancement @ NY Web Performance meetup](https://reader034.fdocuments.us/reader034/viewer/2022051709/587b72761a28abc62f8b5b81/html5/thumbnails/31.jpg)
SPEED PROCESS
➤ Identify design components
➤Set Constraints ➤Measure and
compare to baseline ➤Avoid Anti-Patterns,
define best practices