1. From Slow To Fast: Improving Performance On Intuit Web Sites By Up To 5x Velocity NY Oct 16, 2013

2. Our Story 1 year. 50 pages. 6 sites. 2 seconds. Agenda: History + Buy-in Phase 1: 15s to 6s Phase 2: 6s to 2s Business Impact Takeaways

3. Who we are Jay Hung / @jayhung Chief Architect, WebMocha LLC -Ex-Yahoo engineer -16+ yrs in consumer web + digital media -Performance consultant; frontend optimization since 2006 Norberth Danson Staff Software Engineer, Intuit Inc. -Full stack engineer -9+ yrs web development -Member of Intuit core performance team

4. The early days… Image source: Internet Archive (edited)

5. Image source: Eliot Phillips (aka RobotSkirts) via Flickr Built when this was top of the line…

6. Dated Technology Before Web Standards

7. Over the years… 1996-1999 www.intuit.com quickbooks.intuit.com quickbooksonline.intuit.com payroll.intuit.com payments.intuit.com websites.intuit.com and more… 2012 Refactors Includes New Code Copy & Pastes Many Devs

8. …it became this: Image source: Jesse Hernandez Photography + Image source: vibrant.com

9. …it also became this: Image source: Jesse Hernandez + Image source: vibrant.com SLOW! 15s pageload Source: httparchive.org, Feb 2012

10. Negatively affecting: Users’ Experience SEO Pageviews Conversions (sign-ups!)

11. Image source: Alex E. Proimos via Flickr Downright embarrassing!

12. Engineering presented a case: cited experts like Steve Souders research/examples from Google / Bing / Yahoo blog posts on performance lifting conversions But people didn’t get it. Couldn’t get buy-in. Image source: DJ Octoon

13. Engineering presented a case: cited experts like Steve Souders research/examples from Google / Bing / Yahoo blog posts on performance lifting conversions But people didn’t get it. Couldn’t get buy-in. Image source: DJ Octoon Too busy. No time. No resources.

14. people Then one experiment changed everything.

15. people A/B test showed a faster page increased conversion, improved SEO & lifted organic traffic.

16. people Conversation went from “not interested” to “how soon can we make all of our pages faster?” Image source: onlinemarketingwithvince.com

17. people 80-90% of the end- user response time is spent on the frontend. Start there. Steve Souders - Performance Golden Rule

18. Image source: selfmadefitness.com But before we could start, we needed:

19. Common Ground Pageload times are frontend (client-side) only Common tool (webpagetest.org) DSL connection speed Doc Complete load time Average from 9 iterations Image source: selfmadefitness.com

20. people Reduce page load times for top 50 pages of 6 marketing sites by ~50% Our Mission

21. people Phase 1: 12-15 seconds 6 seconds

22. people Image credit: Gregory Mancuso Original Rules of High Performance

23. 1.Minimize HTTP requests 2.Use CDN 3.Add expires header 4.Gzip components 5.Put stylesheets at top 6.Put scripts at bottom 7.Avoid CSS expressions 8.Make JS & CSS external 9.Reduce DNS lookups 10.Minify JS & CSS 11.Avoid redirects 12.Remove duplicate scripts 13.Configure Etags 14.Make Ajax cacheable Bonus 1: Compress images Lazyload images Removed custom fonts Bonus 2: Cookie-less domains Reduce beacons Optimize JS/DOM

24. A Typical Page Total Bytes: 1.5M-2M+ Images: 50-70+ (1.2M) External CSS/JS: 30-40+ JavaScript: 400k+ 30x Redirects: 20+ HTTP Requests: 120+

25. General Problem: – Each http request has overhead Connection setup/teardown DNS lookup times Performance Rule #1 Minimize HTTP requests Our Problem: – Excessive CSS files (10+) – Excessive JS files (30+) – Excessive images (50-70+) – Excessive beacons (20+)

26. NOT SO EASY! – Many shared files & embedded snippets – Numerous copy-n-paste variations – document.write() statements around every corner – Expensive DOM traversals – Non-contained CSS – Global JS vars & functions everywhere Merge + Minify CSS/JS Bleeding and collisions galore!

27. HOW SOLVED Cleaned & refactored all CSS/JS Optimized handful of JS DOM Traversals Created global-global mergeset (shared across all sites) Created site-global mergesets (shared across all pages of same-site) A BIG WIN, BUT WITH SOME COST CSS + JS containment extremely tedious 2 uber mergesets == lots of unused code on most pages Other pages aside from our top-50 included these CSS/JS files Other sites (outside of our 6 sites) also included these CSS/JS files – all hell broke loose Seems every commit, more things broke Took FAR longer than expected, but we got it done. Merge + Minify CSS/JS

