Practical web performance - Site Confidence Web Performance Seminar
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Practical web performance - Site Confidence Web Performance Seminar

  • 59,596 views
Uploaded on

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.

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
59,596
On Slideshare
4,714
From Embeds
54,882
Number of Embeds
15

Actions

Shares
Downloads
70
Comments
0
Likes
2

Embeds 54,882

http://www.websiteperformance.org.uk 52,165
http://www.seriticonsulting.com 2,044
http://www.londonwebperformance.org.uk 537
http://www.freeperformancesoftware.com 54
http://www.londonwebperf.org.uk 51
http://abtasty.com 8
http://test.websiteperformance.org.uk 5
http://seriti.squarespace.com 4
https://www.google.co.uk 4
http://demo.seriticonsulting.com:8888 4
http://www.200please.com 2
http://translate.googleusercontent.com 1
http://theopsmgr.seriticonsulting.com 1
http://a0.twimg.com 1
http://www.seriticonsulting.com. 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Very Subjective!!! Perceived… because perception is crucial (as we shall see)Action to Response – from “here to here” – ie any delay experienced has a context of what the customer’s intention is…Meaningful Response – spinners are good, but people won’t wait forever… Different for different sites – for different users (Age, Gender, emotional state (“Is the train about to leave, I’m running late”?), culture, level of experience) – at different stages in the user journey (e.g Navigation browser vs Search vs checkout) Different devices? – Mobile vs wireless vs wired?
  • Stoyan’s Talk at Velocity “The Psychology of Performance” http://velocityconf.com/velocity2010/public/schedule/detail/13019"Satisfaction = perception minus expectation" - David Maister
  • In fact, your performance could be “stressing them out”….
  • This is from the Foviance/ CA Study http://www.foviance.com/what-we-think/its-official-web-stress-is-bad-for-business-2/ http://www.ca.com/Files/SupportingPieces/final_webstress_survey_report_229296.pdf
  • The 3 response-time limits are the same today as when I wrote about them in 1993 (based on 40-year-old research by human factors pioneers): 0.1 seconds gives the feeling of instantaneous response — that is, the outcome feels like it was caused by the user, not the computer. This level of responsiveness is essential to support the feeling of direct manipulation (direct manipulation is one of the key GUI techniques to increase user engagement and control — for more about it, see our Principles of Interface Design seminar). 1 second keeps the user's flow of thought seamless. Users can sense a delay, and thus know the computer is generating the outcome, but they still feel in control of the overall experience and that they're moving freely rather than waiting on the computer. This degree of responsiveness is needed for good navigation. 10 seconds keeps the user's attention. From 1–10 seconds, users definitely feel at the mercy of the computer and wish it was faster, but they can handle it. After 10 seconds, they start thinking about other things, making it harder to get their brains back on track once the computer finally does respond.
  • As measured @ 2Mbps in IE8…But the actual download speed and browser are irrelevant… this is about user perception… so the real question is “which customers do I want to have a good perception of my site…”
  • Can anyone guess why performance matters?
  • Front-end – between browser and data centreBack-end – generating the response on the server
  • http://code.google.com/speed/page-speed/docs/rules_intro.html
  • A review of 25 web performance optimisation engagements performed by Site Confidence over the last 12 months.
  • Load time correlation from the HTTP Archive
  • Render time correlation from the HTTP Archive
  • Based on 25 consulting reports across a wide range of e-commerce and publishing sites
  • 100% of the time there were too many requests100% of the time they weren’t using caching to its full advantage, and hence repeat visits were slower than they needed to be…76% of the sites exhibited noticable slowing down during peak time of day/week~50% of the time the pages were bloated (often due to images that on average can be optimised ~15%) Frighteningly ¼ of the sites analysed either didn’t have Gzip compression enabled or it had problems e.g. failing under load!
  • The MSN performance talk was excellent http://velocityconf.com/velocity2011/public/schedule/detail/18039Performance improvements can increase and DECREASE your bottom line so be careful!
  • In fact this is an example where it took 30 secsIt’s also crappy JavaScript and a poor page design…
  • 100ms latency on each request = 5 sec page slowdown on a page100ms is about the latency you would get from here to the US…
  • [Next Slide…]But what about “the bigger picture”? Being successful in WPO is more than just “implementing the rules”… so what else can we learn from the experiences of others?
  • KeepAliveTimeout DirectiveDescription:Amount of time the server will wait for subsequent requests on a persistent connectionSyntax:KeepAliveTimeout secondsDefault:KeepAliveTimeout 5MaxKeepAliveRequests DirectiveDefault:MaxKeepAliveRequests 100 MaxKeepAliveRequests directive limits the number of requests allowed per connection when KeepAlive is on. If it is set to 0, unlimited requests will be allowed. We recommend that this setting be kept to a high value for maximum server performance.For example:MaxKeepAliveRequests 500
  • It’s about measurement…
  • WPO Performance isn’t just for Christmas…It’s an on-going effort…
  • Just like an ITIL implementation…
  • So you need these 8 skills (at a minimum) contributing to your web performance process…But if you are a small startup these all might be one person…Performance Lead / EvangelistFront-end DeveloperBack-end DeveloperPerformance QADatabase AdministratorSystems AdministratorNetwork AdministratorWeb Analytics Analyst
  • So a team like that, even part-time, is going to cost you money…… but there are ways to automate it with both commercial (e.g. Aptimize) and open-source (Google’s Mod_pagespeed)What works for you depends on the size and scale of your website, your available resources, etc. OpexvsCapex… Probably a hybrid approach is best – automate where it’s cost-effective, hand-tune the important bits.
  • What else? Let’s hear from Lord Kelvin…
  • http://www.webperformancematters.com/journal/2007/5/7/the-importance-of-measurements.html
  • An dyou can use those measurements as a differentiator in your business!!! – See Betfair’s Performance Charter…This doesn’t have to be esoteric backroom stuff!
  • Don’t be afraid to make some noise about it!!! Use it as a BHAG and as a point of differentiation to your competitors!
  • Just a reminder…. For those that were paying attention earlier! So how can we measure web performance…
  • There are basically 6 techniques used to measure web performance:Each one has it’s pros and cons… easy of use, what it can measure, cost etc
  • Operations has different needs to Marketing or User Experience team
  • Notethat active monitoring can use either an synthetic agent or a “real browser”Passive – the signal to noise ratio is huge, just like passive sonar. Trying to detect the signal from the clutter is very hard… Anyway, enough about all the WPO projects, what about the
  • It’s about measurement…
  • This is from 2009 so it’s out of date BUT it makes the point that “which measurement do you choose”http://sixrevisions.com/infographics/performance-comparison-of-major-web-browsers/Aug 2011 data here - http://www.tomshardware.com/reviews/web-browser-performance-standard-html5,3013.html
  • It’s about measurement…
  • And if you throw in CyanogenMod you can get even better performance…
  • Whilst its growing fast… From Souders preso - http://www.slideshare.net/souders/high-performance-mobile-sfsv-web-perf
  • From Souders preso - http://www.slideshare.net/souders/high-performance-mobile-sfsv-web-perfObviously this is heavily influenced by sector…e.g. the Adactus guys can tell you about Pizza Hut who do very nicely on mobile!Ditto for music, ringtones etc.
  • I was on the Thames Clipper on my way back from the O2 after a concert. So I ran some automated testing and this graphs my results… on the Velocity Conference home page…Min9.275Max156.520Average32.859Median12.071Std Deviation45.691
  • Network latency varies enormously…. What can we see here?The connection is relatively good at sending and receiving data. The green crosses represent packets that were actually lost which only happened for 75 of 1000.There are some crazy-high round trip times. The minimum round trip time was 107ms (which would put my home cable connection to shame) and even the median is pretty awesome at 239ms but the maximum was a whopping 20226 ms - that's more than 20 seconds!
  • But before I go… two quick plugs…

Transcript

  • 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
  • 24. Yahoo’s Rules
    • Minimize HTTP Requests
    • 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 Redirects
    Remove 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
  • 35. Google’s Rules
    • Avoid bad requests
    • 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 lookups
    Minimize 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/