SlideShare a Scribd company logo

Web performance and measurement - UKCMG Conference 2011 - steve thair

Download as PPTX, PDF
••
Stephen Thair, profile picture
Stephen Thair

The document provides an overview of web performance optimization, emphasizing the importance of fast response times for user engagement and satisfaction. It discusses strategies for measuring web performance, including both active and passive methods, and outlines guidelines for optimizing website loading times. Key recommendations and tools for improving performance, such as minimizing HTTP requests and leveraging caching, are also included.

TechnologyDesign
Related topics:
Web Performance Tips
1 of 44
Downloaded 60 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Web Performance Optimisation 101 And how to measure it! Steve Thair Seriti Consulting @TheOpsMgr
 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
 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
“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
Perception http://velocityconf.com/velocity2010/public/schedule/detail/13019 30/01/2015(c) Seriti Consulting, 2011 5
 “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
 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
 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
Why Performance Matters 30/01/2015(c) Seriti Consulting, 2011 9
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
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
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
“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
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
So why does this matter to UK CMG? 30/01/2015(c) Seriti Consulting, 2011 15
 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
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
 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
TCP/IP HTTP Browser HTML CSS Javascript IMG The Building Blocks of #WebPerf 30/01/2015(c) Seriti Consulting, 2011 19
 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
 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
 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
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
Seatwave did it… http://files.meetup.com/1724878/SeatwaveWebOpt_Public_20110121.pdf 30/01/2015(c) Seriti Consulting, 2011 24
 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
 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?
30/01/2015(c) Seriti Consulting, 2011 27 When do we “stop the clock?”
30/01/2015(c) Seriti Consulting, 2011 28
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/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
 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…
 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
30/01/2015(c) Seriti Consulting, 2011 33 Active – Site Confidence Performance Analyser
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
Passive – Webtuna Performance around the World SLA Compliance for all visitors 30/01/2015(c) Seriti Consulting, 2011 35
 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
 Client-side analysis tools  External Website & Page analysers  Web Performance Analytics  Website Acceleration The #WebPerf Toolkit 30/01/2015(c) Seriti Consulting, 2011 37
 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
 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
 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
 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
 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
 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!
Questions? 30/01/2015(c) Seriti Consulting, 2011 44

More Related Content

PPTX
Measuring mobile performance (@LDNWebPerf Version)
Stephen Thair
 
PPTX
Optimisation and performance in Android
Rakesh Jha
 
PDF
Wordcamp 2014 Performance Optimisation av Erlend Eide
Torbjørn Seierstad
 
PPTX
Web Performance Optimisation at times.co.uk
Stephen Thair
 
PDF
[CXL Live 16] Opening Keynote by Peep Laja
CXL
 
PDF
[CXL Live 16] Growth Hacking BS: Fixing Marketing One Truth at a Time by Morg...
CXL
 
PDF
[CXL Live 16] You Can’t Make This Stuff Up by Alex Harris
CXL
 
PDF
Mobile Web Stress: Understanding the Neurological Impact of Poor Performance
Radware
 
Measuring mobile performance (@LDNWebPerf Version)
Stephen Thair
 
Optimisation and performance in Android
Rakesh Jha
 
Wordcamp 2014 Performance Optimisation av Erlend Eide
Torbjørn Seierstad
 
Web Performance Optimisation at times.co.uk
Stephen Thair
 
[CXL Live 16] Opening Keynote by Peep Laja
CXL
 
[CXL Live 16] Growth Hacking BS: Fixing Marketing One Truth at a Time by Morg...
CXL
 
[CXL Live 16] You Can’t Make This Stuff Up by Alex Harris
CXL
 
Mobile Web Stress: Understanding the Neurological Impact of Poor Performance
Radware
 

Viewers also liked (20)

PDF
User Experience + A/B Testing: o design focado na conversão
Maria Lígia Klokner
 
PDF
[CXL Live 16] Beyond Test-by-Test Results: CRO Metrics for Performance & Insi...
CXL
 
