Optimizing for a faster user experience Pt 2: How-to.

James Christie
James ChristieSenior User Experience Designer at MadPow
Optimizing the User Experience
Pt 2: remedies
James Christie @jc_ux
Mad*Pow
“I Feel the Need…
…The Need for Speed”
Originally presented at UXPA Boston 2014.
Edited for SlideShare: bye-bye animations.
!
Part 1 (Why Speed Matters) coming soon.
!
References, links: goo.gl/w0xp1P
RESEARCH - how fast are we?
STRATEGY - how fast should we be?
TECHNOLOGY - what do we need to invest in?
IA and IxD - planning fast pages
VISUAL DESIGN - making front-end savings
SPEED STACK
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN
VISUAL DESIGN
Optimizing for a faster user experience Pt 2: How-to.
Time To Appear: you can see something
Time To Interact: you can click something
Page Loaded: everything loaded
DEFINITION OF TERMS
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
0 - 3s 3.5s 7s
Walk a mile in your user’s shoes
Someone in…
Boston
Dulles
Juno
15+ US places
Montevideo
Monte Carlo
Sofia
Osaka
Beirut
Mombassa
(dozens more)
Using a…
PC with IE8
PC with IE6
PC with Chrome
Android Tablet
Old iPhone
New iPhone
(many more)
Connecting by…
56k modem
Good 3G
Bad 3G
EDGE
DSL
ISDN
Fast Cable
etc.
Someone in…
Boston
Dulles
Juno
15+ US places
Montevideo
Monte Carlo
Sofia
Osaka
Beirut
Mombassa
(dozens more)
Using a…
PC with IE8
PC with IE6
PC with Chrome
Android Tablet
Old iPhone
New iPhone
(many more)
Connecting by…
56k modem
Good 3G
Bad 3G
EDGE
DSL
ISDN
Fast Cable
etc.
Dulles + 3g + Tablet = 70s
4.5s — menu appears 8s — page complete
Enterprise grade:
Real User Monitoring
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Average site load times
Specific load times for different
personas/markets
List of things slowing us down.
RESEARCH UPSHOT
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN
VISUAL DESIGN
Bring performance out
into the open
Sell the benefits
Get them hooked on Speed
Make performance cultural
- use design principles
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Set a goal:
“<Our website> should load
in under 3 seconds”.
Explain the benefit
Organizational buy-in
Set goals
A culture of improvement
STRATEGY UPSHOT
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN
VISUAL DESIGN
DEVICE LAB
<needs a new photo which I probably won’t get round to in time, so
just picture a big pile of old and new smartphones, tablets, Apple Newtons,
Blackberries, Internet Fridges, iTVs, smart watches etc>
Remove Duplicate Scripts
Configure ETags
Make AJAX Cacheable
Use GET for AJAX Requests
Reduce the Number of DOM Elements
No 404s
Reduce Cookie Size
Use Cookie-Free Domains for
Components
Avoid Filters
Do Not Scale Images in HTML
Make favicon.ico Small and Cacheable
Minimize HTTP Requests
Use a Content Delivery Network
Avoid empty src or href
Add an Expires or a Cache-Control
Header
Gzip Components
Put StyleSheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript and CSS
Avoid Redirects
23 “basic” optimizations
Optimizing for a faster user experience Pt 2: How-to.
The responsive image problem
OPTIMIZE IMAGES FOR MOBILE
“We’re missing out on 72% image
savings for mobile.”
Tim Kadlec
Go read: http://timkadlec.com/2013/06/why-we-need-responsive-images/
“What is the cost of your non-responsive images?”
>4s load
50% images
Optimizing for a faster user experience Pt 2: How-to.
Outsource it.
Speed-as-a-Service
Content Delivery Network
Script minification
Image optimisation
Accelerates modern and legacy browsers – creates
different HTML for each
FRONT-END ACCELERATION
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE (& CS)
INTERACTION DESIGN
VISUAL DESIGN
1 video = 20 hi-res images
1 photo = 50,000 words
50,000 words = 3 SVG animations
CONTENT TRADE-OFFS
Home
2s
Product info
2s
Details video
8s
Ad landing
1.5s
Product info
2s
Which pages can be slow?
Set a time budget that suits needs of
audience (3s is nice, 2s is better)
(More mobile? Smaller pages.)
Guesstimate a target file size (~700kB)
Trade features and content against the
budget until it fits
PAGE BUDGETS
1.2MB images
100kB JavaScript
400kB share buttons
200kB web fonts
50kB HTML & CSS
Size = 1,950kB
Total requests = 121
WIREFRAMES
100kb of images
10kB Script
0kB from share buttons
50kB web fonts
50kB HTML + CSS
Size = 200kB
Total requests = 20
AFTER
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN: CHALLENGE TRENDS
VISUAL DESIGN
“Don’t let 3rd parties get
you down” - Google, at
Velocity 2010
Found an ~15% latency
impact
(Sleazy impact: 1,000%)
3RD PARTY CONTENT
BIG FAT PHOTO
~400kB
3 more photos
…that no one will ever see
Optimizing for a faster user experience Pt 2: How-to.
Optimizing for a faster user experience Pt 2: How-to.
Facebook & Twitter & G+
& Disqus =
400kB in images & scripts
SHARE BUTTONS
SIMPLE BUTTON CURE
Maps: 400kB in images and
scripts
Stop putting them in footers
Load them conditionally
MAPS
Just, no.
AUTOPLAY VIDEO
FOOL THE EYE
Optimizing for a faster user experience Pt 2: How-to.
RESEARCH
STRATEGY
TECHNOLOGY
INFORMATION ARCHITECTURE
INTERACTION DESIGN: CHALLENGE TRENDS
VISUAL DESIGN
“Save for web” is broken
Use a 3rd party (Kraken.io)
Experiment: point it at a
homepage carousel.
OPTIMIZE PROPERLY
1.7MB, 5s load
1.7MB (5s load) 900kB (2s load?)
Combine the small fry
Replace lots of icons with
one png or gif
Reduces objects and file
size
Make your own:
csssprites.com
CSS SPRITES
One file (and js) replacing
all your site icons
Off the shelf: Icomoon,
Pictos, Font Awesome…
Not super-well supported -
test!
ICON FONTS
RADICAL CHANGE
Mono is smaller
Example:
130kB to 70kB
Mono doesn’t mean B&W
MONO!
wow
@garrettc’s cat
Big illustration: 75kB
!


