Over of Web performance optimisation (WPO) as well as some results from 25 web performance site analysis. Some information on Mobile web performance as well.

1. Practical Web performance Stephen Thair, Seriti Consulting, @TheOpsMgr stephen.thair@seriticonsulting.com 26/09/2011 © Seriti Consulting 1

2. Defining “Web Performance”? Why performance matters (to your business) The “Rules” of Web Performance Practical Web Performance (“where to start!”) Agenda 26/09/2011 (c) Seriti Consulting, 2011 2

3. My Definition of Web Performance 26/09/2011 (c) Seriti Consulting, 2011 3 “The delay perceived by the website visitor between an action (e.g click) and a meaningful response” “The delay perceived by the website visitor between an action (e.g click) and a meaningful response” “The delay perceived by the website visitor between an action (e.g click) and a meaningful response”

4. Perception http://velocityconf.com/velocity2010/public/schedule/detail/13019 26/09/2011 (c) Seriti Consulting, 2011 4

5. 26/09/2011 © Seriti Consulting 5 Just because your DevMgr, QA Mgr, Ops Mgr tells you “performance is good” doesn’t means that it is PERCEIVED that way by your CUSTOMERS…

6. “Brain wave analysis from the experiment revealed that participants had to concentrate up to 50% more when using badly performing websites, while facial muscle and behavioural analysis of the subjects also revealed greater agitation and stress in these periods. http://www.ca.com/Files/SupportingPieces/final_webstress_survey_report_229296.pdf Poor Performance = Web Stress!!! 26/09/2011 (c) Seriti Consulting, 2011 6

7. 0.1 secondsgives the feeling of instantaneous response 1 secondkeeps the user's flow of thought seamless. 10 secondskeeps the user's attention JakobNeilsen. http://www.useit.com/alertbox/response-times.html So what is “Good Performance”? 26/09/2011 (c) Seriti Consulting, 2011 7

8. 10 Seconds is too slow… (IMHO) “Initial render” < 750ms and be “Page Complete” < 3 seconds “3 Second Rule” 26/09/2011 (c) Seriti Consulting, 2011 8

9. Why Performance Matters 26/09/2011 (c) Seriti Consulting, 2011 9

10. Bounce Rate goes up http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/ 26/09/2011 (c) Seriti Consulting, 2011 10

11. Page Views goes down http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/ 26/09/2011 (c) Seriti Consulting, 2011 11

12. Conversion Rate goes down http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/ 26/09/2011 (c) Seriti Consulting, 2011 12

13. “A 1-second delay in page load time equals 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions” Aberdeen Group http://www.aberdeen.com/Aberdeen-Library/5136/RA-performance-web-application.aspx 3rd Party Research 26/09/2011 (c) Seriti Consulting, 2011 13

14. Artificial 1s delay = 2.8% reduction in revenue per user Empirical Testing 26/09/2011 (c) Seriti Consulting, 2011 14 http://assets.en.oreilly.com/1/event/29/The%20User%20and%20Business%20Impact%20of%20Server%20Delays%2C%20Additional%20Bytes%2C%20and%20HTTP%20Chunking%20in%20Web%20Search%20Presentation.pptx

15. You are losing Visitors You are losing Sales You are losing Ad-revenue You are wasting SEO/SEM/PPC budget Spending £££ on bandwidth and servers In Summary… 26/09/2011 (c) Seriti Consulting, 2011 15

16. 26/09/2011 © Seriti Consulting 16 So how are we doing?

17. 26/09/2011 © Seriti Consulting 17 Largest Page… 4,909,588 bytes

18. 26/09/2011 © Seriti Consulting 18 Slowest Page… 12.436 secs

19. 26/09/2011 © Seriti Consulting 19 Most objects… 227

20. 26/09/2011 © Seriti Consulting 20 1 was down for maintenance 1 didn’t re-direct from http to https ~28% had some type of error

21. 26/09/2011 © Seriti Consulting 21 So what can you do about it? Answer = Optimise!

22. 26/09/2011 © Seriti Consulting 22 80% “Front End” 20% “Back-end”

23. Focus on the “front end” Optimise the interaction between the browser and the data-centre And how the browser processes the client-side objects “Front End Engineering” 26/09/2011 (c) Seriti Consulting, 2011 23

25. Use a Content Delivery Network

26. Add an Expires or a Cache-Control Header

27. Gzip Components

28. Put StyleSheets at the Top

29. Put Scripts at the Bottom

30. Avoid CSS Expressions

31. Make JavaScript and CSS External

32. Reduce DNS Lookups

33. Minify JavaScript and CSS