PDF
[CXL Live 16] How to Utilize Your Test Capacity? by Ton Wesseling
CXL
 
PDF
[CXL Live 16] SaaS Optimization - Effective Metrics, Process and Hacks by Ste...
CXL
 
PDF
How to Successfully Run Your First Website A/B Test
Kissmetrics on SlideShare
 
PDF
[CXL Live 16] Persuasive Journey Mapping by Bart Schutz
CXL
 
PDF
[CXL Live 16] Fight Back Against Back by Rand Fishkin
CXL
 
PDF
[CXL Live 16] How to Boost Conversions with 1:1 Personalization by Karl Wirth
CXL
 
PDF
[CXL Live 16] The Grand Unified Theory of Conversion Optimization by John Ekman
CXL
 
PDF
[CXL Live 16] From WTF to Hell Yes - How to Come Up With Copy That Persuades ...
CXL
 
PDF
[CXL Live 16] How to Create Landing Pages That Address the Emotional Needs of...
CXL
 
PDF
[CXL Live 16] Motivational Chemistry and Susceptibility to Digital Persuasion...
CXL
 
PDF
[CXL Live 16] How to Give Your Data an Annual Checkup by Annie Cushing
CXL
 
PPTX
Minimum viable product
Sofian Hadiwijaya
 
PDF
Measuring Web Performance
Dave Olsen
 
PDF
Tag-it 2016 slides: UX + A/B Testing at Booking.com: Design focused on conver...
Maria Lígia Klokner
 
PDF
[CXL Live 16] How To Present Your Testing Results to Get Results by Lea Pica
CXL
 
PDF
[CXL Live 16] Optimizing Retention - The Silent Killer and King of Growth by ...
CXL
 
PDF
Performance tuning and optimization (ppt)
Harish Chand
 
PDF
[CXL Live 16] Neuro-Persuasion - Brain-Based Strategies for Online Marketers ...
CXL
 
User Experience + A/B Testing: o design focado na conversão
Maria Lígia Klokner
 
[CXL Live 16] Beyond Test-by-Test Results: CRO Metrics for Performance & Insi...
CXL
 
[CXL Live 16] How to Utilize Your Test Capacity? by Ton Wesseling
CXL
 
[CXL Live 16] SaaS Optimization - Effective Metrics, Process and Hacks by Ste...
CXL
 
How to Successfully Run Your First Website A/B Test
Kissmetrics on SlideShare
 
[CXL Live 16] Persuasive Journey Mapping by Bart Schutz
CXL
 
[CXL Live 16] Fight Back Against Back by Rand Fishkin
CXL
 
[CXL Live 16] How to Boost Conversions with 1:1 Personalization by Karl Wirth
CXL
 
[CXL Live 16] The Grand Unified Theory of Conversion Optimization by John Ekman
CXL
 
[CXL Live 16] From WTF to Hell Yes - How to Come Up With Copy That Persuades ...
CXL
 
[CXL Live 16] How to Create Landing Pages That Address the Emotional Needs of...
CXL
 
[CXL Live 16] Motivational Chemistry and Susceptibility to Digital Persuasion...
CXL
 
[CXL Live 16] How to Give Your Data an Annual Checkup by Annie Cushing
CXL
 
Minimum viable product
Sofian Hadiwijaya
 
Measuring Web Performance
Dave Olsen
 
Tag-it 2016 slides: UX + A/B Testing at Booking.com: Design focused on conver...
Maria Lígia Klokner
 
[CXL Live 16] How To Present Your Testing Results to Get Results by Lea Pica
CXL
 
[CXL Live 16] Optimizing Retention - The Silent Killer and King of Growth by ...
CXL
 
Performance tuning and optimization (ppt)
Harish Chand
 
[CXL Live 16] Neuro-Persuasion - Brain-Based Strategies for Online Marketers ...
CXL
 
Ad

Similar to Web performance and measurement - UKCMG Conference 2011 - steve thair (20)

