SlideShare a Scribd company logo
1 of 32
Download to read offline
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 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
➤ 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 by

Filament 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. …
Experience
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 Article
SUSPECT’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 primary

content
3. Allow interaction
4. Show secondary

content

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
UserExperienceFlow
Complexity
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
THANK YOU
@SergeyChe | sergey.chernyshev@gmail.com

More Related Content

More from SergeyChernyshev

More from SergeyChernyshev (20)

Tools of the trade 2014
Tools of the trade 2014Tools of the trade 2014
Tools of the trade 2014
 
What we can learn from CDNs about Web Development, Deployment, and Performance
What we can learn from CDNs about Web Development, Deployment, and PerformanceWhat we can learn from CDNs about Web Development, Deployment, and Performance
What we can learn from CDNs about Web Development, Deployment, and Performance
 
Scalability vs. Performance
Scalability vs. PerformanceScalability vs. Performance
Scalability vs. Performance
 
Web performance: beyond load testing
Web performance: beyond load testingWeb performance: beyond load testing
Web performance: beyond load testing
 
Introduction to web performance @ IEEE
Introduction to web performance @ IEEEIntroduction to web performance @ IEEE
Introduction to web performance @ IEEE
 
Introduction to Web Performance
Introduction to Web PerformanceIntroduction to Web Performance
Introduction to Web Performance
 
Performance anti patterns in ajax applications
Performance anti patterns in ajax applicationsPerformance anti patterns in ajax applications
Performance anti patterns in ajax applications
 
Taming 3rd party content
Taming 3rd party contentTaming 3rd party content
Taming 3rd party content
 
Velocity 2010 review
Velocity 2010 reviewVelocity 2010 review
Velocity 2010 review
 
Keeping track of your performance using Show Slow
Keeping track of your performance using Show SlowKeeping track of your performance using Show Slow
Keeping track of your performance using Show Slow
 
Keeping track of your performance using show slow
Keeping track of your performance using show slowKeeping track of your performance using show slow
Keeping track of your performance using show slow
 
In Search of Speed
In Search of SpeedIn Search of Speed
In Search of Speed
 
Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2
 
Php Code Profiling Using X Debug
Php Code Profiling Using X DebugPhp Code Profiling Using X Debug
Php Code Profiling Using X Debug
 
Why RDFa?
Why RDFa?Why RDFa?
Why RDFa?
 
Introduction to RDFa
Introduction to RDFaIntroduction to RDFa
Introduction to RDFa
 
Open Source Hardware: A Start...
Open Source Hardware: A Start...Open Source Hardware: A Start...
Open Source Hardware: A Start...
 
Open Source Hardware (adolescence)
Open Source Hardware (adolescence)Open Source Hardware (adolescence)
Open Source Hardware (adolescence)
 
Semantic Media Wiki & Semantic Forms
Semantic Media Wiki & Semantic FormsSemantic Media Wiki & Semantic Forms
Semantic Media Wiki & Semantic Forms
 
Behind the Scenes at LiveJournal: Scaling Storytime
Behind the Scenes at LiveJournal: Scaling StorytimeBehind the Scenes at LiveJournal: Scaling Storytime
Behind the Scenes at LiveJournal: Scaling Storytime
 

Recently uploaded

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
Wonjun Hwang
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 

Recently uploaded (20)

WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 

Designing speed with progressive enhancement @ NY Web Performance meetup