The web is slow and bloated. The average web page is over 1.4MB and takes over 2 seconds to load, which is frustrating for users. See how speed impacts user perception of your site and key performance indicatiors (like satisfaction, bounce rate and conversion). Then learn how to design lighter speedier sites that delight users with their excellent performance. This presentation is crammed with practical tips for the interaction designer and site planner, as well as visual design techniques that will help you trim your flabby lumbering site down to a svelte nimble ninja.

1. Design, optimized: a UX guide
Improve Performance for User Satisfaction, Profit and Sustainability
photo by likeaduck http://www.flickr.com/photos/thartz00/sets/72157624465684865/
Tuesday, July 2, 13

2. Me: James Christie @jc_ux
Portsmouth | Boston | Louisville
www.madpow.com
Twitter: @madpow
Web developer > usability > UX Designer
UX Honeycomb: http://semanticstudios.com/publications/semantics/000029.php
Tuesday, July 2, 13

3. The Web Is Slow
http://www.flickr.com/photos/nuskyn/
Tuesday, July 2, 13

4. Is the web slow?Yup.
• Users expect <2s page load
• Web performance is second
only to security in user
expectations (Forrester)
2011 5.94s
2012 7.25s
2013 ~9s
http://seekingalpha.com/article/1120151-reviewing-the-mobile-revenue-of-major-internet-companies
http://gravitydept.com/blog/responsive-ecommerce/
Alexa Retail 2000 index of
median load time
Tuesday, July 2, 13

5. 1. User Perception
http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
<0.1 sec Instant
1 sec Flow
4-5 sec Impatience
8-10 Sec Intolerable
Load time Perception
Slow: “Not credible”
Fast: less frustration, lower
blood pressure, deeper flow
states, higher conversion
rates, lower bailout rates, site
interestingness and
attractiveness
Fogg, B. J., et al., "What Makes Web Sites Credible? A Report on a Large Quantitative Study"
Tuesday, July 2, 13

6. 2. KPIs: slow bad, fast good
• Bing: 2s load delay = 4.3% less revenue/user
• Google: 400ms delay = 0.59% fewer searches
• Yahoo! 400ms slowdown = 5 to 9% less traffic
http://velocityconf.com/velocity2009/public/schedule/detail/8523
• Shopzilla: 5s faster = +12% conversions
• Mozilla: 2.2s faster = +15.4% conversions
(60 million more Firefox downloads)
Tuesday, July 2, 13

7. 3. Mobile
• 55% use mobile internet regularly
• “Mobile Mostly”: 31%
• 71% mobile users encounter slow speeds
• 3G, 4G and EDGE
• Cost of data: ~$10 for 100MB
• Rule of thumb: pages at least x2 slower than
desktop
http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
Tuesday, July 2, 13

8. 4. Inclusion
• People on mobile-only internet are more
likely to be...
• Young (18-25)
• Earn less than $30k
• People in overseas markets with poor
internet infrastructure
Tuesday, July 2, 13

9. “...entire populations of people simply could not use
YouTube because it took too long to see anything”
“By keeping your client side code small and lightweight,
you can literally open your product up to new
markets”
Regular page: 1.2MB
Feather: 250kB
http://blog.chriszacharias.com/page-weight-matters
Tuesday, July 2, 13

10. 5. SEO
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
• Impact:
• Some claiming 20-40% improvement in
rankings after optimizing
http://www.strangeloopnetworks.com/blog/13-questions-and-answers-about-google-site-speed-and-seo/
Tuesday, July 2, 13

11. 6. Sustainability
• Serving web pages takes energy
• Internet carbon footprint today: 620 Million Tons /
year. x2 in 2020
http://keelingcurve.ucsd.edu/ http://goo.gl/nK0h1http://www.greentouch.org/
0
500
1000
1500
2000
web ‘13 Aviation web ‘20 Russia
CO2 Million tons / yr
http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions http://www.atag.org/facts-and-figures.html
Tuesday, July 2, 13

12. What’s slowing us down?
(and what can we do?)
Tuesday, July 2, 13

13. Frontend / Backend
• “80-90% of the end-user response time is spent
on the frontend. Start there.” Steve Souders
stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
0 25 50 75 100
backend frontend
Page load delay average across top 50,000 websites
Delay here
Tuesday, July 2, 13

14. Size of pages
http://www.websiteoptimization.com/speed/tweak/average-web-page/
Tuesday, July 2, 13

