Your SlideShare is downloading. ×
0
Web Performance 101        Steve Thair      Seriti Consulting       @TheOpsMgr
Agenda              Defining “Web Performance”?              Why performance matters (to your business)              Th...
My Definition of Web Performance                          “The delay perceived by the                          website vis...
Perception                        http://velocityconf.com/velocity2010/public/schedule/detail/13019(c) Seriti Consulting, ...
Subtle perceptions…              Perception of               “Progress Bar”               delay depends on:             ...
Web Stress!!!              “Brain wave analysis from the               experiment revealed that               participant...
When do we “stop the clock?”(c) Seriti Consulting, 2011   7              15/02/2011
So what is “Good Performance”?              0.1 seconds gives the feeling of instantaneous               response        ...
3 Second Rule              10 Seconds is too slow… (IMHO)             “Initial render” < 750ms and be             “Page...
Why Performance Matters(c) Seriti Consulting, 2011       10             15/02/2011
Bounce Rate goes up                              http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-...
Page Views goes down                              http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization...
Conversion Rate goes down                              http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimiz...
In Summary…              You are losing Visitors              You are losing Sales              You are losing Ad-reven...
3rd Party Research              “A 1-second delay in page load time               equals 11% fewer page views, a 16%     ...
Empirical Testing              Artificial 1s delay =               2.8% reduction in               revenue/user (Bing)   ...
And who gets the blame?              “more than three quarters (77%) of European               consumers blame either web...
“Old School”              Traditional “performance optimisation”                        Web Server Tuning               ...
But…                 80% of the page load time                  is spent outside the data                           centr...
“Front End Engineering”              Focus on the “front end”              Optimise the interaction               betwee...
The Building Blocks of #WebPerf                     HTML     CSS          Javascript   IMG                                ...
Yahoo’s Rules              Minimize HTTP Requests                                  Configure ETags              Use a C...
Google’s Rules                  Avoid bad requests                                   Minimize redirects                ...
5 Important Ones                  Reduce Page Size (<500Kb)                  Enable (Gzip) Compression                 ...
Low hanging fruit…                Even if you apply just those                          5 rules…                Your page ...
Seatwave did it…(c) Seriti Consulting, 2011                                  26                                    15/02/2...
The #WebPerf Toolkit              Client-side analysis tools              External Website & Page analysers             ...
Client-side                  ySlow (Firefox)                  PageSpeed (Firefox)                  Firebug (Firefox)   ...
Demo - Pagespeed(c) Seriti Consulting, 2011          29          15/02/2011
Analyse your site                               500 pages for www.hitthetheatre.co.uk(c) Seriti Consulting, 2011          ...
Drill down to the waterfall…                               Analysis the waterfall graph                                 ...
And keep going to the HTTP Headers                               Not Gzip’d                               No Expires or ...
External Analysis Tools              WebPageTest.org- http://www.webpagetest.org/              SC Performance Analyser  ...
Web Site Monitoring                  Site Confidence                  Axzona                  Watchmouse              ...
Website Performance Analytics                    AKA Real-User monitoring              Atomic Labs Pion - www.atomiclabs....
Acceleration Solutions              Google Mod_pagespeed -               http://code.google.com/speed/page-              ...
Other Resources              Performance Planet (WebPerf Blogs) - http://www.perfplanet.com/              WebPerformance...
Questions?(c) Seriti Consulting, 2011       38       15/02/2011
Don’t Forget…              Please review the Meetup on Meetup.com              Our next Meetup in WED March 15th –      ...
About Me              21yrs IT experience.                        Started with www in 1998 (IIS3! Site Server 3!).      ...
Upcoming SlideShare
Loading in...5
×

Web performance 101

8,873

Published on

Web Performance 101 presentation from Feb 2011 meetup, presented by Steve Thair from Seriti Consulting.

Covers the basics of why web performance is important for your business, the key "rules" and the tools that are available in the market today.

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

