Web performance 101

  • 8,455 views
Uploaded on

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

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.

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
8,455
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
218
Comments
0
Likes
14

Embeds 0

No embeds

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

Transcript

  • 1. Web Performance 101 Steve Thair Seriti Consulting @TheOpsMgr
  • 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. 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. Perception http://velocityconf.com/velocity2010/public/schedule/detail/13019(c) Seriti Consulting, 2011 4 15/02/2011
  • 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. 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. When do we “stop the clock?”(c) Seriti Consulting, 2011 7 15/02/2011
  • 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. 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. Why Performance Matters(c) Seriti Consulting, 2011 10 15/02/2011
  • 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. 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. 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. 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. 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. 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. 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. “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. 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. “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. The Building Blocks of #WebPerf HTML CSS Javascript IMG Browser HTTP TCP/IP(c) Seriti Consulting, 2011 21 15/02/2011
  • 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. 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. 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. 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. Seatwave did it…(c) Seriti Consulting, 2011 26 15/02/2011 http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf
  • 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. 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. Demo - Pagespeed(c) Seriti Consulting, 2011 29 15/02/2011
  • 30. Analyse your site 500 pages for www.hitthetheatre.co.uk(c) Seriti Consulting, 2011 30 15/02/2011
  • 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. 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. 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. Web Site Monitoring  Site Confidence  Axzona  Watchmouse  Pingdom  Gomez  Keynote  And many many many more…(c) Seriti Consulting, 2011 34 15/02/2011
  • 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. 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. 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. Questions?(c) Seriti Consulting, 2011 38 15/02/2011
  • 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. 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