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?

1. Everything You Wanted to Know About Web Performance*
*but were afraid to ask
Tammy Everts @tameverts
Kent Alstad @kentalstad
Velocity EU 2014

2. Slide 2

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. The Impact of Page Speed on Business Metrics

5. Slide 5

6. Slide 6
Real User Monitoring at Walmart

7. Slide 7
The Secret Weapons of the AOL Optimization Team

8. Slide 8
20% more organic traffic
14% more page views
Increased sales
For Smartfurniture.com, faster pages =

9. Slide 9

10. Slide 10
Case study: The impact of HTML delay on mobile business metrics

11. The Psychology of User Expectations

12. Slide 12
Jakob Nielsen, Website Response Times, 2010

13. Slide 13

14. Slide 14
Optimal load time
8-second delay
Jakob Nielsen: Website Response Times

15. Slide 15

16. Slide 16
http://www.radware.com/mobile-eeg2013/

17. Slide 17
500ms delay: Peak frustration results

18. Slide 18
500ms delay: Average engagement results

19. A Brief History of Page Growth

20. Slide 20
1995 14.1 KB
2.3 resources
2010 498 KB
75 resources
2014 1925 KB
100+ resources

21. Slide 21

22. Slide 22
Radware, State of the Union for Ecommerce Web Performance (Fall 2014)

23. What You Don’t Know About Third-Party Scripts Can Hurt You

24. Slide 24
Third-party calls can make up >50% of page requests.
Steve Souders on High Performance Web Components

25. Slide 25
Third-party calls are the single greatest potential point of failure for web pages.

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. Wait… what the heck is a fourth-party call?
Slide 27

28. Slide 28
http://www.webperformancetoday.com/2011/07/14/fourth-party-calls-third-party-content/

29. Slide 29
https://chrome.google.com/webstore/search/spof-o-matic

30. Slide 30
Original: 3.5s
SPOF: 22.7s

31. https://www.optimizely.com/security
Slide 31

32. When Design Best Practices Become Performance Worst Practices

33. Slide 33
Worst practice #1
Pages that are blank, then populate all at once…

34. Slide 34
…or pages that load nav elements first and primary content last

35. Slide 35
Worst practice #2
Pages in which the CTA is the last thing to render

36. Slide 36
Worst practice #3
Pop-ups that block the rest of the page

37. What Is Latency (and Why Is It Such a Big Deal)?

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. Slide 39

40. Slide 40

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. 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. CDNs may be only somewhat effective for mobile traffic.
Slide 43
Radware, Case study: How effective are CDNs for mobile visitors?

44. Waterfalls 101

45. Slide 45
http://www.webperformancetoday.com/2014/03/18/ waterfalls-101-how-to-use-a-waterfall-chart-to- diagnose-performance-pains/

46. Slide 46

47. Slide 47

48. Slide 48

49. How to Use FEO in the Real World

50. Slide 50
Only 3.6% of all page views are WPO-accelerated.

51. Inlining
Round trip reduction
Slide 51

52. Payload reduction
Image resizing and compression
Slide 52

53. Content reordering
CSS at the top
Slide 53

54. Deferral
Eliminate JavaScript blocking
Slide 54

55. What Makes Mobile Performance Different?

56. Slide 56
Keynote, 2012 Mobile User Survey

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. Questions?
@tameverts
@kentalstad