No Downloads
Views
Total Views
8,873
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
233
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "Web performance 101"

  1. 1. Web Performance 101 Steve Thair Seriti Consulting @TheOpsMgr
  2. 2. Agenda  Defining “Web Performance”?  Why performance matters (to your business)  The “Building Blocks” of #WebPerf  The “Rules” of Web Performance  The #WebPerf Toolkit  Q&A(c) Seriti Consulting, 2011 2 15/02/2011
  3. 3. My Definition of Web Performance “The delay perceived by the website visitor between an action (e.g click) and a meaningful response”(c) Seriti Consulting, 2011 3 15/02/2011
  4. 4. Perception http://velocityconf.com/velocity2010/public/schedule/detail/13019(c) Seriti Consulting, 2011 4 15/02/2011
  5. 5. Subtle perceptions…  Perception of “Progress Bar” delay depends on:  How the bar “fills in”  Delay before Bar appears  http://chrisharrison.net/projects/progres sbars/ProgBarHarrison.pdf  http://survey.jsfiddle.net/files/download /PerceivingAjaxPerformance.pdf(c) Seriti Consulting, 2011 5 15/02/2011
  6. 6. Web Stress!!!  “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(c) Seriti Consulting, 2011 6 15/02/2011
  7. 7. When do we “stop the clock?”(c) Seriti Consulting, 2011 7 15/02/2011
  8. 8. So what is “Good Performance”?  0.1 seconds gives the feeling of instantaneous response  1 second keeps the users flow of thought seamless.  10 seconds keeps the users attention  Jakob Neilsen. http://www.useit.com/alertbox/response-times.html(c) Seriti Consulting, 2011 8 15/02/2011
  9. 9. 3 Second Rule  10 Seconds is too slow… (IMHO) “Initial render” < 750ms and be “Page Complete” < 3 seconds(c) Seriti Consulting, 2011 9 15/02/2011
  10. 10. Why Performance Matters(c) Seriti Consulting, 2011 10 15/02/2011
  11. 11. Bounce Rate goes up http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-(c) Seriti Consulting, 2011 11 15/02/2011 by-default-before-our-eyes/
  12. 12. Page Views goes down http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-(c) Seriti Consulting, 2011 12 15/02/2011 by-default-before-our-eyes/
  13. 13. Conversion Rate goes down http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-(c) Seriti Consulting, 2011 13 15/02/2011 by-default-before-our-eyes/
  14. 14. In Summary…  You are losing Visitors  You are losing Sales  You are losing Ad-revenue  You are wasting SEO/SEM effort  Spending £££ on bandwidth and servers(c) Seriti Consulting, 2011 Still not convinced? 14 15/02/2011
  15. 15. 3rd Party Research  “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(c) Seriti Consulting, 2011 15 15/02/2011
  16. 16. Empirical Testing  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(c) Seriti Consulting, 2011 16 15/02/2011
  17. 17. And who gets the blame?  “more than three quarters (77%) of European consumers blame either website owner or the website host (which is in any case chosen by the website owner) when an online application fails. It also revealed that if consumers encounter problems online, 40% will go to a rival website and 37% will abandon the transaction entirely. Only 18% said they would report a problem to a company…”  http://www.ca.com/Files/SupportingPieces/ca_apm_2009_web_stress_i ndex_212073.pdf(c) Seriti Consulting, 2011 17 15/02/2011
  18. 18. “Old School”  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”)(c) Seriti Consulting, 2011 18 15/02/2011
  19. 19. But… 80% of the page load time is spent outside the data centre!!! Steve Souders “High-Performance Websites”(c) Seriti Consulting, 2011 19 15/02/2011
  20. 20. “Front End Engineering”  Focus on the “front end”  Optimise the interaction between the browser and the data-centre  And how the browser processes the client-side objects(c) Seriti Consulting, 2011 20 15/02/2011
  21. 21. The Building Blocks of #WebPerf HTML CSS Javascript IMG Browser HTTP TCP/IP(c) Seriti Consulting, 2011 21 15/02/2011
  22. 22. Yahoo’s Rules  Minimize HTTP Requests  Configure ETags  Use a Content Delivery Network  Make AJAX Cacheable  Add an Expires or a Cache- Control Header  Use GET for AJAX Requests  Gzip Components  Reduce the Number of DOM  Put StyleSheets at the Top Elements  Put Scripts at the Bottom  No 404s  Avoid CSS Expressions  Reduce Cookie Size  Make JavaScript and CSS External  Use Cookie-Free Domains for  Reduce DNS Lookups Components  Minify JavaScript and CSS  Avoid Filters  Avoid Redirects  Do Not Scale Images in HTML  Remove Duplicate Scripts  Make favicon.ico Small & Cacheable(c) Seriti Consulting, 2011 22 15/02/2011 http://developer.yahoo.com/yslow/help/#guidelines
  23. 23. Google’s Rules  Avoid bad requests  Minimize redirects  Avoid CSS expressions  Optimize images  Combine external CSS  Optimize the order of styles and  Combine external JavaScript scripts  Defer loading of JavaScript  Parallelize downloads across  Enable compression hostnames  Leverage browser caching  Put CSS in the document head  Leverage proxy caching  Remove unused CSS  Minify CSS  Serve resources from a consistent URL  Minify HTML  Serve scaled images  Minify JavaScript  Serve static content from a  Minimize request size cookieless domain  Minimize DNS lookups  Specify a character set early  Minimize redirects  Specify image dimensions(c) Seriti Consulting, 2011 23 http://code.google.com/speed/page-speed/docs/rules_intro.html  Use efficient CSS selectors 15/02/2011
  24. 24. 5 Important Ones  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(c) Seriti Consulting, 2011 24 15/02/2011
  25. 25. Low hanging fruit… Even if you apply just those 5 rules… Your page download times will drop by ~50%(c) Seriti Consulting, 2011 25 15/02/2011
  26. 26. Seatwave did it…(c) Seriti Consulting, 2011 26 15/02/2011 http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf
  27. 27. The #WebPerf Toolkit  Client-side analysis tools  External Website & Page analysers  Website Monitoring  Web Performance Analytics(c) Seriti Consulting, 2011 27 15/02/2011
  28. 28. Client-side  ySlow (Firefox)  PageSpeed (Firefox)  Firebug (Firefox)  HTTPWatch (Firefox & IE)  Dynatrace Ajax Edition (IE only, Firefox beta)(c) Seriti Consulting, 2011 28 15/02/2011
  29. 29. Demo - Pagespeed(c) Seriti Consulting, 2011 29 15/02/2011
  30. 30. Analyse your site 500 pages for www.hitthetheatre.co.uk(c) Seriti Consulting, 2011 30 15/02/2011
  31. 31. Drill down to the waterfall…  Analysis the waterfall graph  Look for render start time  Script blocking  Object blocking (# connections)  # objects  Page too large!(c) Seriti Consulting, 2011 31 15/02/2011
  32. 32. And keep going to the HTTP Headers  Not Gzip’d  No Expires or Cache Control Headers  2 seconds Keep-Alive??  eTag format?(c) Seriti Consulting, 2011 32 15/02/2011
  33. 33. External Analysis Tools  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/(c) Seriti Consulting, 2011 33 15/02/2011
  34. 34. Web Site Monitoring  Site Confidence  Axzona  Watchmouse  Pingdom  Gomez  Keynote  And many many many more…(c) Seriti Consulting, 2011 34 15/02/2011
  35. 35. Website Performance Analytics AKA Real-User monitoring  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__(c) Seriti Consulting, 2011 35 15/02/2011
  36. 36. Acceleration Solutions  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(c) Seriti Consulting, 2011 36 15/02/2011
  37. 37. Other Resources  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://theopsmgr.seriticonsulting.com/  UK Broadband stats - http://www.broadbandspeedchecker.co.uk/speed_ratings.aspx  Browser Usage Stats - http://www.w3counter.com/globalstats.php(c) Seriti Consulting, 2011 37 15/02/2011
  38. 38. Questions?(c) Seriti Consulting, 2011 38 15/02/2011
  39. 39. Don’t Forget…  Please review the Meetup on Meetup.com  Our next Meetup in WED March 15th –  Web Performance Automation!(c) Seriti Consulting, 2011 39 15/02/2011
  40. 40. About Me  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://theopsmgr.seriticonsulting.com/  LinkedIn: http://uk.linkedin.com/in/stephenthair  Skype: seriti-steve(c) Seriti Consulting, 2011 40 15/02/2011
  1. A particular slide catching your eye?

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

×