34. Avoid RedirectsRemove Duplicate Scripts Configure ETags Make AJAX Cacheable Use GET for AJAX Requests Reduce the Number of DOM Elements No 404s Reduce Cookie Size Use Cookie-Free Domains for Components Avoid Filters Do Not Scale Images in HTML Make favicon.ico Small & Cacheable http://developer.yahoo.com/yslow/help/#guidelines 26/09/2011 (c) Seriti Consulting, 2011 24

36. Avoid CSS expressions

37. Combine external CSS

38. Combine external JavaScript

39. Defer loading of JavaScript

40. Enable compression

41. Leverage browser caching

42. Leverage proxy caching

43. Minify CSS

44. Minify HTML

45. Minify JavaScript

46. Minimize request size

47. Minimize DNS lookupsMinimize redirects Optimize images Optimize the order of styles and scripts Parallelize downloads across hostnames Put CSS in the document head Remove unused CSS Serve resources from a consistent URL Serve scaled images Serve static content from a cookieless domain Specify a character set early Specify image dimensions Use efficient CSS selectors http://code.google.com/speed/page-speed/docs/rules_intro.html 26/09/2011 (c) Seriti Consulting, 2011 25

48. 26/09/2011 © Seriti Consulting 26 Informationoverload!

49. 26/09/2011 © Seriti Consulting 27 Where should you start?

50. 26/09/2011 © Seriti Consulting 28 Which optimisations are most common? Which optimisations are most important? And the survey says…

51. HTTP Archive - Load Time Correlation 26/09/2011 © Seriti Consulting 29 http://httparchive.org/interesting.php

52. HTTP Archive - Render Time Correlation 26/09/2011 © Seriti Consulting 30 http://httparchive.org/interesting.php

53. Lessons learnt from consulting… 26/09/2011 © Seriti Consulting 31

54. 26/09/2011 © Seriti Consulting 32

55. 5 Important Ones Reduce Page Size (<500Kb) Enable (Gzip) Compression Reduce the number of roundtrips (<40 per page…) HTTP Cache Headers (cache long & prosper!) Structure the page (to improve render & download) CSS First Javascript last 26/09/2011 (c) Seriti Consulting, 2011 33

56. Even if you apply just those 5 rules…Your page download times will drop by ~50% Low hanging fruit… 26/09/2011 (c) Seriti Consulting, 2011 34

57. What about the other rules? Generally you are now measuring gains in milliseconds 26/09/2011 (c) Seriti Consulting, 2011 35 But even milliseconds can make a difference…

58. Optimising JavaScript & async loading 26/09/2011 © Seriti Consulting 36 Loading jqueryAsync Improving JS Execution time Delayed ad-loading Faster does not always equal more revenue!!! http://velocityconf.com/velocity2011/public/schedule/detail/18039

59. “Reduce the number of DOM elements” 26/09/2011 (c) Seriti Consulting, 2011 37 24,000 calls to a selector takes time…

60. “Use a content delivery network” 26/09/2011 © Seriti Consulting 38 You can’t beat the speed of light… And if your customers are not in the UK, invest in a CDN…

61. 26/09/2011 © Seriti Consulting 39 4.5 seconds in London becomes 12.5 seconds in Singapore

