The slides from my presentation on web performance and measurement at the UK CMG conference in May 2011. It incorporates some of my slides from the earlier Web Performance 101 presentation with new material focussing on measuring web performance

1. Web Performance Optimisation 101
And how to measure it!
Steve Thair
Seriti Consulting
@TheOpsMgr

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:stephen.thair@seriticonsulting.com
 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
30/01/2015(c) Seriti Consulting, 2011 2

3.  Defining “Web Performance”?
 Why performance matters (to your business)
 The “Rules” of Web Performance
 Measuring Web Performance
 The #WebPerf toolkit
 Q&A
Agenda
30/01/2015(c) Seriti Consulting, 2011 3

4. “The delay perceived by the
website visitor between an
action (e.g click) and a
meaningful response”
My Definition of Web Performance
30/01/2015(c) Seriti Consulting, 2011 4

5. Perception
http://velocityconf.com/velocity2010/public/schedule/detail/13019 30/01/2015(c) Seriti Consulting, 2011 5

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!!!
30/01/2015(c) Seriti Consulting, 2011 6

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”?
30/01/2015(c) Seriti Consulting, 2011 7

8.  10 Seconds is too slow… (IMHO)
“Initial render” < 750ms and be
“Page Complete” < 3 seconds
3 Second Rule
30/01/2015(c) Seriti Consulting, 2011 8

9. Why Performance Matters
30/01/2015(c) Seriti Consulting, 2011 9

10. Bounce Rate goes up
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-
by-default-before-our-eyes/ 30/01/2015(c) Seriti Consulting, 2011 10

11. Page Views goes down
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-
by-default-before-our-eyes/ 30/01/2015(c) Seriti Consulting, 2011 11

12. Conversion Rate goes down
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-
by-default-before-our-eyes/ 30/01/2015(c) Seriti Consulting, 2011 12

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
30/01/2015(c) Seriti Consulting, 2011 13

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%20
Delays%2C%20Additional%20Bytes%2C%20and%20HT
TP%20Chunking%20in%20Web%20Search%20Present
ation.pptx
Empirical Testing
30/01/2015(c) Seriti Consulting, 2011 14

15. So why does this
matter to UK CMG?
30/01/2015(c) Seriti Consulting, 2011 15

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”
30/01/2015(c) Seriti Consulting, 2011 16

17. 80% of the page load time
is spent outside the data
centre!!!
Steve Souders “High-Performance Websites”
But…
30/01/2015(c) Seriti Consulting, 2011 17

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”
30/01/2015(c) Seriti Consulting, 2011 18

19. TCP/IP
HTTP
Browser
HTML CSS Javascript IMG
The Building Blocks of #WebPerf
30/01/2015(c) Seriti Consulting, 2011 19

20.  Minimize HTTP Requests
 Use a Content Delivery Network
 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
Elements
 No 404s
 Reduce Cookie Size
 Use Cookie-Free Domains for
Components
 Avoid Filters
 Do Not Scale Images in HTML
 Make favicon.ico Small & Cacheable
http://developer.yahoo.com/yslow/help/#guidelines
30/01/2015(c) Seriti Consulting, 2011 20

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 head
 Remove unused CSS
 Serve resources from a consistent
URL
 Serve scaled images
 Serve static content from a
cookieless domain
 Specify a character set early
 Specify image dimensions
 Use efficient CSS selectorshttp://code.google.com/speed/page-speed/docs/rules_intro.html
30/01/2015(c) Seriti Consulting, 2011 21

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
30/01/2015(c) Seriti Consulting, 2011 22

23. Even if you apply just those
5 rules…
Your page download times
will drop by ~50%
Low hanging fruit…
30/01/2015(c) Seriti Consulting, 2011 23

24. Seatwave did it…
http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf
30/01/2015(c) Seriti Consulting, 2011 24

25.  Measuring what, exactly?
 How to measure web performance?
 When & where to measure?
 “Active” vs “Passive”
 Web Performance Measurement Automation
30/01/2015(c) Seriti Consulting, 2011 25
Measuring Web Performance

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%2
0Performance%20Visually%20Presentation.pdf
30/01/2015(c) Seriti Consulting, 2011 26
What are we measuring?

27. 30/01/2015(c) Seriti Consulting, 2011 27
When do we “stop the clock?”

28. 30/01/2015(c) Seriti Consulting, 2011 28

29. 1. JavaScript timing e.g. WebTuna
2. Browser plug-in e.g. HTTPwatch
3. Custom browser e.g. Webkit build
4. Proxy timing e.g. Fiddler proxy
5. Web Server Module e.g. APM solutions
6. Network-level e.g. Atomic Labs Pion
30/01/2015(c) Seriti Consulting, 2011 29
6 ways of measuring WebPerf

30. 30/01/2015(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

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!
30/01/2015(c) Seriti Consulting, 2011 31
It depends on…

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…
30/01/2015(c) Seriti Consulting, 2011 32
Active vs Passive

33. 30/01/2015(c) Seriti Consulting, 2011 33
Active – Site Confidence
Performance Analyser

34. Active – Site Confidence
Performance Analyser
Cross Browser
(Problem in IE?)
Compare Competition
UK E-Commerce Top 20
30/01/2015(c) Seriti Consulting, 2011 34

35. Passive – Webtuna
Performance around the World SLA Compliance for all visitors
30/01/2015(c) Seriti Consulting, 2011 35

36.  Automated
Regression testing
with Selenium
+
 Dynatrace Ajax Edition
+
 www.slowslow.com
30/01/2015(c) Seriti Consulting, 2011 36
Web Performance Analysis
as part of the SDLC

37.  Client-side analysis tools
 External Website & Page analysers
 Web Performance Analytics
 Website Acceleration
The #WebPerf Toolkit
30/01/2015(c) Seriti Consulting, 2011 37

38.  ySlow (Firefox)
 PageSpeed (Firefox & Chrome)
 Firebug (Firefox)
 HTTPWatch (Firefox & IE)
 Dynatrace Ajax Edition (IE & Firefox)
Client-side Performance Tools
30/01/2015(c) Seriti Consulting, 2011 38

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
30/01/2015(c) Seriti Consulting, 2011 39

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 Analytics
AKA Real-User monitoring
30/01/2015(c) Seriti Consulting, 2011 40

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
30/01/2015(c) Seriti Consulting, 2011 41

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
30/01/2015(c) Seriti Consulting, 2011 42

43.  Join our London Web Performance Meetup
 http://www.meetup.com/London-Web-Performance-
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
30/01/2015(c) Seriti Consulting, 2011 43
@LDNWebPerf User Group!

44. Questions?
30/01/2015(c) Seriti Consulting, 2011 44