PPTX
Practical web performance - Site Confidence Web Performance Seminar
Stephen Thair
 
PDF
Web performance 101
Stephen Thair
 
PPTX
Metrics, metrics everywhere (but where the heck do you start?)
Tammy Everts
 
PPTX
Metrics, Metrics Everywhere (but where the heck do you start?)
SOASTA
 
PPTX
Metrics, Metrics Everywhere (but where the heck do you start?)
SOASTA
 
PDF
Web performance: beyond load testing
SergeyChernyshev
 
PDF
Tips tricks deliver_high_performing_secure_web_pages
Aditya Singh
 
ODP
Web performance101
Javier Turégano Molina
 
PDF
Web Performance Optimization (WPO)
Betclic Everest Group Tech Team
 
PDF
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Holger Bartel
 
PPTX
Browser Based Performance Testing and Tuning
Bala Murali Krishna Kanchukambala
 
PDF
MeasureWorks - Windesheim Almere - Why Performance matters?
MeasureWorks
 
PPTX
High Performance Web/Mobile Pages - Automation
soheil416
 
PPTX
Monitoring web application response times, a new approach
Mark Friedman
 
PPTX
Why is this ASP.NET web app running slowly?
Mark Friedman
 
PPTX
Metrics, metrics everywhere (but where the heck do you start?)
Tammy Everts
 
PPTX
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Cliff Crocker
 
PPTX
Metrics, metrics everywhere (but where the heck do you start?)
SOASTA
 
PPTX
Web Page Speed - A Most Important Feature
Scott Germaise
 
PDF
Client-Side Performance Testing
Anand Bagmar
 
Practical web performance - Site Confidence Web Performance Seminar
Stephen Thair
 
Web performance 101
Stephen Thair
 
Metrics, metrics everywhere (but where the heck do you start?)
Tammy Everts
 
Metrics, Metrics Everywhere (but where the heck do you start?)
SOASTA
 
Metrics, Metrics Everywhere (but where the heck do you start?)
SOASTA
 
Web performance: beyond load testing
SergeyChernyshev
 
Tips tricks deliver_high_performing_secure_web_pages
Aditya Singh
 
Web performance101
Javier Turégano Molina
 
Web Performance Optimization (WPO)
Betclic Everest Group Tech Team
 
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Holger Bartel
 
Browser Based Performance Testing and Tuning
Bala Murali Krishna Kanchukambala
 
MeasureWorks - Windesheim Almere - Why Performance matters?
MeasureWorks
 
High Performance Web/Mobile Pages - Automation
soheil416
 
Monitoring web application response times, a new approach
Mark Friedman
 
Why is this ASP.NET web app running slowly?
Mark Friedman
 
Metrics, metrics everywhere (but where the heck do you start?)
Tammy Everts
 
Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)
Cliff Crocker
 
Metrics, metrics everywhere (but where the heck do you start?)
SOASTA
 
Web Page Speed - A Most Important Feature
Scott Germaise
 
Client-Side Performance Testing
Anand Bagmar
 
Ad

More from Stephen Thair (12)

PPTX
London web performance WPO Lessons from the field June 2013
Stephen Thair
 
PPTX
Is the current model of load testing broken ukcmg - steve thair
Stephen Thair
 
PPTX
Continuous Integration - A Performance Engineer's Tale
Stephen Thair
 
PPTX
Measuring web performance. Velocity EU 2011
Stephen Thair
 
PDF
Velocity 2011 Feedback - architecture, statistics and SPDY
Stephen Thair
 