Big photo: 350kB
ILLUSTRATION
Old iPhone: 163ppi
iPhone 5 Retina: 326ppi
Samsung: 560ppi now, 880ppi in 2015.
Each demanding higher-res pictures.
MARCH OF THE SCREENS
Optimizing for a faster user experience Pt 2: How-to.
Scales to any size, stays same small size
Crisp on every screen
Versatile
Programmable
Safe to use (IE needs fallbacks)
VECTOR FTW
21 kB
600x300px
270 kB
600x300px
21 kB
1400x700
1.8 MB
1400x700
Standard resolution
Retina resolution
DesignModo Flat UI
Optimizing for a faster user experience Pt 2: How-to.
JUST GO SEE THIS
http://goo.gl/RtvsUQ
WHAT DOES THE FAST WEB LOOK LIKE?
Photos
Photo Gradients
Complex
Many objects to load
3rd party dependencies
SLOW
Illustrations, Vectors
CSS gradients
Simple, flat
In-line, few objects
FAST
GET INSPIRED!
154kB page
<1s load
22 objects
(average:+100)
Photos: 10kB
Selective blur
Web font:
22kB
SVG logo SVG
background
Flat structure
100kB page
50kB less
536kB page
1.6s load
36 objects
Take away Google
Analytics:6kB
19kB
~150ms load
GO FORTH AND SAVE!
90 pages / day
x 1 second / page
x 65 years
= 25 days
Loading…
Save 1s / page
50 pages / day
33m hours / day
2.4 billion users
506m days / year
121 Wikipedias x 121
Save 1s / page
50 pages / day
33m hours / day
506m days / year
1 Apollo Program
x 1
“Lost time is never found again.”
!
Benjamin Franklin
BIG THANK YOU
Twitter: @jc_ux
Email: jchristie@madpow.com
http://goo.gl/w0xp1P
(That’s a zero)
1 of 92

More Related Content

What's hot(19)

