1 / 84

From Slow To Fast: Improving Performance On Intuit Web Sites By Up To 5x

From Slow To Fast: Improving Performance On Intuit Web Sites By Up To 5x. Velocity NY Oct 16, 2013. 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. Who we are. Jay Hung / @ jayhung

alvaro
Télécharger la présentation

From Slow To Fast: Improving Performance On Intuit Web Sites By Up To 5x

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 earlydays… Image source: Internet Archive (edited)

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

  6. Dated Technology Before Web Standards

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

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

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

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

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

  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 Too busy. No time. No resources. But people didn’t get it. Couldn’t get buy-in. Image source: DJ Octoon

  14. Then one experimentchanged everything.

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

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

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

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

  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. Our Mission Reduce page load timesfor top 50 pages of 6 marketing sites by ~50%

  21. Phase 1: 12-15 seconds 6seconds

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

  23. Original Rules of High Performance • Minimize HTTP requests • Use CDN • Add expires header • Gzip components • Put stylesheets at top • Put scripts at bottom • Avoid CSS expressions • Make JS & CSS external • Reduce DNS lookups • Minify JS & CSS • Avoid redirects • Remove duplicate scripts • Configure Etags • 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. Performance Rule #1 General Problem: • Each http request has overhead • Connection setup/teardown • DNS lookup times Minimize HTTP requests Our Problem: • Excessive CSS files (10+) • Excessive JS files (30+) • Excessive images (50-70+) • Excessive beacons (20+)

  26. Merge + Minify CSS/JS 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 Bleeding and collisions galore!

  27. Merge + Minify CSS/JS 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 ubermergesets == 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.

  28. Merge + Minify CSS/JS 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 ubermergesets == 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. 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. Spriting Woes – Take 1 PROBLEM • This image is a whopping 306k as a 24-bit PNG alpha-transparent gradients HOW SOLVED • Worked with design, removed alpha-transparency • Saved as a JPG (came in < 50K) • Saved > 250k

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

  32. Spriting Woes – Take 2 PROBLEM • This image is 179K as a 24-bit PNG alpha-transparent only used if no Flash installed, < 1%! 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

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

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

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

  36. CDN (Content Delivery Network) THE GOOD THING • 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 • Already using Akamai PROBLEM Photo credit: Forbes.com

  37. Angry Cookie Monster • 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 PROBLEM Image source: cheezburger.com

  38. Happy Cookie Monster • Reconfigured Akamai • Load ALL static assets from CDN • Cookie-less CDN domain: • {sitename}-s{#}.intuitstatic.com HOW SOLVED Image source: birdonacake.blogspot.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 Reduced beacon requests from 20-30 down to 8-10 Image source: wikipedia.org

  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. Phase 2:6s to 2s

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

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

  47. NEW RULE: go beyond the rules

  48. Deep analysis to find Intuit bottlenecks!

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

  50. A/B Testing Software

More Related