Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Everything You Wanted to Know About Web Performance (But Were Afraid to Ask)

7,056 views

Published on

This tutorial presented at the Velocity Confererence (in New York and Barcelona) covers a broad set of performance fundamentals.

Topics such as:
-- User expectations through the ages (or at least the past 40 years)
-- The psychology of performance
-- The impact of page speed on business metrics
-- A brief history of page growth and complexity
-- Demystifying key performance measurement terms
-- Waterfalls 101
-- What is latency (and why is it such a big deal)?
-- FEO techniques: From basic to advanced
-- What makes mobile performance different?

Published in: Technology

Everything You Wanted to Know About Web Performance (But Were Afraid to Ask)

  1. 1. Everything You Wanted to Know About Web Performance* *but were afraid to ask Tammy Everts @tameverts Kent Alstad @kentalstad Velocity EU 2014
  2. 2. Slide 2
  3. 3. •Impact of performance on business metrics •Psychology of performance •Page growth •Third-party scripts •Latency and CDNs •Waterfalls 101 •Design best practices (that are performance worst practices) •FEO best practices •Mobile Slide 3
  4. 4. The Impact of Page Speed on Business Metrics
  5. 5. Slide 5
  6. 6. Slide 6 Real User Monitoring at Walmart
  7. 7. Slide 7 The Secret Weapons of the AOL Optimization Team
  8. 8. Slide 8 20% more organic traffic 14% more page views Increased sales For Smartfurniture.com, faster pages =
  9. 9. Slide 9
  10. 10. Slide 10 Case study: The impact of HTML delay on mobile business metrics
  11. 11. The Psychology of User Expectations
  12. 12. Slide 12 Jakob Nielsen, Website Response Times, 2010
  13. 13. Slide 13
  14. 14. Slide 14 Optimal load time 8-second delay Jakob Nielsen: Website Response Times
  15. 15. Slide 15
  16. 16. Slide 16 http://www.radware.com/mobile-eeg2013/
  17. 17. Slide 17 500ms delay: Peak frustration results
  18. 18. Slide 18 500ms delay: Average engagement results
  19. 19. A Brief History of Page Growth
  20. 20. Slide 20 1995 14.1 KB 2.3 resources 2010 498 KB 75 resources 2014 1925 KB 100+ resources
  21. 21. Slide 21
  22. 22. Slide 22 Radware, State of the Union for Ecommerce Web Performance (Fall 2014)
  23. 23. What You Don’t Know About Third-Party Scripts Can Hurt You
  24. 24. Slide 24 Third-party calls can make up >50% of page requests. Steve Souders on High Performance Web Components
  25. 25. Slide 25 Third-party calls are the single greatest potential point of failure for web pages.
  26. 26. Slide 26 Increase page weight Increase number of hosts and connections Introduce additional latency Can compromise user security/privacy Prevent pages from loading
  27. 27. Wait… what the heck is a fourth-party call? Slide 27
  28. 28. Slide 28 http://www.webperformancetoday.com/2011/07/14/fourth-party-calls-third-party-content/
  29. 29. Slide 29 https://chrome.google.com/webstore/search/spof-o-matic
  30. 30. Slide 30 Original: 3.5s SPOF: 22.7s
  31. 31. https://www.optimizely.com/security Slide 31
  32. 32. When Design Best Practices Become Performance Worst Practices
  33. 33. Slide 33 Worst practice #1 Pages that are blank, then populate all at once…
  34. 34. Slide 34 …or pages that load nav elements first and primary content last
  35. 35. Slide 35 Worst practice #2 Pages in which the CTA is the last thing to render
  36. 36. Slide 36 Worst practice #3 Pop-ups that block the rest of the page
  37. 37. What Is Latency (and Why Is It Such a Big Deal)?
  38. 38. The amount of time it takes for a host server to receive, process, and deliver on a request for a page resource. Depends largely on how far away the user is from the server. Can be mitigated by a content delivery network (CDN). Slide 38
  39. 39. Slide 39
  40. 40. Slide 40
  41. 41. For every 20ms improvement in latency, we have a linear improvement in page loading times. Slide 41 Ilya Grigorik, Latency: The New Web Performance Bottleneck
  42. 42. 50% of your 1-second page load time budget on mobile is taken up by network latency overhead. Don’t count on LTE to be your mobile savior. 3G is going to be around till the ’20s. If you’re designing for mobile, it’s safest to assume you’re going to incur 2000ms of 3G latency. Slide 42
  43. 43. CDNs may be only somewhat effective for mobile traffic. Slide 43 Radware, Case study: How effective are CDNs for mobile visitors?
  44. 44. Waterfalls 101
  45. 45. Slide 45 http://www.webperformancetoday.com/2014/03/18/ waterfalls-101-how-to-use-a-waterfall-chart-to- diagnose-performance-pains/
  46. 46. Slide 46
  47. 47. Slide 47
  48. 48. Slide 48
  49. 49. How to Use FEO in the Real World
  50. 50. Slide 50 Only 3.6% of all page views are WPO-accelerated.
  51. 51. Inlining Round trip reduction Slide 51
  52. 52. Payload reduction Image resizing and compression Slide 52
  53. 53. Content reordering CSS at the top Slide 53
  54. 54. Deferral Eliminate JavaScript blocking Slide 54
  55. 55. What Makes Mobile Performance Different?
  56. 56. Slide 56 Keynote, 2012 Mobile User Survey
  57. 57. Slide 57 Sources Web Stress: A Wake-Up Call for European Business http://www.ca.com/us/~/media/files/supportingpieces/final_webstress_survey_report_229296.aspx 2012 Mobile User Survey (Keynote) http://www.keynote.com/docs/reports/Keynote-2012-Mobile-User-Survey.pdf 2013 State of the Union: Mobile Ecommerce Performance (Radware) http://www.radware.com/mobile-sotu2013/ The Danger of a Poor Mobile Shopping Experience http://www.getelastic.com/the-danger-of-a-poor-mobile-shopping-experience-infographic/ Case study: The impact of HTML delay on mobile business metrics http://www.webperformancetoday.com/2011/11/23/case-study-slow-page-load-mobile-business-metrics/ Real User Monitoring at Walmart http://minus.com/msM8y8nyh/1e Shopzilla’s Site Redo: You Get What You Measure http://www.scribd.com/doc/16877317/Shopzilla-s-Site-Redo-You-Get-What-You-Measure Firefox & Page Load Speed – Parts 1 & 2 http://blog.mozilla.org/metrics/category/website-optimization/ YSlow 2.0 http://www.slideshare.net/stoyan/yslow-20-presentation AutoAnything Cuts Page Load Time in Half and Revs Up Sales by 13% http://www.radware.com/Products/FastView-Resources/ No Framework Needed https://signalvnoise.com/posts/3103-no-framework-needed State of the Union: Ecommerce Page Speed & Web Performance http://www.radware.com/summer-sotu2014
  58. 58. Questions? @tameverts @kentalstad

×