understanding and measuring web performance
DESCRIPTION
Introduction to what web performance means and how it can be measured.TRANSCRIPT
Understanding and measuring web performance
Bogdan Gâza
CodeCamp NOV’12 Bogdan Gâza
Mechanic at
Monday, November 19, 12
Agenda
What is
Measuring
Take aways
Bogdan Gâza
} web performance
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Agenda
What is
Measuring
Take aways } web performance
CodeCamp NOV’12
Monday, November 19, 12
Web performance is the time perceived by an user when loading a web resource.
Bogdan GâzaCodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Click Load
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Click Load
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Human perception of time is bothsubjective and variable
actual
expected
perceived
remembered
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Delay User reaction
0 - 100 ms Instant
0 - 300 ms Feels sluggish
0 - 1000 ms Machine is working
1s+ Mental context switch
10s+ I’ll come back later
Human perception of time is bothsubjective and variable
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Delay User reaction
0 - 100 ms Instant
0 - 300 ms Feels sluggish
0 - 1000 ms Machine is working
1s+ Mental context switch
10s+ I’ll come back later
Human perception of time is bothsubjective and variable
CodeCamp NOV’12
Monday, November 19, 12
Amazon TechO(n) Bogdan GâzaBogdan Gâza
DelayDistinct Queries Satisfaction
Time To Interaction
1000 ms - 0.7% -1.6% 1900 ms
2000 ms -1.8% -3.8% 3100ms
en.oreilly.com/velocity2009/public/schedule/detail/8523
Bing - negative impacts when adding delay
CodeCamp NOV’12
Monday, November 19, 12
Amazon TechO(n) Bogdan GâzaBogdan Gâza
Importance of performance
Yahoo! - 400ms slower6% drop in full-page traffic
Firefox Download page
- 2.2s faster avg page load time
+15.4% more downloads
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
What is
Measuring
Take aways } web performance
Agenda
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Click Load
Measuring web performance
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Click Load
Short life of a http request
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Click
CodeCamp NOV’12
Short life of a http request
Monday, November 19, 12
Bogdan Gâza
Click
Unload
CodeCamp NOV’12
Short life of a http request
Monday, November 19, 12
Bogdan Gâza
Click
Unload DNS
CodeCamp NOV’12
Short life of a http request
Monday, November 19, 12
Bogdan Gâza
Click
Unload DNS TCP
CodeCamp NOV’12
Short life of a http request
Monday, November 19, 12
Bogdan Gâza
Click
Unload DNS TCP REQUEST
CodeCamp NOV’12
Short life of a http request
Monday, November 19, 12
Bogdan Gâza
Click
Unload DNS TCP REQUEST RESPONSE
CodeCamp NOV’12
Short life of a http request
Monday, November 19, 12
Bogdan Gâza
PROCESSING ONLOAD
Load
REQUEST RESPONSE
CodeCamp NOV’12
Short life of a http request
Monday, November 19, 12
Bogdan Gâza
Click Load
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Click Load
clickToPageLoaded
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Click ?
Key metrics
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Key metrics
Click
Unload DNS TCP REQUEST RESPONSE
Time to First Byte
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
PROCESSING ONLOAD
Load
REQUEST RESPONSE
Render Start Time
Key metrics
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
PROCESSING ONLOAD
Load
REQUEST RESPONSE
DomContentLoaded
Key metrics
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
PROCESSING ONLOADREQUEST RESPONSE
Page LoadedTime
Key metrics
Load
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Click
High Level Metrics
Load BusinessRelevantEvent
clickTo BusinessRelevantEvent
aboveTheFold
FirstClick
FirstScroll
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
High Level Metrics
CodeCamp NOV’12
clickToFirstTweet
Monday, November 19, 12
Aggregation
Bogdan Gâza
AVG
Average is not always relevant
CodeCamp NOV’12
Monday, November 19, 12
Context
Bogdan Gâza
Time of day Operating System
Browser Antivirus
Location Devise
Connection type Resolution
Latency ...
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Measuring web performance
Subjective (qualitative) Objective (quantitative)
Focus Groups JavaScript
Case Studies Navigation timings
Interviews Browser Extensions
... Web Server Mods
... Network sniffing
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Measuring web performance using JavaScript
unLoadEventstart timestamp
Store start in a cookie
Load nextpage
loadEventstop timestamp
Send a beaconbeacon.gif?time=PLT
Page Load Time (PLT)
stop - start
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Pro’s Con’s
Simple JavaScript
Simple Custom Metrics Accurate for the 2nd page
... Observer effect
Measuring web performance using JavaScript
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Click
Unload DNS TCP REQUEST RESPONSE
Measuring web performance using Navigation Timings
navigationStart
domainLookupStart
domainLookupEnd
connectStart
connectEnd
...
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
PROCESSING ONLOAD
Load
REQUEST RESPONSE
Measuring web performance using Navigation Timings
domContentLoaded
domLoadComplete
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Measuring web performance using Navigation Timings
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Pro’s Con’s
Simple JavaScript
Lots of metrics Page Level Only
Accurate Needs browser support
Measuring web performance using Navigation Timings
CodeCamp NOV’12
Monday, November 19, 12
Measuring web performance using Browser Extensions
Bogdan GâzaCodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Pro’s Con’s
Very complete metrics Getting users to install it
No JavaScript Not natively cross browser
Not only page level ...
Measuring web performance using Browser Extension
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Measuring web performance using a web server mod
Web server
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Measuring web performance using a web server mod
Web server
Performance module
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Measuring web performance using a web server mod
Web server
Performance module
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Measuring web performance using a web server mod
Web server
Performance moduleRegisters
timestamps
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Measuring web performance using a web server mod
Web server
Performance moduleRegisters
timestamps
Collects &aggregates
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Pro’s Con’s
Good for measuring back-end performance Limited metrics
Can be easy to deployPossible web server
performance hits
... Concept of a page is problematic
Measuring web performance using Web Server mod
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Net
wor
k Web app
CodeCamp NOV’12
Measuring web performance using network sniffing
Monday, November 19, 12
Bogdan Gâza
Web app
Web perf applianceNet
wor
k
CodeCamp NOV’12
Measuring web performance using network sniffing
Monday, November 19, 12
Bogdan Gâza
Web app
Web perf appliance
Promiscuous mode
Assembles packets
Assembles http into pages
Collects data
Net
wor
k
CodeCamp NOV’12
Measuring web performance using network sniffing
Monday, November 19, 12
Bogdan Gâza
Pro’s Con’s
No observer effect Limited metrics
Used in appliance basedsolutions Not cloud friendly
... Concept of a page is problematic
Measuring web performance using network sniffing
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Take aways
Performance is subjective, context is critical
Observations vs Experiments
W3C Nav Timings
Speed (latency) an important feature
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Q/A
CodeCamp NOV’12
Monday, November 19, 12
Bogdan Gâza
Thanks!
CodeCamp NOV’12
Monday, November 19, 12