A presentation at PerfMatters Conf in in Redwood City, CA, USA by Simon Hearne
PART Y C O N T E N T T H E W E AK L IN K IN YO U R C H AIN ? T H E W E AK L IN K IN YO U R C H AIN ? S i m o n
H e a rn e
P ri n c i p l e
E n g i n e e r
@
A k a m a i
p e r f m a t t e r s
c o n f
2 0 1 8 @ S i m o n H e a r n e
AKA AKA BAD PE O PL E BAD PE O PL E
D O IN G H O R R IBL E T H IN G S D O IN G H O R R IBL E T H IN G S
T O G O O D S IT E S T O G O O D S IT E S @ S i m o n H e a r n e
T H E M O D E R N W E B W O R K F L O W 10 1 T H E M O D E R N W E B W O R K F L O W 10 1 m a k e
s om e t hin g
� t e s t
it
� s hip
it
� . . . p ut
t a g s
on it
� @ S i m o n H e a r n e
AM P G O T S O M E T H IN G R IG H T
� AM P G O T S O M E T H IN G R IG H T
� @ S i m o n H e a r n e
tim kad le c.c o m /re mem bers /2 018-0 3-1 9-h ow -fa st- is -a m p-r e ally /
W H A T I' V E L E AR N E D IN
5 YE AR S W H A T I' V E L E AR N E D IN
5 YE AR S w e
s e e m
t o ha v e
le s s
c ont r o l t h a n
e v e r @ S i m o n H e a r n e
@ S i m o n H e a r n e T H E " BU S IN E S S "
� T H E " BU S IN E S S "
�
@ S i m o n H e a r n e T AGS SERVE BUSINESS GOALS T AGS SERVE BUSINESS GOALS Me a s ur e m e nt
&
An a ly t ic s Ad s
&
R e t a r g e t in g " O p t im iz a t ion "
&
T e s t in g Com m e nt s
&
L i v e
C h a t T a g
Ma na g e m e nt
@ S i m o n H e a r n e THE THE MONEY MONEY � � “ W e
k n o w
t h a t
O p t i m i z e l y
s l o w s
d o w n
t h e s i t e ,
b u t
i t
w i l l
g e t
u s
$ 7 5 0 k
i n c r e a s e d r e v e n u e
t h i s
y e a r ” H o lid a y
w e b s it e ,
U K
@ S i m o n H e a r n e THE THE IT'S NO T MY JOB IT'S NO T MY JOB � � “ W e
s u s p e c t
i t
s l o w s
t h e
s i t e
d o w n ,
w e h a v e n ’ t
t e s t e d
i t .
M a r k e t i n g
s a y s
i t ’ s c r i t i c a l
t o
t h e i r
l a t e s t
T V
c a m p a i g n
s o t h e r e ’ s
n o
p o i n t
a r g u i n g ” B u d g e t
a ir lin e ,
U K
@ S i m o n H e a r n e THE THE T AG MANAGER T AG MANAGER � � “ A l l
t h e
t a g s
g o
t h r o u g h
t h e
t a g
m a n a g e r , s o
t h e y
s h o u l d
b e
m o r t a r
s t o r e ,
U K
@ S i m o n H e a r n e BUT WHA T ABOUT THE BUT WHA T ABOUT THE R ISK? R ISK? � �
@ S i m o n H e a r n e PS: A VAIL ABILITY HEURISTIC 101 � PS: A VAIL ABILITY HEURISTIC 101 �
@ S i m o n H e a r n e PS: A VAIL ABILITY HEURISTIC 101 � PS: A VAIL ABILITY HEURISTIC 101 � R e m e m b e r
w he n
F a c e b o o k
w e n t
d o w n ? R e m e m b e r
w he n
D is q u s
w e n t
d o w n ? R e m e m b e r
w he n
M a x y m is e r
w e n t
d o w n ? R e m e m b e r
w he n
D y n
w e nt
p a d
�
@ S i m o n H e a r n e RISK 1: RISK 1: M AL IC IO U S C O D E IN J E C T IO N
� M AL IC IO U S C O D E IN J E C T IO N
�
@ S i m o n H e a r n e HOW MUCH OF YOUR CODE HA S VULNERABILITIES? HOW MUCH OF YOUR CODE HA S VULNERABILITIES?
beta .h ttp arc h iv e.o rg /r e p o rts /s ta te -o f- t h e-w eb # pctV uln
@ S i m o n H e a r n e CRYPTOJACKING CRYPTOJACKING
www.t h eve rg e .c o m /2 018/3 /2 2/1 7147320/c ry p to ja ck in g-8 500-p erc e n ta g e -p o in ts -b it co in -m onero -s p ik e- sy m an te c-s e cu rit y-m ining
@ S i m o n H e a r n e IT HAPPENS TO THE BIGGEST PL A YERS IT HAPPENS TO THE BIGGEST PL A YERS
tw itte r.c o m /n ytim es/s ta tu s/3 95 8547840
@ S i m o n H e a r n e INTERNET 'SERVICE' PROVIDERS INTERNET 'SERVICE' PROVIDERS
blo g.r y an ke arn ey.c o m /2 013/0 1/c o m ca st-c a u gh t-in te rc e p tin g-a n d -a lt erin g-y o ur-w eb -t r a f� c/
@ S i m o n H e a r n e CONTENT DELIVERY NETWORKS CONTENT DELIVERY NETWORKS
git hub .c o m /a m ppro je ct/a m ph tm l/is su es/2 380
@ S i m o n H e a r n e CONTENT DELIVERY NETWORKS CONTENT DELIVERY NETWORKS
@ S i m o n H e a r n e UNINTENTIONAL DA T A COLLECTION UNINTENTIONAL DA T A COLLECTION w e b s i t e
t r a c k i n g
i s
a
" s e c u r i t y
d i s a s t e r w a i t i n g
t o
h a p p e n " fr e ed om -t o -t in ke r.c o m /2 018/0 2/2 6/n o -b ound arie s-fo r-c re d en tia ls-p assw ord -le ak s-t o -m ixpan el- an d -s e ssio n- re p la y-c o m pan ie s/
@ S i m o n H e a r n e RISK 2: RISK 2: A V AIL ABILITY � A V AIL ABILITY �
@ S i m o n H e a r n e DO THEY FAIL GRACEFULL Y? DO THEY FAIL GRACEFULL Y? 0 : 0 0 /
0 : 0 6
@ S i m o n H e a r n e DO THEY FAIL GRACEFULL Y? DO THEY FAIL GRACEFULL Y? 0 : 0 0 /
0 : 2 4
@ S i m o n H e a r n e ARE THEY USING A CDN? ARE THEY USING A CDN? (& IS IT A S GOOD A S YOURS?) (& IS IT A S GOOD A S YOURS?)
@ S i m o n H e a r n e WHA T IS THEIR SL A FOR A VAIL ABILITY? WHA T IS THEIR SL A FOR A VAIL ABILITY? (& IS IT A S GOOD A S YOURS?) (& IS IT A S GOOD A S YOURS?)
help .o pti m iz e ly .c o m /A cco u nt_ Setti ngs/O pti m iz e ly s u ppo rt p la n s
@ S i m o n H e a r n e A VAIL ABILITY TO THE USER A VAIL ABILITY TO THE USER G o v e r nm e nt
/
g e o
b lo c k in g Ad
b lock ing T r a c k e r
b lock in g R a nd om
c r a p
@ S i m o n H e a r n e RISK 3: RISK 3: C O D E Q U AL IT Y � C O D E Q U AL IT Y �
@ S i m o n H e a r n e XSS VULNERABILITES XSS VULNERABILITES
ra n d yw este rg re n .c o m /w id esp re ad -x ss-v u ln era b ilit ies/
@ S i m o n H e a r n e XSS VULNERABILITES XSS VULNERABILITES
d o c u m e n t . w r i t e ( " < d i v
' v d b _ p l a y e r
v d b _ 5 6 5 e c 7 7 5 e 4 b 0 9 2 e b c 9 6 8 5 c e 8 5 3 1 8 0 f 5 d e 4 b 0 6 6 2 0 8 a 6 3 2 7 9 a '
h t t p : / / n y p o s t . c o m /
1 '
a l e r t ( 1 )
a l e
< / d i v
" ) ;
ra n d yw este rg re n .c o m /w id esp re ad -x ss-v u ln era b ilit ies/
@ S i m o n H e a r n e DIFFERENT RELE A SE SCHEDULES DIFFERENT RELE A SE SCHEDULES HOW DO YOU KNOW WHEN IT CHANGES? HOW DO YOU KNOW WHEN IT CHANGES?
< script
"//s7.addthis.com/addthis_widget.js"
async
</ script
www.a d dth is .c o m
@ S i m o n H e a r n e JUST PL AIN THOUGHTLESS JUST PL AIN THOUGHTLESS
@ S i m o n H e a r n e RISK 4: RISK 4: PE R F O R M AN C E
� PE R F O R M AN C E
�
@ S i m o n H e a r n e SELF-POLICING ISN'T GOOD ENOUGH SELF-POLICING ISN'T GOOD ENOUGH . . .
t h e
X
W e b
R e f e r e n c e
S n i p p e t
w a s a v a i l a b l e
. . .
a n d
t h e
d o w n l o a d
t i m e
o v e r H T T P
d i d
n o t
e x c e e d
5 0 0
m s . S n i p p e t
i s
s a m p l e d
e v e r y
m i n u t e
f r o m
a v a r i e t y
o f
U .S.
l o c a t i o n s . s t a t u s . o p t im iz e ly . c o m
@ S i m o n H e a r n e TOOLS AREN'T EQUAL TOOLS AREN'T EQUAL
ora n gevalle y.n l/en /b lo g/9 -a b -t e stin g-t o ols -c o m pare d -o n -s it e-s p eed -im pact/
@ S i m o n H e a r n e THE WEB IS VARIABLE THE WEB IS VARIABLE T o p
2 5 0
re s o u rc e s
f ro m
H T T P
A r c h i v e
@ S i m o n H e a r n e THE WEB IS VARIABLE THE WEB IS VARIABLE T o p
2 5 0
re s o u rc e s
f ro m
A k a m a i
m P u l s e
1 /
@ S i m o n H e a r n e RESOURCE TIMING IS THE HERO WE NEED RESOURCE TIMING IS THE HERO WE NEED NO T WITHOUT TIMING-ALLOW-ORIGIN � NO T WITHOUT TIMING-ALLOW-ORIGIN �
nic j.n et/ re so urc eti m in g-v is ib ility -th ir d -p arty -s c rip ts -a d s-a n d -p ag e -w eig h t/
@ S i m o n H e a r n e RESOURCE TIMING WON'T SA VE US RESOURCE TIMING WON'T SA VE US �
no r e d ir e c t
inf o r m a t io n �
lim it e d
d a t a
on
7 2 %
of
p a r t y
c o n t e n t �
only t he
� r s t
1 5 0
r e q u e s t s
�
no d a t a
on old
iD e v ic e s �
no d a t a
f or
o r ig in
if r a m e s
@ S i m o n H e a r n e RISK 4: RISK 4: PE R F O R M AN C E
� PE R F O R M AN C E
� (FOR RE AL THIS TIME) (FOR RE AL THIS TIME)
@ S i m o n H e a r n e CPU IS OUR BIGGEST BO T TLENECK ⏳ CPU IS OUR BIGGEST BO T TLENECK ⏳
@ S i m o n H e a r n e WHO'S POLICING THE THIRD-PARTIES? WHO'S POLICING THE THIRD-PARTIES?
gith ub .c o m /jpvin ce n t/3 rd-p arty -c p u -a b use r
@ S i m o n H e a r n e VARIABLE CPU TIME VARIABLE CPU TIME ON SYNTHETIC AGENTS! ON SYNTHETIC AGENTS!
@ S i m o n H e a r n e THE MOST FRUSTRA TING PERF BUG, EVER THE MOST FRUSTRA TING PERF BUG, EVER
@ S i m o n H e a r n e WHO WA TCHES THE WA TCHMEN? WHO WA TCHES THE WA TCHMEN?
ca le n d ar.p erf pla n et. co m /2 017/a n -a u d it- of- b oom era n gs-p erfo rm an ce /
@ S i m o n H e a r n e RISK 4: RISK 4: PE R F O R M AN C E
� PE R F O R M AN C E
� (PART III) (PART III)
@ S i m o n H e a r n e DEL A YING ONLOAD DEL A YING ONLOAD
@ S i m o n H e a r n e KEEPING THE RADIO A WAKE KEEPING THE RADIO A WAKE
W E H A V E L IT T L E C O N T R O L W E H A V E L IT T L E C O N T R O L
O V E R W H IC H AR E U S E D O V E R W H IC H AR E U S E D But
t he r e
a r e
t h in g s
w e
c a n
d o . . . @ S i m o n H e a r n e
@ S i m o n H e a r n e ST AGE 1: ST AGE 1: F IN D O U T W H A T ' S T H E R E F IN D O U T W H A T ' S T H E R E
fo rtu ne.c o m /2 015/0 7/0 8/a d b lo ck -d ata /
@ S i m o n H e a r n e SYNTHETIC TESTING (WEBPAGETEST) SYNTHETIC TESTING (WEBPAGETEST)
web pag e te st. org /
@ S i m o n H e a r n e SYNTHETIC TESTING (WEBPAGETEST) SYNTHETIC TESTING (WEBPAGETEST)
@ S i m o n H e a r n e
@ S i m o n H e a r n e BONUS: THIRD-PARTY CA TEGORIZA TION BONUS: THIRD-PARTY CA TEGORIZA TION | g ith ub .c o m /s im onhearn e/th ir d party db th ird party db.a p psp o t. co m
@ S i m o n H e a r n e RE AL USER MONITORING � RE AL USER MONITORING � 0 : 0 0 /
0 : 2 2 A k a m a i
m P u l s e
@ S i m o n H e a r n e ST AGE 2: ST AGE 2: D E T E R M IN E T H E IM PAC T D E T E R M IN E T H E IM PAC T
@ S i m o n H e a r n e SYNTHETIC TESTING (WEBPAGETEST) SYNTHETIC TESTING (WEBPAGETEST)
@ S i m o n H e a r n e SYNTHETIC TESTING (MADE E A SY) SYNTHETIC TESTING (MADE E A SY)
@ S i m o n H e a r n e SYNTHETIC TESTING (MADE E A SY) SYNTHETIC TESTING (MADE E A SY)
gith ub .c o m /s im onhearn e/th ir d -p arty -im pact/
@ S i m o n H e a r n e RESOURCE IMPACT FROM SYNTHETICS � RESOURCE IMPACT FROM SYNTHETICS �
blo g.c a tc hpo in t. co m /2 018 /0 1/1 0/u sin g-c a tc hpo in t-t o -a n aly ze -t h ir d -p arty -im pact/
@ S i m o n H e a r n e RESOURCE IMPACT FROM SYNTHETICS � RESOURCE IMPACT FROM SYNTHETICS �
sp eed cu rv e.c o m /b lo g/u x-fo cu s-fo r-w ate rfa lls -a n d -t h ir d -p artie s/
@ S i m o n H e a r n e RESOURCE IMPACT FROM RUM RESOURCE IMPACT FROM RUM
@ S i m o n H e a r n e ADVERTISING PARTNERS ADVERTISING PARTNERS P a r t ne r
1
=
~ 4 0 0 m s
s l o we r
t ha n p a r t ne r
2 Mig r a t ing
a ll a d s
=
2 2 0 m s
f a s t e r
p a g e
loa d Ad d it iona l r e v e n u e
$ 1 2 ,000 p e r
m o n t h L a rg e
U S
p u b l i s h i n g
c o m p a n y
@ S i m o n H e a r n e LONGT A SKS API LONGT A SKS API
@ S i m o n H e a r n e BONUS: DETERMINE THE VALUE! BONUS: DETERMINE THE VALUE!
blo g.s u m all.c o m /journ al/ o pti m iz e ly -g o t- m e-� re d .h tm l
@ S i m o n H e a r n e " E v e ry t h i n g
s h o u l d
h a v e
a
v a l u e , b e c a u s e
e v e ry t h i n g
h a s
a
c o s t " T i m
K a dl e c
f r e e l a n c e
w e b p e r f
g o d
@ S i m o n H e a r n e ST AGE 3: ST AGE 3: M E A S U R E T H E M AN D R E PO R T O N T H E M M E A S U R E T H E M AN D R E PO R T O N T H E M
@ S i m o n H e a r n e CONTENT SECURITY POLICY � CONTENT SECURITY POLICY � (REPORT-ONL Y) (REPORT-ONL Y)
{
r e p o r t " :
{
u r i " :
" h t t p s : / / y o u r w e b s i t e . c o m / " ,
" r e f e r r e r " :
" " ,
d i r e c t i v e " :
s r c " ,
d i r e c t i v e " :
s r c " ,
p o l i c y " :
" " ,
" d i s p o s i t i o n " :
" e n f o r c e " ,
u r i " :
" i n l i n e " ,
n u m b e r " :
4 ,
n u m b e r " :
3 ,
f i l e " :
6 "
c o d e " :
0 ,
s a m p l e " :
" "
}
repo rt- uri .c o m
@ S i m o n H e a r n e SYNTHETIC TESTING � SYNTHETIC TESTING �
@ S i m o n H e a r n e RUM � RUM � T he
b e s t
w a y
t o m onit or
r e s o u r c e s ,
e v e n w it h it s
lim it a t io n s
@ S i m o n H e a r n e � WA TERFALLS � WA TERFALLS 0 : 0 0 /
0 : 4 5 A k a m a i
m P u l s e
@ S i m o n H e a r n e ST AGE 4: ST AGE 4: D E F E N D O U R S E L V E S
� D E F E N D O U R S E L V E S
�
@ S i m o n H e a r n e CONTENT SECURITY POLICY � CONTENT SECURITY POLICY �
ca n iu se .c o m /# fe at= co nte n ts e cu rit yp o lic y2
@ S i m o n H e a r n e CONTENT SECURITY POLICY � CONTENT SECURITY POLICY �
repo rt- uri .c o m
@ S i m o n H e a r n e CSP STRICT-DYNAMIC CSP STRICT-DYNAMIC
@ S i m o n H e a r n e CONTENT SECURITY POLICY � CONTENT SECURITY POLICY � �
Cr y p t oJ a c k in g �
X S S �
Ma int e na nce
@ S i m o n H e a r n e SUB-RESOURCE INTEGRITY � SUB-RESOURCE INTEGRITY � < link
"stylesheet"
"//maxcdn.bootstrapcdn.com/.../bootstrap.min.css"
"
sha256-8EtRe6XWoFEEhWiaPkLaw...=
sha512-/5KWJw2mvMO2ZM5fndVxU...=
"
"anonymous"
< script
"//ajax.googleapis.com/.../jquery.min.js"
"
sha256-ivk71nXhz9nsyFDoYoGf2...=
sha512-7aMbXH03HUs6zO1R+pLye...=
"
"anonymous"
</ script
@ S i m o n H e a r n e SUB-RESOURCE INTEGRITY � SUB-RESOURCE INTEGRITY � �
Ma licious Co d e �
U nt e s t e d
Cha n g e s �
Ma int e na nce ⭐
b a s e d
R e s t r ic t io n s . . . *
git hub .c o m /m ikew est/s ig natu re -b ase d -s ri
@ S i m o n H e a r n e SERVICE WORKER � SERVICE WORKER �
f u n c t i o n
t i m e o u t ( d e l a y )
{
r e t u r n
n e w
P r o m i s e ( f u n c t i o n ( r e s o l v e ,
r e j e c t )
{
s e t T i m e o u t ( f u n c t i o n ( ) {
r e s o l v e ( n e w
R e s p o n s e ( ' ' ,
{
s t a t u s :
4 0 8 ,
s t a t u s T e x t :
' R e q u e s t
t i m e d
o u t . '
} ) ) ;
} ,
d e l a y ) ;
} ) ;
}
s e l f . a d d E v e n t L i s t e n e r ( ' f e t c h ' ,
f u n c t i o n ( e v e n t )
{
/ /
O n l y
f e t c h
J a v a S c r i p t
f i l e s
f o r
n o w
i f
(
/
.
j
s
$
/
.
t
e
s
t
(
e
v
e
n
t
.
r
e
q
u
e
s
t
.
u
r
l
)
)
{
e v e n t . r e s p o n d W i t h ( P r o m i s e . r a c e ( [ t i m e o u t ( 2 0 0 0 ) ,
f e t c h ( e v e n t . r e q u e s t . u r l ) ] ) ) ;
}
e l s e
{
e v e n t . r e s p o n d W i t h ( f e t c h ( e v e n t . r e q u e s t ) ) ;
}
} ) ;
ca le n d ar.p erf pla n et. co m /2 015/r e d ucin g-s in gle -p o in t-o f- fa ilu re -u sin g-s e rv ic e -w ork e rs /
@ S i m o n H e a r n e SERVICE WORKER � SERVICE WORKER � �
CD N
/
N e t w o r k
o u t a g e s �
N ot
on � r s t
p a g e v ie w �
Ma int e na nce �
Y ou c a n b r e a k
y o u r
s it e
@ S i m o n H e a r n e SELF-HOSTING / PROXYING ☔ SELF-HOSTING / PROXYING ☔
go ogle -w eb fo nts -h elp er.h ero ku ap p.c o m /fo n ts
@ S i m o n H e a r n e SELF-HOSTING / PROXYING ☔ SELF-HOSTING / PROXYING ☔
vw o.c o m /k now le d ge /h ost-v w o-ja v asc rip t- �le s-o n-y o ur-s e rv e r/
@ S i m o n H e a r n e SELF-HOSTING / PROXYING ☔ SELF-HOSTING / PROXYING ☔
co m munit y.a k am ai.c o m /c o m mun it y/w eb -p erfo rm an ce /b lo g/2 016/0 1/1 3/5 -w ay s-t o -p re ve n t-s lo w-3 rd -p arty - fr o nt-e n d -s e rv ic es
@ S i m o n H e a r n e SELF-HOSTING / PROXYING ☔ SELF-HOSTING / PROXYING ☔ �
CD N
/
N e t w o r k
o u t a g e s �
S ha r e d
T CP
c o n n e c t io n �
Ma int e na nce
PAR T Y PO L IC Y � W ha t
d oe s
it
d o ? W ho use s
it ? W ha t ’ s
t he
r is k
t o
t h e
s it e ? H ow
d o y ou r e m o v e
it ?
@ S i m o n H e a r n e SHARE WITH O THER TE AMS! � SHARE WITH O THER TE AMS! �
sp eed cu rv e .c o m /d em o/t h ir dparty /
@ S i m o n H e a r n e THIRD-PARTY CONTENT MA Y BE A WE AK LINK THIRD-PARTY CONTENT MA Y BE A WE AK LINK BU T IT ' S H E R E T O S T A Y BU T IT ' S H E R E T O S T A Y
@ S i m o n H e a r n e FIVE THINGS YOU CAN DO TODA Y: FIVE THINGS YOU CAN DO TODA Y: K now w ha t ' s
t h e r e Me a s ur e
t he m H a v e
a
s olid
d e f e n s e S ha r e
t he
d a t a H a v e
p a r t y
p o lic y
@ S i m o n H e a r n e F U R T H E R R E AD IN G F U R T H E R R E AD IN G
T HANK YO U ,
T HANK YO U ,
G O O D L U C K ! G O O D L U C K ! �
@S im onH e a r n e �
w e b p e r f . ninja / t o o ls �
lin k s @ S i m o n H e a r n e
Third-party content is the thorn in the side of many a good website. From A/B testing that delays render to advertising networks that bleed user data, we depend on services over which we have no control. In an ideal world we could attribute a user experience cost to each third-party provider, allowing marketing, eCommerce and business intelligence to make educated decisions about which providers should stay and which should go.
The Resource Timing API allows site owners to measure how third-parties perform for every single pageview. Combining this data with business intelligence provides new insight to the impact of third-party providers on business performance.
This talk explores some of the toughest questions in web performance, backed up with huge amounts of data:
Will moving to a new advertising network increase ad revenue? Is A/B testing losing more revenue that it gains? Does measuring web performance impact web performance? Data for this talk has been gathered from over 500,000 websites, with detailed investigation performed on millions of pageviews from a small number of sites.
You will leave this talk armed with the tools and knowledge to measure the performance of third-party providers and provide compelling arguments for whether they should stay or go.
for free. You
can too.