Web OptimisationWeb Optimisation
Web Optimisation
Gregory Benner1.8K views
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver9.5K views
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
Maximiliano Firtman853 views
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and Performance
Maximiliano Firtman887 views
Beyond Responsive [18F 2015]Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
Aaron Gustafson5.2K views
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
Jason Grigsby2.1K views
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
Christian Crumlish12.8K views
Responsive Web DesignResponsive Web Design
Responsive Web Design
Debra Shapiro528 views
Faster web pagesFaster web pages
Faster web pages
David Rodenas546 views
Is the Past. Is the Future. Is the Browser.Is the Past. Is the Future. Is the Browser.
Is the Past. Is the Future. Is the Browser.
Andre JAY Meissner4.2K views
Cinematic Interactives with Animate CCCinematic Interactives with Animate CC
Cinematic Interactives with Animate CC
Joseph Labrecque367 views
Explaining AjaxExplaining Ajax
Explaining Ajax
Web Directions766 views

Viewers also liked(20)

HxRefactored - Mad*Pow - Magga Dora HxRefactored - Mad*Pow - Magga Dora
HxRefactored - Mad*Pow - Magga Dora
HxRefactored654 views
Traveling UX Adventures (UXPA)Traveling UX Adventures (UXPA)
Traveling UX Adventures (UXPA)
Marli Mesibov546 views
Mad Pow Workshop Vf CopyMad Pow Workshop Vf Copy
Mad Pow Workshop Vf Copy
jmaclaren378 views
Structured data mp may 2012Structured data mp may 2012
Structured data mp may 2012
Paul Kahn1.2K views
Experience Research Best PracticesExperience Research Best Practices
Experience Research Best Practices
Dan Berlin1.8K views

Similar to Optimizing for a faster user experience Pt 2: How-to.

Developing For The WebDeveloping For The Web
Developing For The Webaleemb
412 views19 slides
Coding UiCoding Ui
Coding Uirajivmordani
692 views72 slides
Coding the UICoding the UI
Coding the UIMark Meeker
556 views72 slides
The Need For SpeedThe Need For Speed
The Need For SpeedAndy Davies
2.5K views30 slides

Recently uploaded(20)

Task 3 copy.pptxTask 3 copy.pptx
Task 3 copy.pptx
ZaraCooper216 views
UX Camp Nov 2023_upload.pptxUX Camp Nov 2023_upload.pptx
UX Camp Nov 2023_upload.pptx
Amir Ansari49 views
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa16 views
SS25 Fashion Key Items trend bookSS25 Fashion Key Items trend book
SS25 Fashion Key Items trend book
Peclers Paris80 views
Nomor Meja RUANG-4.docNomor Meja RUANG-4.doc
Nomor Meja RUANG-4.doc
ssuserc40b916 views
3 Dark Design Templates3 Dark Design Templates
3 Dark Design Templates
Pixeldarts14 views
Anti -Parkinsonian Drugs-Medicinal ChemistryAnti -Parkinsonian Drugs-Medicinal Chemistry
Anti -Parkinsonian Drugs-Medicinal Chemistry
NarminHamaaminHussen9 views
Task 3.pptxTask 3.pptx
Task 3.pptx
ZaraCooper217 views
Design System.pdfDesign System.pdf
Design System.pdf
Atiqur Rahaman10 views
Anthelmintic Drugs-Medicinal ChemistryAnthelmintic Drugs-Medicinal Chemistry
Anthelmintic Drugs-Medicinal Chemistry
NarminHamaaminHussen5 views
Here_Process bookHere_Process book
Here_Process book
nykimstudio15 views
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
Atiqur Rahaman258 views
evidence .pptxevidence .pptx
evidence .pptx
npgkddpbpd9 views
Benzodiazepines--Medicinal ChemistryBenzodiazepines--Medicinal Chemistry
Benzodiazepines--Medicinal Chemistry
NarminHamaaminHussen6 views
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media12 views
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear Factory
Doing Footwear8 views
Viking passive.pdfViking passive.pdf
Viking passive.pdf
Matis Velt15 views
Big Deal Curmel Moton ShirtBig Deal Curmel Moton Shirt
Big Deal Curmel Moton Shirt
brandshop18 views

Optimizing for a faster user experience Pt 2: How-to.