bogdan gaza - understanding and optimizing for web performance

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


Bogdan Gâza

Agenda

What is

Measuring

Take aways } web performance

CodeCamp NOV’12


Web performance is the time perceived by an user when loading a web resource.

Bogdan GâzaCodeCamp NOV’12


Bogdan Gâza

Click Load

CodeCamp NOV’12


Bogdan Gâza

Human perception of time is bothsubjective and variable

actual

expected

perceived

remembered

CodeCamp NOV’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


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


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


Bogdan Gâza

What is

Measuring

Take aways } web performance

Agenda

CodeCamp NOV’12


Bogdan Gâza

Click Load

Measuring web performance

CodeCamp NOV’12


Bogdan Gâza

Click Load

Short life of a http request

CodeCamp NOV’12


Bogdan Gâza

Click

CodeCamp NOV’12



Bogdan Gâza

Click

Unload

CodeCamp NOV’12



Bogdan Gâza

Click

Unload DNS

CodeCamp NOV’12



Bogdan Gâza

Click

Unload DNS TCP

CodeCamp NOV’12



Bogdan Gâza

Click

Unload DNS TCP REQUEST

CodeCamp NOV’12



Bogdan Gâza

Click

Unload DNS TCP REQUEST RESPONSE

CodeCamp NOV’12



Bogdan Gâza

PROCESSING ONLOAD

Load

REQUEST RESPONSE

CodeCamp NOV’12



Bogdan Gâza

Click Load

CodeCamp NOV’12


Bogdan Gâza

Click Load

clickToPageLoaded

CodeCamp NOV’12


Bogdan Gâza

Click ?

Key metrics

CodeCamp NOV’12


Bogdan Gâza

Key metrics

Click


Time to First Byte

CodeCamp NOV’12


Bogdan Gâza

PROCESSING ONLOAD

Load

REQUEST RESPONSE

Render Start Time

Key metrics

CodeCamp NOV’12


Bogdan Gâza

PROCESSING ONLOAD

Load

REQUEST RESPONSE

DomContentLoaded

Key metrics

CodeCamp NOV’12


Bogdan Gâza

PROCESSING ONLOADREQUEST RESPONSE

Page LoadedTime

Key metrics

Load

CodeCamp NOV’12


Bogdan Gâza

Click

High Level Metrics

Load BusinessRelevantEvent

clickTo BusinessRelevantEvent

aboveTheFold

FirstClick

FirstScroll

CodeCamp NOV’12


Bogdan Gâza

High Level Metrics

CodeCamp NOV’12

clickToFirstTweet


Aggregation

Bogdan Gâza

AVG

Average is not always relevant

CodeCamp NOV’12


Context

Bogdan Gâza

Time of day Operating System

Browser Antivirus

Location Devise

Connection type Resolution

Latency ...

CodeCamp NOV’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


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


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


Bogdan Gâza

Click


Measuring web performance using Navigation Timings

navigationStart

domainLookupStart

domainLookupEnd

connectStart

connectEnd

...

CodeCamp NOV’12


Bogdan Gâza

PROCESSING ONLOAD

Load

REQUEST RESPONSE


domContentLoaded

domLoadComplete

CodeCamp NOV’12


Bogdan Gâza


CodeCamp NOV’12


Bogdan Gâza

Pro’s Con’s

Simple JavaScript

Lots of metrics Page Level Only

Accurate Needs browser support


CodeCamp NOV’12


Measuring web performance using Browser Extensions

Bogdan GâzaCodeCamp NOV’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


Bogdan Gâza

Measuring web performance using a web server mod

Web server

CodeCamp NOV’12


Bogdan Gâza


Web server

Performance module

CodeCamp NOV’12


Bogdan Gâza


Web server

Performance moduleRegisters

timestamps

CodeCamp NOV’12


Bogdan Gâza


Web server

Performance moduleRegisters

timestamps

Collects &aggregates

CodeCamp NOV’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


Bogdan Gâza

Net

wor

k Web app

CodeCamp NOV’12

Measuring web performance using network sniffing


Bogdan Gâza

Web app

Web perf applianceNet

wor

k

CodeCamp NOV’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



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


CodeCamp NOV’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


Bogdan Gâza

Q/A

CodeCamp NOV’12


Bogdan Gâza

Thanks!

CodeCamp NOV’12


bogdan gaza - understanding and optimizing for web performance

Documents

short life

human perception of

web resource

ms slower6

ms2000 ms

s faster avg page load

key metricsrender

key metricstime