62. “Use http keep-alives” 26/09/2011 © Seriti Consulting 40 Tune your HTTP Keep-Alives! KeepAliveTimeout Value (sec) MaxKeepAlive Requests (# requests/connection) Stop forcing your customers to re-negotiate connections (even partway through a page!) Even more important for SSL! (~4x slower)

63. 26/09/2011 © Seriti Consulting 41 “The Bigger Picture”

64. 26/09/2011 © Seriti Consulting 42 WPO is not just for Christmas…

65. 26/09/2011 © Seriti Consulting 43 Performance is a PROCESS NOT a PROJECT http://www.seriticonsulting.com/blog/2011/5/28/web-performance-is-not-just-for-christmashellip.html

66. 26/09/2011 © Seriti Consulting 44 Who should you have on your WPO project team? http://www.seriticonsulting.com/blog/2011/5/29/who-should-be-on-your-wpo-team.html

67. 26/09/2011 © Seriti Consulting 45 Who should you have on your WPO Process! team? http://www.seriticonsulting.com/blog/2011/5/29/who-should-be-on-your-wpo-team.html

68. 26/09/2011 © Seriti Consulting 46 Performance Lead / Evangelist Front-end Developer Back-end Developer Performance QA Database Administrator Systems Administrator Network Administrator Web Analytics Analyst

69. 26/09/2011 © Seriti Consulting 47 Economics of WPO… is automation the answer? http://www.seriticonsulting.com/blog/2011/8/11/why-i-think-automation-is-the-future-of-webperf.html Answer: Maybe?

70. 26/09/2011 © Seriti Consulting 48 What Else?

71. 26/09/2011 © Seriti Consulting 49 “I often say that when you can measure what you are speaking about, and express it in numbers, you know something about it; but when you cannot express it in numbers, your knowledge is of a meagre and unsatisfactory kind; it may be the beginning of knowledge, but you have scarcely, in your thoughts, advanced to the stage of Science, whatever the matter may be.” -- William Thomson,1st Baron Kelvin

72. 26/09/2011 © Seriti Consulting 50 Make sure you can measure your website performance… (and that the numbers are getting better, not worse!)

73. Betfair’s customer performance charter 26/09/2011 © Seriti Consulting 51 ”We aim for 99.9% of bets placed in less than a second and our aspirational website SLA is as follows. Under peak loads, with performance measured at the 95th percentile, for typical user bandwidths and a 0% error rate, our users shall experience Visual Progress (header loaded) in less than 1 second, Time to Interact with useful content within 1.5 seconds and full page loads within 3 seconds. (There is room for improvement on this front as our current sports home page loads in approx. 18 seconds at the 95th percentile). We will publish our aggregate stats here monthly.” http://www.seriticonsulting.com/blog/2011/7/20/creating-an-performance-sla-with-your-customers-betfairrsquo.html

74. 10 Seconds is too slow… (IMHO) “Initial render” < 750ms and be “Page Complete” < 3 seconds “3 Second Rule” 26/09/2011 (c) Seriti Consulting, 2011 52

75. JavaScript timing e.g. WebTuna, GA SiteSpeed Browser plug-in e.g. HTTPwatch Custom browser e.g. Site Confidence Active Proxy timing e.g. Fiddler proxy Web Server Module e.g. APM solutions Network-level e.g. SC Organic, Atomic Labs Pion 26/09/2011 (c) Seriti Consulting, 2011 53 6 ways of measuring WebPerf

76. 26/09/2011 (c) Seriti Consulting, 2011 54 Which is better? It Depends…

77. Do you want to measure every visit to your website? Use a jscript tag, web server or network level solution Are you measuring as part of Dev or QA? Use a browser plug-in or proxy Do you want detailed browser metrics like render start time? Use a browser plug-in Are you a 3rd party monitoring provider? Use a custom browser variant! 26/09/2011 (c) Seriti Consulting, 2011 55 It depends on…

78. Active Monitoring Agent “pings” the web page “Real-User” Monitoring (RUM) “listening in” to real user traffic Complementary methods! Best solution is Active & Real-User Not Active or Real-User… 26/09/2011 (c) Seriti Consulting, 2011 56 Active vs “Real-User”

79. 26/09/2011 © Seriti Consulting 57 What about client-side?

80. The Browser performance wars… 26/09/2011 © Seriti Consulting 58 http://sixrevisions.com/infographics/performance-comparison-of-major-web-browsers/ (2009)

81. Automate cross-Browser perf testing! 26/09/2011 © Seriti Consulting 59

82. 26/09/2011 © Seriti Consulting 60 What about Mobile?

83. Different operating systems 26/09/2011 © Seriti Consulting 61

84. Even more browsers? 26/09/2011 © Seriti Consulting 62 http://www.webdevelopersnotes.com/articles/mobile-web-browsers-list.php

85. slideshare.net/CMSummit/ms-internet-trends060710final

86. 26/09/2011 © Seriti Consulting 64 http://www.nytimes.com/2011/04/18/technology/18mobile.html

87. Mobile Performance is location-dependent 26/09/2011 © Seriti Consulting 65 http://mytests.3pmobile.com/context/?WyIyUFVDZHlWV2ErZHFISmxCSWFXRENnPT0iLCJEYnFYVVp3SEN4MD0iXQ%3D%3D

88. Mobile latency (over HSDPA) 26/09/2011 © Seriti Consulting 66 Max RTT = 20 seconds! http://blog.davidsingleton.org/mobiletcp

89. Mobile performance rules??? Latency kills… DNS Lookups take far longer Avoid re-directs (to http://m.yourdomain.com) Reduce the number of roundtrips (<15 per page?) 26/09/2011 (c) Seriti Consulting, 2011 67

90. Mobile performance rules??? “Intelligent Adaptation” Be device & network aware! Send only what you need Send the right sized images With the minimum of script/CSS/etc 26/09/2011 (c) Seriti Consulting, 2011 68

91. Mobile performance rules??? Cache Brower cache (small cache, with a different eviction algorithm…) AppCache, LocalStorage, 26/09/2011 (c) Seriti Consulting, 2011 69

92. 26/09/2011 © Seriti Consulting 70 And that’s all I’ve got…(but before I go…)

93. 26/09/2011 © Seriti Consulting 71 Velocity EU Web Performance Conference Berlin 8th/9th November (see me for a discount code!) http://velocityconf.com/velocityeu/