15. Current page size
•1446kB!
• That’s a floppy
• >2 minutes on 56.6 kbps
modem
• 10s on 1mbps cable
• USA Average: 7.4mbps
• (5% still on dial-up) http://httparchive.org/interesting.php
http://www.techspot.com/news/52338-average-broadband-speed-in-the-us-up-28-south-korea-still-far-ahead.html
http://www.pewinternet.org/Reports/2010/Home-Broadband-2010.aspx
Tuesday, July 2, 13

16. Frontend bulk
0
375
750
1125
1500
Page weight in KB
HTML CSS
JS Images
Fonts Other Figures: http://httparchive.org/trends.php
Most optimization talks
are about the JavaScript
Tuesday, July 2, 13

17. Frontend bulk
0
375
750
1125
1500
Page weight in KB
Figures: http://httparchive.org/trends.php
My tips are about the
images, fonts and “other
stuff” too.
Tuesday, July 2, 13

18. More friction: object count
Anatomy of an HTTP request
Tuesday, July 2, 13

19. Do-it-yourself
benchmarking
• Plenty of online services and tools
• ySlow, Google PageSpeed
• Most browsers have their own inspector
• We’ll use Google Chrome
Tuesday, July 2, 13

20. Google PageSpeed
Tuesday, July 2, 13

21. Tuesday, July 2, 13

22. 2.3MB
556 HTTP requests
11 seconds to load
8843 pixels high
Tuesday, July 2, 13

23. The whole page
Example inspired by Brad Frost’s “Death to BS”
https://www.youtube.com/watch?v=ABd6U17YAdo
Tuesday, July 2, 13

24. Just the content
(in blue)
Example inspired by Brad Frost’s “Death to BS”
https://www.youtube.com/watch?v=ABd6U17YAdo
Tuesday, July 2, 13

25. Ads
Navigation
Social sharing
Comments
Ads
x-site content
More Ads
....
Example inspired by Brad Frost’s “Death to BS”
https://www.youtube.com/watch?v=ABd6U17YAdo
Tuesday, July 2, 13

26. Example inspired by Brad Frost’s “Death to BS”
https://www.youtube.com/watch?v=ABd6U17YAdo
0
750
1500
2250
3000
Page weight in KB
HTML CSS
JS Images
Fonts Other
Images: 1MB
Scripts: 1MB
Article: 41kB
Tuesday, July 2, 13

27. Speed things up
• Speed up pages by...
• having fewer objects
• less data transfer
• lots of technical tweaks
• Time to reconsider:
• UX design
• Visual design
• Code planning
Tuesday, July 2, 13

28. Dan Saffer’s Disciplines of UX:
http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/
UX design
Tuesday, July 2, 13

29. Prime offender: carousels
Tuesday, July 2, 13

30. http://www.wm.edu/
Tuesday, July 2, 13

31. Reduced carousels
• Vectorize
• Load on demand
• Optimize
http://www.unitedutilities.com/default.aspx645px wide, only 60kB
http://www.starbucks.com/
Tuesday, July 2, 13

32. Ditch them altogether
http://www.nngroup.com/articles/auto-forwarding/
Tuesday, July 2, 13

33. Brad Frost carousel challenge
http://bradfrostweb.com/blog/post/carousels/
•Add tracking to your carousel
•Collect data
•Analysis (and publish)
•A/B test
University ofYork: removed panels, increased
engagement
http://yorkwebteam.blogspot.co.uk/2013/03/are-homepage-carousels-effective-aka.html
Tuesday, July 2, 13

34. Ads
• Less ads would be nice...
• Better to have a few big ads than
lots of little ones
• “In marketing we measure
impressions - not page speed.We
don’t take the harm of the slow-down
into account”
Tuesday, July 2, 13

35. Share Buttons
Typical payload:
400kB in images &
scripts
http://jcux.co.uk/cleanux/buttons.html
Tuesday, July 2, 13

36. Share button script overhead
Tuesday, July 2, 13

37. Button cure: kill, link, or lazyload
“ What we know for sure is that these magic buttons promote
their own brands — and that they tend to make you look a
little desperate.”
Sweep the Sleaze, Oliver Reichenstein, ia.net
http://ia.net/blog/sweep-the-sleaze/ http://alistapart.com/article/designing-for-breakpoints
Pure links:
Kill:
Lazy Load:
http://wp.tutsplus.com/tutorials/add-lazy-loading-social-sharing-buttons-to-your-wordpress-blog/
Tuesday, July 2, 13

38. 3rd party content
http://velocityconf.com/velocity2010/public/schedule/detail/15412
• “Don’t let 3rd parties get you down” - Google, at
Velocity 2010
• Found an ~15% latency impact
• (Sleazy impact: 1,000%)
Tuesday, July 2, 13

39. The savings don’t stop
• Maps: 400kB in images and
scripts
• Autoplay videos: many MB
instantly
• Animation JS: if poorly managed
Tuesday, July 2, 13

