Web Performance Optimisation 101
And how to measure it!
Steve Thair
Seriti Consulting
@TheOpsMgr
 21yrs IT experience.
 Started with www in 1998 (IIS3! Site Server 3!).
 Web Architect @ BNP Paribas, CSFB etc
 Web Op...
 Defining “Web Performance”?
 Why performance matters (to your business)
 The “Rules” of Web Performance
 Measuring We...
“The delay perceived by the
website visitor between an
action (e.g click) and a
meaningful response”
My Definition of Web ...
Perception
http://velocityconf.com/velocity2010/public/schedule/detail/13019 30/01/2015(c) Seriti Consulting, 2011 5
 “Brain wave analysis from the
experiment revealed that
participants had to
concentrate up to 50% more
when using badly p...
 0.1 seconds gives the feeling of instantaneous
response
 1 second keeps the user's flow of thought
seamless.
 10 secon...
 10 Seconds is too slow… (IMHO)
“Initial render” < 750ms and be
“Page Complete” < 3 seconds
3 Second Rule
30/01/2015(c)...
Why Performance Matters
30/01/2015(c) Seriti Consulting, 2011 9
Bounce Rate goes up
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-
by-default...
Page Views goes down
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-
by-defaul...
Conversion Rate goes down
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-
by-d...
“A 1-second delay in page load time
equals 11% fewer page views, a 16%
decrease in customer satisfaction,
and 7% loss in ...
Artificial 1s delay =
2.8% reduction in
revenue/user (Bing)
 http://assets.en.oreilly.com/1/event/29/The%20User
%20and%2...
So why does this
matter to UK CMG?
30/01/2015(c) Seriti Consulting, 2011 15
 Traditional “performance optimisation”
 Web Server Tuning
 Application Server Tuning
 Database Query Tuning
 Code re...
