Web performance and measurement - UKCMG Conference 2011 - steve thair
-
Upload
stephen-thair -
Category
Technology
-
view
2.549 -
download
2
description
Transcript of Web performance and measurement - UKCMG Conference 2011 - steve thair
![Page 1: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/1.jpg)
Web Performance Optimisation 101
And how to measure it!
Steve ThairSeriti Consulting
@TheOpsMgr
![Page 2: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/2.jpg)
11/04/2023(c) Seriti Consulting, 2011 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:[email protected] 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
![Page 3: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/3.jpg)
11/04/2023(c) Seriti Consulting, 2011 3
Defining “Web Performance”? Why performance matters (to your
business) The “Rules” of Web Performance Measuring Web Performance The #WebPerf toolkit Q&A
Agenda
![Page 4: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/4.jpg)
11/04/2023(c) Seriti Consulting, 2011 4
“The delay perceived by the website visitor between an
action (e.g click) and a meaningful response”
My Definition of Web Performance
![Page 5: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/5.jpg)
11/04/2023(c) Seriti Consulting, 2011 5
Perception
http://velocityconf.com/velocity2010/public/schedule/detail/13019
![Page 6: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/6.jpg)
11/04/2023(c) Seriti Consulting, 2011 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!!!
![Page 7: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/7.jpg)
11/04/2023(c) Seriti Consulting, 2011 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”?
![Page 8: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/8.jpg)
11/04/2023(c) Seriti Consulting, 2011 8
10 Seconds is too slow… (IMHO)
“Initial render” < 750ms and be
“Page Complete” < 3 seconds
3 Second Rule
![Page 9: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/9.jpg)
11/04/2023(c) Seriti Consulting, 2011 9
Why Performance Matters
![Page 10: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/10.jpg)
11/04/2023(c) Seriti Consulting, 2011 10
Bounce Rate goes up
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes
/
![Page 11: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/11.jpg)
11/04/2023(c) Seriti Consulting, 2011 11
Page Views goes down
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes
/
![Page 12: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/12.jpg)
11/04/2023(c) Seriti Consulting, 2011 12
Conversion Rate goes down
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes
/
![Page 13: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/13.jpg)
11/04/2023(c) Seriti Consulting, 2011 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
![Page 14: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/14.jpg)
11/04/2023(c) Seriti Consulting, 2011 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%20Delays%2C%20Additional%20Bytes%2C%20and%20HTTP%20Chunking%20in%20Web%20Search%20Presentation.pptx
Empirical Testing
![Page 15: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/15.jpg)
11/04/2023(c) Seriti Consulting, 2011 15
So why does this matter to UK
CMG?
![Page 16: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/16.jpg)
11/04/2023(c) Seriti Consulting, 2011 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”
![Page 17: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/17.jpg)
11/04/2023(c) Seriti Consulting, 2011 17
80% of the page load time is spent outside
the data centre!!!Steve Souders “High-Performance Websites”
But…
![Page 18: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/18.jpg)
11/04/2023(c) Seriti Consulting, 2011 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”
![Page 19: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/19.jpg)
11/04/2023(c) Seriti Consulting, 2011 19
TCP/IP
HTTP
Browser
HTML CSS Javascript IMG
The Building Blocks of #WebPerf
![Page 20: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/20.jpg)
11/04/2023(c) Seriti Consulting, 2011 20
Minimize HTTP Requests Use a Content Delivery N
etwork 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 El
ements No 404s Reduce Cookie Size Use Cookie-Free Domains for
Components Avoid Filters Do Not Scale Images in HTML Make favicon.ico Small & Cac
heablehttp://developer.yahoo.com/yslow/help/#guidelines
![Page 21: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/21.jpg)
11/04/2023(c) Seriti Consulting, 2011 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 he
ad Remove unused CSS Serve resources from a cons
istent 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
![Page 22: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/22.jpg)
11/04/2023(c) Seriti Consulting, 2011 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
![Page 23: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/23.jpg)
11/04/2023(c) Seriti Consulting, 2011 23
Even if you apply just those 5 rules…
Your page download times will drop by ~50%
Low hanging fruit…
![Page 24: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/24.jpg)
11/04/2023(c) Seriti Consulting, 2011 24
Seatwave did it…
http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf
![Page 25: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/25.jpg)
11/04/2023(c) Seriti Consulting, 2011 25
Measuring what, exactly? How to measure web performance? When & where to measure?
“Active” vs “Passive” Web Performance Measurement
Automation
Measuring Web Performance
![Page 26: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/26.jpg)
11/04/2023(c) Seriti Consulting, 2011 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%20Performance%20Visually%20Presentation.pdf
What are we measuring?
![Page 27: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/27.jpg)
11/04/2023(c) Seriti Consulting, 2011 27
When do we “stop the clock?”
![Page 28: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/28.jpg)
11/04/2023(c) Seriti Consulting, 2011 28
![Page 29: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/29.jpg)
11/04/2023(c) Seriti Consulting, 2011 29
1. JavaScript timing e.g. WebTuna2. Browser plug-in e.g. HTTPwatch3. Custom browser e.g. Webkit build4. Proxy timing e.g. Fiddler proxy5. Web Server Module e.g. APM
solutions6. Network-level e.g. Atomic Labs Pion
6 ways of measuring WebPerf
![Page 30: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/30.jpg)
11/04/2023(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
It
Depends…
![Page 31: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/31.jpg)
11/04/2023(c) Seriti Consulting, 2011 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!
It depends on…
![Page 32: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/32.jpg)
11/04/2023(c) Seriti Consulting, 2011 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…
Active vs Passive
![Page 33: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/33.jpg)
11/04/2023(c) Seriti Consulting, 2011 33
Active – Site Confidence Performance Analyser
![Page 34: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/34.jpg)
11/04/2023(c) Seriti Consulting, 2011 34
Active – Site Confidence Performance Analyser
Cross Browser(Problem in IE?)
Compare CompetitionUK E-Commerce Top 20
![Page 35: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/35.jpg)
11/04/2023(c) Seriti Consulting, 2011 35
Passive – Webtuna
Performance around the World SLA Compliance for all visitors
![Page 36: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/36.jpg)
11/04/2023(c) Seriti Consulting, 2011 36
Automated Regression testing with Selenium
+ Dynatrace Ajax
Edition
+ www.slowslow.com
Web Performance Analysis as part of the SDLC
![Page 37: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/37.jpg)
11/04/2023(c) Seriti Consulting, 2011 37
Client-side analysis tools External Website & Page
analysers Web Performance Analytics Website Acceleration
The #WebPerf Toolkit
![Page 38: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/38.jpg)
11/04/2023(c) Seriti Consulting, 2011 38
ySlow (Firefox) PageSpeed (Firefox & Chrome) Firebug (Firefox) HTTPWatch (Firefox & IE) Dynatrace Ajax Edition (IE & Firefox)
Client-side Performance Tools
![Page 39: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/39.jpg)
11/04/2023(c) Seriti Consulting, 2011 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
![Page 40: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/40.jpg)
11/04/2023(c) Seriti Consulting, 2011 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 AnalyticsAKA Real-User monitoring
![Page 41: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/41.jpg)
11/04/2023(c) Seriti Consulting, 2011 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
![Page 42: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/42.jpg)
11/04/2023(c) Seriti Consulting, 2011 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
![Page 43: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/43.jpg)
11/04/2023(c) Seriti Consulting, 2011 43
Join our London Web Performance Meetup http://www.meetup.com/London-Web-Performa
nce-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
@LDNWebPerf User Group!
![Page 44: Web performance and measurement - UKCMG Conference 2011 - steve thair](https://reader035.fdocuments.in/reader035/viewer/2022062307/5549e1d0b4c90518488b481b/html5/thumbnails/44.jpg)
11/04/2023(c) Seriti Consulting, 2011 44
Questions?