40. Visual Design Savings
Flickr mattdoucette http://bit.ly/14uFtEq
Tuesday, July 2, 13

41. Image triage
• Simply, have fewer images.
• Optimize more
• Smush.it (free)
• jpg or png?
0
375
750
1125
1500
Page weight in KB
Tuesday, July 2, 13

42. Rethink photos
http://www.alistapart.com/articles/the-web-aesthetic
@garrettc’s cat
Tuesday, July 2, 13

43. Responsive Images
We’re missing out on 72%
image savings for mobile.
Go read: http://timkadlec.com/2013/06/why-we-need-
responsive-images/
Tuesday, July 2, 13

44. Image replacement: Icon Fonts
http://www.heydonworks.com/article/using-icon-web-fonts http://glyphicons.com/
• Replace your icon gifs with
one font file.
• Free, paid, and roll-your-own
options
Tuesday, July 2, 13

45. Future: pure CSS icons
http://nicolasgallagher.com/pure-css-gui-icons/demo/
Tuesday, July 2, 13

46. Image organization: Icon Sprites
• Combine lots of small icons into one file
• Big saving on HTTP requests
• Free services like http://spriteme.org/
Tuesday, July 2, 13

47. Vectors
• SVG now production-ready
(mostly)
• Files scale to any size
• This guy is 20kB
Tuesday, July 2, 13

48. Tame web fonts
✤20 to 100kB
✤Lots of HTTP requests
Tuesday, July 2, 13

49. Code Savings
Tuesday, July 2, 13

50. Code savings
• Too many to mention here:
• Minifiy Scripts.
• Compress downloads.
• Set Expire headers in .htaccess.
• Use .gzip compression.
• Server side concatenation of scripts.
• Fix the script load order (put JS at the bottom).
• Use asynchronous JS loading.
• Use DNS pre-fetch.
• Use cookie-less domains for static assets.
• Use two domains for static assets (take advantage of parallel download).
• Use conditional loading - only load scripts/images when needed.
Tuesday, July 2, 13

51. CDN
http://www.wpbeginner.com/beginners-guide/why-you-need-a-cdn-for-your-wordpress-blog-infographic/?display=wide
Tuesday, July 2, 13

52. Site planning
http://www.jjg.net/elements/
Tuesday, July 2, 13

53. Page budgets
• Set a budget in kB that suits needs of audience
• (More mobile? Smaller pages.)
• Trade features and content against the budget
http://clearleft.com/thinks/responsivedesignonabudget/
Tuesday, July 2, 13

54. Site budgets
• Extend the idea to a whole site
• How much data, and how much time loading
the site, for each user?
• Manage the delays
Tuesday, July 2, 13

55. Wireframes
Tuesday, July 2, 13

56. • 790kB in image
saving
• 100kB in script
• 400kB in Share
Buttons
Tuesday, July 2, 13

57. Warm fuzzies
Metric Before After Saving
All users/
year
Home
Loading
time/visit
4s 2s 2s 555 hours
Total visit
loading time
30s 16s 14s 162 days
Data/visit 10MB 3MB 7MB 6,873 GB
Tuesday, July 2, 13

58. Cold Hard ROI*
Metric Before After Difference
Conversion 5% 10% +5%
Time-on site 1:13 1:55 +42s
Bounce-rate 20% 15% -5%
Mobile bounce 50% 20% -30%
Hosting cost $50,000 $40,000 -$10,000
ecomm revenue $100k $300k +$200k
*complete fabrication
Tuesday, July 2, 13

59. Inspirational examples
• Zappos: 1.2MB, 985ms
• Mailchimp.com: 876kB, 2 seconds
• 2013.dconstruct.org: 142kB, 925ms
• “How low can you go?” approach
• “This is a web page”: 13kB, 377ms
http://justinjackson.ca/words.html
Tuesday, July 2, 13

60. “Things should be as simple as possible,
but no simpler.”
Tuesday, July 2, 13

61. Summary
• Images and scripts are where the main savings
can be made
• Think in terms of data footprint and object
count
• Set a budget per page or per user visit
• Work with clients and users to find what
content can be reduced or retired
• Challenge orthodoxy! (cough carousels cough)
Tuesday, July 2, 13

62. Questions?
Comments?
Tuesday, July 2, 13

63. Thank you!
• Thank you for your time!
• I love feedback:
• Twitter: @jc_ux
• Email: jchristie@madpow.com
• Big thanks to Mad*Pow for hosting!
Tuesday, July 2, 13

64. Follow @madpow for more events and insights
Tuesday, July 2, 13