28. HOW SOLVED Cleaned & refactored all CSS/JS Optimized JS DOM Traversals Created global-global mergeset (shared across all sites) Created site-global mergesets (shared across all pages of same-site) A BIG WIN, BUT WITH SOME COST CSS + JS containment extremely tedious 2 uber mergesets == lots of unused code on most pages Other pages aside from our top-50 included these CSS/JS files Other sites (outside of our 6 sites) also included these CSS/JS files – all hell broke loose Seems every commit, more things broke Took FAR longer than expected, but we got it done. Merge + Minify CSS/JS Reduced global CSS/JS requests from 30-40 down to 3-4 (10x reduction)

29. Spriting Images Combines images Reduces HTTP requests A good thing, right? …

30. This image is a whopping 306k as a 24-bit PNG Spriting Woes – Take 1 PROBLEM HOW SOLVED Worked with design, removed alpha-transparency Saved as a JPG (came in < 50K) Saved > 250k alpha-transparent gradients

31. This image is a whopping 306k as a 24-bit PNG Spriting Woes – Take 1 PROBLEM HOW SOLVED Worked with design, removed alpha-transparency Saved as a JPG (came in < 50K) Saved > 250k alpha-transparent gradients > 1/4 Megabyte!

32. This image is 179K as a 24-bit PNG Spriting Woes – Take 2 PROBLEM HOW SOLVED If get rid of third image, can save as JPG (< 50k) Instead, we rewrote player code to show play button as icon (< 20k) Saved > 150k alpha-transparent only used if no Flash installed, < 1%!

33. Each screen: 1024x768 Dimensions: 4096x9216 Filesize: 5MB! Spriting Woes – Take 3

34. Each screen: 1024x768 Dimensions: 4096x9216 Filesize: 5MB! Spriting Woes – Take 3 Er… 5 megs of wrong!

35. Each screen: 1024x768 Dimensions: 4096x9216 Filesize: 5MB! Spriting Woes – Take 3 Sprite correctly. Sprite intelligently.

36. CDN (Content Delivery Network) PROBLEM Wasn’t configured properly – Gzip, Expires, etc. Assets loaded from multiple sources – Some from CDN – Others from app servers All sites shared same CDN domain – images.smallbusiness.intuit.com Photo credit: Forbes.com THE GOOD THING Already using Akamai

37. Angry Cookie Monster PROBLEM Domain cookies are passed with every http request for that domain CDN domain: images.smallbusiness.intuit.com Avg cookie size: ~800b-1k Total cookie bytes/page = ~100k+ – ~1k * ~100 reqs Image source: cheezburger.com