80% of the page load time
is spent outside the data
centre!!!
Steve Souders “High-Performance Websites”
But…
30/01/2015(c...
 Focus on the “front end”
 Optimise the interaction
between the browser and
the data-centre
 And how the browser
proces...
TCP/IP
HTTP
Browser
HTML CSS Javascript IMG
The Building Blocks of #WebPerf
30/01/2015(c) Seriti Consulting, 2011 19
 Minimize HTTP Requests
 Use a Content Delivery Network
 Add an Expires or a Cache-
Control Header
 Gzip Components
 ...
 Avoid bad requests
 Avoid CSS expressions
 Combine external CSS
 Combine external JavaScript
 Defer loading of JavaS...
 Reduce Page Size (<500Kb)
 Enable (Gzip) Compression
 Reduce the number of roundtrips (<40 per page…)
 Structure the ...
Even if you apply just those
5 rules…
Your page download times
will drop by ~50%
Low hanging fruit…
30/01/2015(c) Seriti C...
Seatwave did it…
http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf
30/01/2015(c) Seriti Consulting, 2011 ...
 Measuring what, exactly?
 How to measure web performance?
 When & where to measure?
 “Active” vs “Passive”
 Web Perf...
 Many different yardsticks to use
 Data-start time (TTFB)
 DOM load (Document Object Model)
 Render Start (When does t...
30/01/2015(c) Seriti Consulting, 2011 27
When do we “stop the clock?”
30/01/2015(c) Seriti Consulting, 2011 28
1. JavaScript timing e.g. WebTuna
2. Browser plug-in e.g. HTTPwatch
3. Custom browser e.g. Webkit build
4. Proxy timing e....
30/01/2015(c) Seriti Consulting, 2011 30
Which is better?
Metric JavaScript Browser Plug-in Custom Browser Proxy Debugger ...
 Do you want to measure every visit to your website?
 Use a jscript tag, web server or network level solution
 Are you ...
 Active (aka “Synthetic”) Monitoring
 Agent “pings” the web page
 Passive (aka “Real User”)
 “listening in” to real us...
30/01/2015(c) Seriti Consulting, 2011 33
Active – Site Confidence
Performance Analyser
Active – Site Confidence
Performance Analyser
Cross Browser
(Problem in IE?)
Compare Competition
UK E-Commerce Top 20
30/0...
Passive – Webtuna
Performance around the World SLA Compliance for all visitors
30/01/2015(c) Seriti Consulting, 2011 35
 Automated
Regression testing
with Selenium
+
 Dynatrace Ajax Edition
+
 www.slowslow.com
30/01/2015(c) Seriti Consulti...
 Client-side analysis tools
 External Website & Page analysers
 Web Performance Analytics
 Website Acceleration
The #W...
 ySlow (Firefox)
 PageSpeed (Firefox & Chrome)
 Firebug (Firefox)
 HTTPWatch (Firefox & IE)
 Dynatrace Ajax Edition (...
 WebPageTest.org- http://www.webpagetest.org/
 SC Performance Analyser
http://www.siteconfidence.com/services/site-wide-...
 Atomic Labs Pion - www.atomiclabs.com
 WebTuna – www.webtuna.com
 Avicode (now Microsoft) –
www.microsoft.com/systemce...
 Google Mod_pagespeed -
http://code.google.com/speed/page-
speed/docs/module.html
 Aptimize – www.aptimize.com
 Webo - ...
 Performance Planet (WebPerf Blogs) -
http://www.perfplanet.com/
 WebPerformanceToday -
http://www.webperformancetoday.c...
 Join our London Web Performance Meetup
 http://www.meetup.com/London-Web-Performance-
Group/
 THIS THURSDAY 19th May –...
Questions?
30/01/2015(c) Seriti Consulting, 2011 44
Upcoming SlideShare
Loading in...5
×

Web performance and measurement - UKCMG Conference 2011 - steve thair

2,659

Published on

The slides from my presentation on web performance and measurement at the UK CMG conference in May 2011. It incorporates some of my slides from the earlier Web Performance 101 presentation with new material focussing on measuring web performance

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,659
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
59
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Thanks for coming to my talk… I know it must have been hard to tear yourself away from “Collecting DB2 Measurements in SMF” so I appreciate your trust!

    We have lot of really interesting stuff to talk about…

    You will get a lot of food for thought and it might just change the way you think about web performance…

  • DB2 was the reason I moved into local area networking…
  • The agenda for my session…
  • 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



  • 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).

    Think “Typing on a keyboard”

    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.

    Think “turning pages in a book”

    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?

    It’s all about the Benjamin’s as our US friends would say…
  • UK CMG members are responsible for designing and operating the infrastructure, of course but more than that…

    … by and large many of use are still “old school” in our thinking about web performance… we come from a background of performance optimisation focussed on “the back end”
  • So you are focussing all your effort on 20% of the problem

  • TCP/IP – the network transport (including DNS in here for simplicity) – Latency & Bandwidth

    HTTP – all the HTTP Headers that are crucial to performance – Expires, Cache-Control, Last-Modified etc

    Browsers – different behaviour – see Browser Scope for details (jscript engines, compliance, number of connections, downloading behaviour)

    The Application Layer – what the developer has traditionally been concerned about… HTML/CSS/Javascript/IMG etc

    Now they have to worry about a lot more…




  • http://code.google.com/speed/page-speed/docs/rules_intro.html
  • Put your web pages on a diet

    Zip ‘em up and save your bandwidth!

    Stop going back and forth!

    But the first ingredients first…

    Use your pantry!
  • From last months meetup…

    Speed pages up… and saved money too!



  • Since this is UK CMG… how are we going to measure it?

  • http://assets.en.oreilly.com/1/event/62/Above%20the%20Fold%20Time_%20Measuring%20Web%20Page%20Performance%20Visually%20Presentation.pdf

  • When to we “stop the clock” on the timer?

    When the DOM is built?

    When the page first displays (render start)?

    When the “onLoad event” fires?

    When the last HTTP request has completed?

    When the javacript has completed and any post processing is completed?
  • 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
  • Note that synthetic active monitoring can use either an 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…
  • Active puts you in control – you test what you want to test…
  • Passive is great for measuring every user’s visit… from around the world, ensuring compliance to your SLA’s.
  • If you are using an Continuous Integration Build process part of your “build pipeline” should be performance testing, which can be automated the same way as your Regression Testing.
  • Web performance and measurement - UKCMG Conference 2011 - steve thair

    1. 1. Web Performance Optimisation 101 And how to measure it! Steve Thair Seriti Consulting @TheOpsMgr
    2. 2.  21yrs IT experience.  Started with www in 1998 (IIS3! Site Server 3!).  Web Architect @ BNP Paribas, CSFB etc  Web Operations Manager for www.totaljobs.com, www.tes.co.uk  Professional Services Manager @ www.siteconfidence.com  Seriti Consulting – specialising in web operations, management and Performance  e:stephen.thair@seriticonsulting.com  m:+44 7971 815 940  Twitter: http://twitter.com/TheOpsMgr  Blog: http://www.seriticonsulting.com/blog/  LinkedIn: http://uk.linkedin.com/in/stephenthair  Skype: seriti-steve About Me 30/01/2015(c) Seriti Consulting, 2011 2
    3. 3.  Defining “Web Performance”?  Why performance matters (to your business)  The “Rules” of Web Performance  Measuring Web Performance  The #WebPerf toolkit  Q&A Agenda 30/01/2015(c) Seriti Consulting, 2011 3
    4. 4. “The delay perceived by the website visitor between an action (e.g click) and a meaningful response” My Definition of Web Performance 30/01/2015(c) Seriti Consulting, 2011 4
    5. 5. Perception http://velocityconf.com/velocity2010/public/schedule/detail/13019 30/01/2015(c) Seriti Consulting, 2011 5
    6. 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!!! 30/01/2015(c) Seriti Consulting, 2011 6
    7. 7.  0.1 seconds gives the feeling of instantaneous response  1 second keeps the user's flow of thought seamless.  10 seconds keeps the user's attention  Jakob Neilsen. http://www.useit.com/alertbox/response-times.html So what is “Good Performance”? 30/01/2015(c) Seriti Consulting, 2011 7
    8. 8.  10 Seconds is too slow… (IMHO) “Initial render” < 750ms and be “Page Complete” < 3 seconds 3 Second Rule 30/01/2015(c) Seriti Consulting, 2011 8
    9. 9. Why Performance Matters 30/01/2015(c) Seriti Consulting, 2011 9
    10. 10. Bounce Rate goes up http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster- by-default-before-our-eyes/ 30/01/2015(c) Seriti Consulting, 2011 10
    11. 11. Page Views goes down http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster- by-default-before-our-eyes/ 30/01/2015(c) Seriti Consulting, 2011 11
    12. 12. Conversion Rate goes down http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster- by-default-before-our-eyes/ 30/01/2015(c) Seriti Consulting, 2011 12
    13. 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 30/01/2015(c) Seriti Consulting, 2011 13
    14. 14. Artificial 1s delay = 2.8% reduction in revenue/user (Bing)  http://assets.en.oreilly.com/1/event/29/The%20User %20and%20Business%20Impact%20of%20Server%20 Delays%2C%20Additional%20Bytes%2C%20and%20HT TP%20Chunking%20in%20Web%20Search%20Present ation.pptx Empirical Testing 30/01/2015(c) Seriti Consulting, 2011 14
    15. 15. So why does this matter to UK CMG? 30/01/2015(c) Seriti Consulting, 2011 15
    16. 16.  Traditional “performance optimisation”  Web Server Tuning  Application Server Tuning  Database Query Tuning  Code re-factoring  The focus was INSIDE the data centre…  Trying to optimise something that normally takes less that 200Ms (“data start time”) “Old School” 30/01/2015(c) Seriti Consulting, 2011 16
    17. 17. 80% of the page load time is spent outside the data centre!!! Steve Souders “High-Performance Websites” But… 30/01/2015(c) Seriti Consulting, 2011 17
    18. 18.  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” 30/01/2015(c) Seriti Consulting, 2011 18
    19. 19. TCP/IP HTTP Browser HTML CSS Javascript IMG The Building Blocks of #WebPerf 30/01/2015(c) Seriti Consulting, 2011 19
    20. 20.  Minimize HTTP Requests  Use a Content Delivery Network  Add an Expires or a Cache- Control Header  Gzip Components  Put StyleSheets at the Top  Put Scripts at the Bottom  Avoid CSS Expressions  Make JavaScript and CSS External  Reduce DNS Lookups  Minify JavaScript and CSS  Avoid Redirects  Remove Duplicate Scripts Yahoo’s Rules - ySlow  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 30/01/2015(c) Seriti Consulting, 2011 20
    21. 21.  Avoid bad requests  Avoid CSS expressions  Combine external CSS  Combine external JavaScript  Defer loading of JavaScript  Enable compression  Leverage browser caching  Leverage proxy caching  Minify CSS  Minify HTML  Minify JavaScript  Minimize request size  Minimize DNS lookups  Minimize redirects Google’s Rules - PageSpeed  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 selectorshttp://code.google.com/speed/page-speed/docs/rules_intro.html 30/01/2015(c) Seriti Consulting, 2011 21
    22. 22.  Reduce Page Size (<500Kb)  Enable (Gzip) Compression  Reduce the number of roundtrips (<40 per page…)  Structure the page (to improve render & download)  CSS First  Javascript last  Cache, Cache, Cache 5 Important Ones 30/01/2015(c) Seriti Consulting, 2011 22
    23. 23. Even if you apply just those 5 rules… Your page download times will drop by ~50% Low hanging fruit… 30/01/2015(c) Seriti Consulting, 2011 23
    24. 24. Seatwave did it… http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf 30/01/2015(c) Seriti Consulting, 2011 24
    25. 25.  Measuring what, exactly?  How to measure web performance?  When & where to measure?  “Active” vs “Passive”  Web Performance Measurement Automation 30/01/2015(c) Seriti Consulting, 2011 25 Measuring Web Performance
    26. 26.  Many different yardsticks to use  Data-start time (TTFB)  DOM load (Document Object Model)  Render Start (When does the page start to display)  Browser “OnLoad” event  “HTTP Load” – when network activity stops  What about AJAX events?  “Above the Fold” time (subjective user experience)  http://assets.en.oreilly.com/1/event/62/Above%20the%20Fold%20Time_%20Measuring%20Web%20Page%2 0Performance%20Visually%20Presentation.pdf 30/01/2015(c) Seriti Consulting, 2011 26 What are we measuring?
    27. 27. 30/01/2015(c) Seriti Consulting, 2011 27 When do we “stop the clock?”
    28. 28. 30/01/2015(c) Seriti Consulting, 2011 28
    29. 29. 1. JavaScript timing e.g. WebTuna 2. Browser plug-in e.g. HTTPwatch 3. Custom browser e.g. Webkit build 4. Proxy timing e.g. Fiddler proxy 5. Web Server Module e.g. APM solutions 6. Network-level e.g. Atomic Labs Pion 30/01/2015(c) Seriti Consulting, 2011 29 6 ways of measuring WebPerf
    30. 30. 30/01/2015(c) Seriti Consulting, 2011 30 Which is better? Metric JavaScript Browser Plug-in Custom Browser Proxy Debugger Web Server-level Network-level Example Product WebTuna HTTPWatch Webkit-variant Fiddler Proxy AppDynamics Pion "Blocked/Wait" No Yes Yes Yes No No DNS No Yes Yes Yes No No Connect No Yes Yes Yes No Yes Time to First Byte Partially Yes Yes Yes Partially Yes Initial Render No Yes No No No No DOMReady Partially Yes Yes No No No "Page/HTTP Complete" Partially Yes Yes Yes Partially Yes OnLoad Event Yes Yes Yes No No No JS Execution Time Partially Yes No No No No Affects Measurement Yes Yes Yes Yes Yes No
    31. 31.  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! 30/01/2015(c) Seriti Consulting, 2011 31 It depends on…
    32. 32.  Active (aka “Synthetic”) Monitoring  Agent “pings” the web page  Passive (aka “Real User”)  “listening in” to real user traffic  Complementary methods!  Best solution is Active & Passive  Not Active or Passive… 30/01/2015(c) Seriti Consulting, 2011 32 Active vs Passive
    33. 33. 30/01/2015(c) Seriti Consulting, 2011 33 Active – Site Confidence Performance Analyser
    34. 34. Active – Site Confidence Performance Analyser Cross Browser (Problem in IE?) Compare Competition UK E-Commerce Top 20 30/01/2015(c) Seriti Consulting, 2011 34
    35. 35. Passive – Webtuna Performance around the World SLA Compliance for all visitors 30/01/2015(c) Seriti Consulting, 2011 35
    36. 36.  Automated Regression testing with Selenium +  Dynatrace Ajax Edition +  www.slowslow.com 30/01/2015(c) Seriti Consulting, 2011 36 Web Performance Analysis as part of the SDLC
    37. 37.  Client-side analysis tools  External Website & Page analysers  Web Performance Analytics  Website Acceleration The #WebPerf Toolkit 30/01/2015(c) Seriti Consulting, 2011 37
    38. 38.  ySlow (Firefox)  PageSpeed (Firefox & Chrome)  Firebug (Firefox)  HTTPWatch (Firefox & IE)  Dynatrace Ajax Edition (IE & Firefox) Client-side Performance Tools 30/01/2015(c) Seriti Consulting, 2011 38
    39. 39.  WebPageTest.org- http://www.webpagetest.org/  SC Performance Analyser http://www.siteconfidence.com/services/site-wide-performance- analysis.aspx  GTMetrix - http://gtmetrix.com/  Yottaa - http://www.yottaa.com/  Smush It (image analysis) - http://www.smushit.com/ysmush.it/  RedBot (cache analysis)  Home (Aus) - http://redbot.org/  UK Node - http://redbot.jaoudestudios.com/ External Analysis Tools 30/01/2015(c) Seriti Consulting, 2011 39
    40. 40.  Atomic Labs Pion - www.atomiclabs.com  WebTuna – www.webtuna.com  Avicode (now Microsoft) – www.microsoft.com/systemcenter/en/us/avicode.aspx  Gomez “Actual Experience XF” – www.gomez.com  Tealeaf – www.tealeaf.com  Oracle RUEI - http://www.oracle.com/technetwork/oem/uxinsight/index. html  HP Real-user Monitor (RUM) - https://h10078.www1.hp.com/cda/hpms/display/main/hpms_content.jsp?zn=bto& cp=1-11-15-25^1438_4000_100__ Website Performance Analytics AKA Real-User monitoring 30/01/2015(c) Seriti Consulting, 2011 40
    41. 41.  Google Mod_pagespeed - http://code.google.com/speed/page- speed/docs/module.html  Aptimize – www.aptimize.com  Webo - http://www.webogroup.com/home/site-speedup/  Strangeloop - http://www.strangeloopnetworks.com/  Blaze IO - http://www.blaze.io/  DSA “Dynamic Site Acceleration” – Cotendo, Akamai, Limelight, CDNetworks etc Acceleration Solutions 30/01/2015(c) Seriti Consulting, 2011 41
    42. 42.  Performance Planet (WebPerf Blogs) - http://www.perfplanet.com/  WebPerformanceToday - http://www.webperformancetoday.com/  Steve Souder’s blog - http://www.stevesouders.com/blog/  TheOpsMgr Blog - http://www.seriticonsulting.com/blog/ Other Resources 30/01/2015(c) Seriti Consulting, 2011 42
    43. 43.  Join our London Web Performance Meetup  http://www.meetup.com/London-Web-Performance- Group/  THIS THURSDAY 19th May – 7pm – Leadenhall Mkts  Win a free pass to Velocity 2011 Conference (worth USD$2,000)  Follow us on Twitter @LDNWebPerf  #LDNWebPerf & #WebPerf 30/01/2015(c) Seriti Consulting, 2011 43 @LDNWebPerf User Group!
    44. 44. Questions? 30/01/2015(c) Seriti Consulting, 2011 44
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×