Web performance 101

Web Performance 101 Steve Thair Seriti Consulting @TheOpsMgr

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

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

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

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

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

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  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

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

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-life-cycle-faster-(c) Seriti Consulting, 2011 11 15/02/2011 by-default-before-our-eyes/

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/

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/

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

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

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

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

“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

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

“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

The Building Blocks of #WebPerf HTML CSS Javascript IMG Browser HTTP TCP/IP(c) Seriti Consulting, 2011 21 15/02/2011

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

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

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

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

Seatwave did it…(c) Seriti Consulting, 2011 26 15/02/2011 http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf

The #WebPerf Toolkit  Client-side analysis tools  External Website & Page analysers  Website Monitoring  Web Performance Analytics(c) Seriti Consulting, 2011 27 15/02/2011

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

Demo - Pagespeed(c) Seriti Consulting, 2011 29 15/02/2011

Analyse your site 500 pages for www.hitthetheatre.co.uk(c) Seriti Consulting, 2011 30 15/02/2011

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

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

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

Web Site Monitoring  Site Confidence  Axzona  Watchmouse  Pingdom  Gomez  Keynote  And many many many more…(c) Seriti Consulting, 2011 34 15/02/2011

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

Acceleration Solutions  Google Mod_pagespeed - http://code.google.com/speed/pagespeed/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

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

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 –  Web Performance Automation!(c) Seriti Consulting, 2011 39 15/02/2011

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

http://www.seriticonsulting.com	816
http://www.freeperformancesoftware.com	266
http://www.websiteperformance.org.uk	111
http://theopsmgr.seriticonsulting.com	33
http://blog.pinsop.com	19
http://www.londonwebperformance.org.uk	18
http://translate.googleusercontent.com	6
url_unknown	5
http://twitter.com	3
http://paper.li	3
http://techtowatch.tumblr.com	2
http://www.linkedin.com	2
https://twitter.com	1
http://www.londonwebperf.org.uk	1

Web performance 101

by Stephen Thair

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 1,286

Statistics