Web Performance Optimisation 101
And how to measure it!
Steve ThairSeriti Consulting
@TheOpsMgr
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
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
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
11/04/2023(c) Seriti Consulting, 2011 5
Perception
http://velocityconf.com/velocity2010/public/schedule/detail/13019
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!!!
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”?
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
11/04/2023(c) Seriti Consulting, 2011 9
Why Performance Matters
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
/
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
/
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
/
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
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
11/04/2023(c) Seriti Consulting, 2011 15
So why does this matter to UK
CMG?
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”
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…
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”
11/04/2023(c) Seriti Consulting, 2011 19
TCP/IP
HTTP
Browser
HTML CSS Javascript IMG
The Building Blocks of #WebPerf
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
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
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
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…
11/04/2023(c) Seriti Consulting, 2011 24
Seatwave did it…
http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf
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
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?
11/04/2023(c) Seriti Consulting, 2011 27
When do we “stop the clock?”
11/04/2023(c) Seriti Consulting, 2011 28
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
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…
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…
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
11/04/2023(c) Seriti Consulting, 2011 33
Active – Site Confidence Performance Analyser
11/04/2023(c) Seriti Consulting, 2011 34
Active – Site Confidence Performance Analyser
Cross Browser(Problem in IE?)
Compare CompetitionUK E-Commerce Top 20
11/04/2023(c) Seriti Consulting, 2011 35
Passive – Webtuna
Performance around the World SLA Compliance for all visitors
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
11/04/2023(c) Seriti Consulting, 2011 37
Client-side analysis tools External Website & Page
analysers Web Performance Analytics Website Acceleration
The #WebPerf Toolkit
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
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
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
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
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
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!
11/04/2023(c) Seriti Consulting, 2011 44
Questions?