PPTX
7 lessons from velocity 2011 (Meetup feedback session for London Web Performa...
Stephen Thair
 
PPTX
Measuring Mobile Web Performance v2
Stephen Thair
 
PDF
Performance automation 101 @LDNWebPerf MickMcGuinness
Stephen Thair
 
PDF
Performance testing automation with Dynatrace @LDNWebPerf - AndreasGrabner
Stephen Thair
 
PDF
Seatwave Web Peformance Optimisation Case Study
Stephen Thair
 
PPTX
Configuration Management - The Operations Managers View
Stephen Thair
 
PPTX
Test Expo 2009 Site Confidence &amp; Seriti Consulting Load Test Case Study
Stephen Thair
 
London web performance WPO Lessons from the field June 2013
Stephen Thair
 
Is the current model of load testing broken ukcmg - steve thair
Stephen Thair
 
Continuous Integration - A Performance Engineer's Tale
Stephen Thair
 
Measuring web performance. Velocity EU 2011
Stephen Thair
 
Velocity 2011 Feedback - architecture, statistics and SPDY
Stephen Thair
 
7 lessons from velocity 2011 (Meetup feedback session for London Web Performa...
Stephen Thair
 
Measuring Mobile Web Performance v2
Stephen Thair
 
Performance automation 101 @LDNWebPerf MickMcGuinness
Stephen Thair
 
Performance testing automation with Dynatrace @LDNWebPerf - AndreasGrabner
Stephen Thair
 
Seatwave Web Peformance Optimisation Case Study
Stephen Thair
 
Configuration Management - The Operations Managers View
Stephen Thair
 
Test Expo 2009 Site Confidence &amp; Seriti Consulting Load Test Case Study
Stephen Thair
 

Recently uploaded (20)

PDF
Event Presentation Google Cloud Next Extended 2025
minhtrietgect
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PDF
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
PDF
Building High-Performance Oracle Teams: Strategic Staffing for Database Manag...
SMACT Works
 
PDF
BLW VOCATIONAL TRAINING SUMMER INTERNSHIP REPORT
codernjn73
 
PDF
REPORT: Heating appliances market in Poland 2024
SPIUG
 
PDF
Software Development Methodologies in 2025
KodekX
 
PDF
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
PDF
Google’s NotebookLM Unveils Video Overviews
SOFTTECHHUB
 
PDF
Why Your AI & Cybersecurity Hiring Still Misses the Mark in 2025
Virtual Employee Pvt. Ltd.
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
Enable Enterprise-Ready Security on IBM i Systems.pdf
Precisely
 
DOCX
Top AI API Alternatives to OpenAI: A Side-by-Side Breakdown
vilush
 
PPTX
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
PDF
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
PPTX
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PDF
Doc9.....................................
SofiaCollazos
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PDF
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
Event Presentation Google Cloud Next Extended 2025
minhtrietgect
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
Building High-Performance Oracle Teams: Strategic Staffing for Database Manag...
SMACT Works
 
BLW VOCATIONAL TRAINING SUMMER INTERNSHIP REPORT
codernjn73
 
REPORT: Heating appliances market in Poland 2024
SPIUG
 
Software Development Methodologies in 2025
KodekX
 
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
Google’s NotebookLM Unveils Video Overviews
SOFTTECHHUB
 
Why Your AI & Cybersecurity Hiring Still Misses the Mark in 2025
Virtual Employee Pvt. Ltd.
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Enable Enterprise-Ready Security on IBM i Systems.pdf
Precisely
 
Top AI API Alternatives to OpenAI: A Side-by-Side Breakdown
vilush
 
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
Doc9.....................................
SofiaCollazos
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 

Web performance and measurement - UKCMG Conference 2011 - steve thair

  • 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:[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 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
  • 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
  • 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?”
  • 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!

Editor's Notes

  • #2: Thanks for coming to my talk… I know it must have been hard to tear yourself away from “Collecting DB2 Measurements in SMF” so I appreciate your trust! We have lot of really interesting stuff to talk about… You will get a lot of food for thought and it might just change the way you think about web performance…
  • #3: DB2 was the reason I moved into local area networking…
  • #4: The agenda for my session…
  • #5: Perceived… because perception is crucial (as we shall see) Action to Response – from “here to here” – ie any delay experienced has a context of what the customer’s intention is… Meaningful Response – spinners are good, but people won’t wait forever… Different for different sites – for different users (Age, Gender, emotional state (“Is the train about to leave, I’m running late”?), culture, level of experience) – at different stages in the user journey (e.g Navigation browser vs Search vs checkout) Different devices? – Mobile vs wireless vs wired?
  • #6: Stoyan’s Talk at Velocity “The Psychology of Performance” http://velocityconf.com/velocity2010/public/schedule/detail/13019 "Satisfaction = perception minus expectation" - David Maister
  • #7: This is from the Foviance/ CA Study http://www.foviance.com/what-we-think/its-official-web-stress-is-bad-for-business-2/ http://www.ca.com/Files/SupportingPieces/final_webstress_survey_report_229296.pdf
  • #8: The 3 response-time limits are the same today as when I wrote about them in 1993 (based on 40-year-old research by human factors pioneers): 0.1 seconds gives the feeling of instantaneous response — that is, the outcome feels like it was caused by the user, not the computer. This level of responsiveness is essential to support the feeling of direct manipulation (direct manipulation is one of the key GUI techniques to increase user engagement and control — for more about it, see our Principles of Interface Design seminar). Think “Typing on a keyboard” 1 second keeps the user's flow of thought seamless. Users can sense a delay, and thus know the computer is generating the outcome, but they still feel in control of the overall experience and that they're moving freely rather than waiting on the computer. This degree of responsiveness is needed for good navigation. Think “turning pages in a book” 10 seconds keeps the user's attention. From 1–10 seconds, users definitely feel at the mercy of the computer and wish it was faster, but they can handle it. After 10 seconds, they start thinking about other things, making it harder to get their brains back on track once the computer finally does respond.
  • #9: As measured @ 2Mbps in IE8… But the actual download speed and browser are irrelevant… this is about user perception… so the real question is “which customers do I want to have a good perception of my site…”
  • #10: Can anyone guess why performance matters? It’s all about the Benjamin’s as our US friends would say…
  • #16: UK CMG members are responsible for designing and operating the infrastructure, of course but more than that… … by and large many of use are still “old school” in our thinking about web performance… we come from a background of performance optimisation focussed on “the back end”
  • #18: So you are focussing all your effort on 20% of the problem
  • #20: TCP/IP – the network transport (including DNS in here for simplicity) – Latency & Bandwidth HTTP – all the HTTP Headers that are crucial to performance – Expires, Cache-Control, Last-Modified etc Browsers – different behaviour – see Browser Scope for details (jscript engines, compliance, number of connections, downloading behaviour) The Application Layer – what the developer has traditionally been concerned about… HTML/CSS/Javascript/IMG etc Now they have to worry about a lot more…
  • #22: http://code.google.com/speed/page-speed/docs/rules_intro.html
  • #23: Put your web pages on a diet Zip ‘em up and save your bandwidth! Stop going back and forth! But the first ingredients first… Use your pantry!
  • #25: From last months meetup… Speed pages up… and saved money too!
  • #26: Since this is UK CMG… how are we going to measure it?
  • #27: http://assets.en.oreilly.com/1/event/62/Above%20the%20Fold%20Time_%20Measuring%20Web%20Page%20Performance%20Visually%20Presentation.pdf
  • #28: When to we “stop the clock” on the timer? When the DOM is built? When the page first displays (render start)? When the “onLoad event” fires? When the last HTTP request has completed? When the javacript has completed and any post processing is completed?
  • #30: There are basically 6 techniques used to measure web performance: Each one has it’s pros and cons… easy of use, what it can measure, cost etc
  • #32: Operations has different needs to Marketing or User Experience team
  • #33: Note that synthetic active monitoring can use either an agent or a “real browser” Passive – the signal to noise ratio is huge, just like passive sonar. Trying to detect the signal from the clutter is very hard…
  • #34: Active puts you in control – you test what you want to test…
  • #36: Passive is great for measuring every user’s visit… from around the world, ensuring compliance to your SLA’s.
  • #37: If you are using an Continuous Integration Build process part of your “build pipeline” should be performance testing, which can be automated the same way as your Regression Testing.