38. Happy Cookie Monster HOW SOLVED Image source: birdonacake.blogspot.com Reconfigured Akamai Load ALL static assets from CDN Cookie-less CDN domain: – {sitename}-s{#}.intuitstatic.com

39. Beacons + Redirects PROBLEM Marketing sites (we tracked everything) Excessive beacons (20-30+) Many 302-redirects (adds http requests) Over the years, many beacons added – but hardly any removed Image credit: GunGodTheGreat via deviantart.com

40. Beacons + Redirects HOW SOLVED Inventoried all beacons Benchmarked all beacons Asked marketers to review – Removed many legacy beacons Pinged vendors for current beacons that were sub-optimal – replaced with faster versions Image source: wikipedia.org

41. Beacons + Redirects HOW SOLVED Inventoried all beacons Benchmarked all beacons Asked marketers to review – Removed many legacy beacons Pinged vendors for current beacons that were sub-optimal – replaced with faster versions Image source: wikipedia.org Reduced beacon requests from 20-30 down to 8-10

42. Other Optimizations Recompressed all images – low hanging fruit + a big win Lazyloaded images below fold – another big win Removed custom fonts Removed duplicate code Removed more 30x redirects Remaining usual suspects

43. Eventually, we hit 6s… yay! But then the question came… Can we go faster?

44. people Phase 2: 6s to 2s

45. 6 seconds?! Very nice! Photo credit: http://merionminor.deviantart.com/

46. Photo credit: David Endelman, NetCarShow.com 15 seconds 6 seconds

47. NEW RULE: go beyond the rules

48. Deep analysis to find Intuit bottlenecks!

49. A/B Testing Software Inefficient video players Slooow global header full of surprises … good ole JavaScript Our Biggest Bottlenecks

50. A/B Testing Software

51. Blocking Calls Notice staircase pattern Milliseconds all add up These specific calls returned no content – Calls w/ content take even longer These + 2 calls not shown == ~750ms – Nearly 3/4 of a second to show nothing different

52. Redundant Content, Multiple Payloads Default content Default content Test A Default content Test B all users download default content test case users download both default + test content

53. Inherent high latencies Code that blocks the UI thread Lots of these calls on a page All adds up! Poor Performing Architecture blocking call – if loads content, traverses DOM and inserts here

54. A/B Testing Software HOW SOLVED ✓ Seek & destroy ✓ Removed expired tests ✓ Comment out inactive tests ✓ Switched test software

55. Video Player +

56. Poor for performance Callout smorgasbord PROBLEM HOW SOLVED ✓ Replace vendors & consolidate ✓ Lazy load video player

57. Global header – aka World Class Nav 2 A/B test calls Sprites instead of CSS JavaScript for mouseovers hundreds of event listeners over 1100 DOM elements happening on every page!

58. Global header – aka World Worst Class Nav 2 A/B test calls Sprites instead of CSS JavaScript for mouseovers hundreds of event listeners over 1100 DOM elements happening on every page! BONUS: 5 second load time!!!

59. New Global Header – aka QuickNav ✓ Full replacement ✓ Utilizes web standards HTML/CSS/JS ✓ Minimizes DOM traversals ✓ Minimizes image utilization ✓ Uses event delegation ✓ Across the board, every page had 1s-1.5s faster load time

60. JavaScript & Control.js created by Steve Souders designed to give control over how JS downloads and executes separates download and execution phases downloads scripts as either IMAGE or OBJECT elements scripts subsequently fetched from CACHE Read more about Control.js: http://stevesouders.com/controljs/

61. Prefetch assets prefetching assets across a flow of pages vs. single page examples: Sign-up flow or conversion funnel –At start of flow, as user idles, reads or types in form fields, we prefetch assets in the background –As user hits subsequent page needing this asset, it’s already available in the cache resulting in a speedier load time

62. Other Phase 2 Optimizations JavaScript rewrites Advanced lazyloading – components, functionality, etc. Internal WebPageTest – behind firewall testing Automated merge/minify Automated performance monitoring Changed technology infrastructure – for some products (faster stack) Performance Leaderboard – glass half-full interpretation of Wall-of-Shame Performance KPIs added to Stakeholder dashboards Bunch of other stuff

63. people So… how did we do?

64. Feb 15, 2012 15 seconds 1259kb payload Apr 15, 2013 3.6 seconds 407kb payload www.intuit.com Source: httparchive.org

65. Feb 15, 2012 15 seconds 1259kb payload Apr 15, 2013 3.6 seconds 407kb payload www.intuit.com Source: httparchive.org 5x faster!

66. www.intuit.com Feb 15, 2012 Apr 15, 2013 Source: webpagetest.org

67. payments.intuit.com Source: webpagetest.org Mar 14, 2012 Feb 15, 2013

68. payments.intuit.com Source: webpagetest.org Mar 14, 2012 Feb 15, 2013 > 5x faster!

69. All 6 Sites Source: Intuit, Inc.

70. people Business Impact

71. Tough to measure! Lots of chatter about positive lifts in metrics Hard to credit results solely to performance Best if no other changes besides performance (Uh, good luck with that in fast-paced business!)

72. Payroll In-product Purchase When pageload 9-12s 3-4s conversions then upgrade lookups pageload 5-6s conversions +14% * * 2012week14 (week/week improvement) only change was performance 9-12s

73. Performance & Shop Cart Checkouts Slow cart == more abandonment Source: Intuit, Inc. (shopping cart completions)

74. Performance & Shop Cart Checkouts Sped up cart == more completions Source: Intuit, Inc. (shopping cart completions)

75. QuickBooks Online Signup Flow Only change this period was performance * FY2012Q4, Source: Jeremy Goodrich (Intuit, Inc.) -2s total pageload == +10% conversion * QBO Marketing Page Signup: Account Info Signup: Credit Card Info QBO App Home ~6s ~8-10s ~8s

76. Generally Pageload TimeConversion Pageload >= 7s+3% (as long as final pageload time is 5s or faster) 7s > Pageload > 5s+2% 4s >= Pageload+1% For every 1s of performance gain: Diminishing business ROI as pages get faster.

77. people Takeaways

78. Getting Buy-in Stick with it! Evangelize Get a champion Do experiments Photo credit: Denis De Mesmaeker via flickr.com a squeeky wheel gets the oil

79. Start with: It does work Measurable improvements Code clean-up prior is good idea Photo credit: Gregory Mancuso

80. One size does not fit all Figure out your issues If you don’t know what’s slow, you can’t fix it Deep analysis, find bottlenecks, fix each one Learn to read waterfall charts! Best results Photo credit: spiritwomen.blogspot.com

81. Dedicated performance team? If you can afford it, YES! No competing priorities Highest chance of success (That’s what we did) (Steve Souders advocates for this) Image source: bearportpublishing.com

82. Maintaining Performance Many sites regress when stop watching Pay attention! Setup monitoring/alerts Weekly dashboards Wall of Shame (or Leaderboard Wall) Talk performance. Often. Photo credit: Tobin Copley via flickr.com stay on top of it!

83. Our Humble Opinion 99% of web sites can be made faster Most of us are not in that Our chances for a faster web site are very good! (sample size of 2)

84. people Photo credit: Nathan Kowald via flickr.com Contact: jayhung@webmocha.com / @jayhung norberth_danson@intuit.com