edge 2016 h2 in the real world
TRANSCRIPT
©2016 AKAMAI | FASTER FORWARDTM
H2intherealworld
Michael Gooding, Performance specialist@Michael_G_81
©2016 AKAMAI | FASTER FORWARDTM
18Feb2015
©2016 AKAMAI | FASTER FORWARDTM
ConflictinUkrainecontinued
Picture:AFP/GettyImages
©2016 AKAMAI | FASTER FORWARDTM
HeavysnowinIstanbulcausesairportclosure
Picture:AFP/GettyImages
©2016 AKAMAI | FASTER FORWARDTM
RelativesofmissingflightMH370passengersprotestinMalaysia
Picture:AFP/GettyImages
©2016 AKAMAI | FASTER FORWARDTM
PeopleinFinlandcelebratedChineseNewYear
Picture:EPA
©2016 AKAMAI | FASTER FORWARDTM
InRussiaaCarfallsintoasinkhole!
Picture:Europics
©2016 AKAMAI | FASTER FORWARDTM
©2016 AKAMAI | FASTER FORWARDTM
©2016 AKAMAI | FASTER FORWARDTM
MichaelGooding:PerformanceSpecialist1. H2Performance
i. Measurementii. Renderingiii. Smallfilesiv. Sprites
2. Summary
©2016 AKAMAI | FASTER FORWARDTM
Performancei. Measurementii. Renderingiii. Smallfilesiv. Sprites
©2016 AKAMAI | FASTER FORWARDTM
AkamaiRUM1.Billionsbeaconscollectedperday2.Somesitesseegoodimprovements3.Somesitesdon’t!4.3rd Partycontentwatersdownbenefit5.A/Btesting6.Browsersbehavedifferently7.Networkconditionsvaryresults
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Networkvariations- wired
seconds
%users
h1 h2
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Networkvariations- cellular
seconds
%users
h1 h2
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Howtotesth2vh1
--disable-http2
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Howtotesth2vh1firefoxPref network.https.spdy.enabled falsefirefoxPref network.https.spdy.enabled.https2 falsenavigate https://www.website.com
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Howtotesth2vh1
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
HowdoIknowit’sh2?
h1 h2
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
HowdoIknowit’sh2?
h1 h2
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
HowdoIknowit’sh2?
h1 h2
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
H2– ChromeDevtools
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
H2– ChromeNetInternals
chrome://net-internals/#http2
©2016 AKAMAI | FASTER FORWARDTM
Performancei. Measurementii. Renderingiii. Smallfilesiv. Sprites
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance- Rendering
h1
h2
h1
h2
4 sec
©2016 AKAMAI | FASTER FORWARDTM
What’stheproblem?Renderingwithdifferentprioritisation
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance- Rendering:Sharding
h1
h2
1Domain
Allonsameconnection
2nd connectionopened
/js/css
www.website.com
/js/css
www.website.com
dns connection ssl ttfb d/load
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance- Rendering:Sharding
cdn.website.com/jscdn.website.com/csswww.website.com
cdn.website.com/jscdn.website.com/csswww.website.com
h1
h2
2 Domains
h2
1Certificate
2Certificates
cdn.website.com/jscdn.website.com/csswww.website.com
dns connection ssl ttfb d/load
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Rendering:Shardingexample
h2after
h2before
Simpleimprovementbynotmakingconnection
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Rendering:Shardingexample
h2after
h2before
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Rendering:Progressivejpegs
h2
normaljpeg
progressiveNormaljpegsjust60%loaded
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Rendering:Progressivejpegexample
h2after
h2before
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Rendering:DIYprioritisation
<imgonload="addImages();"src="tshirt12_thumb.jpg">
<script>functionaddImages(){;
var img=document.createElement("img");img.src="tshirt2.jpg";document.getElementById("imgholder").appendChild(img);
}</script>
Differentorderandloadedwithdependency
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Renderingexample
Largeimagefillsbandwidth
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Renderingexample
progjpg
h2before
jspriority
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– RenderingexamplewithPush
2 sec1 sec
Push
progjpg
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
ServerPushUpdate
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
ServerPushUpdate
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– RenderingexampleServerPush
h2push
progjpg
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Rendering:Serverpushbadexample
h2push
h2before
©2016 AKAMAI | FASTER FORWARDTM
RenderingSummary1. Keepcriticalcontentonsamedomain2. Ifyouneedtoshardtobalanceh1usethesamecert3. Progressivejpgscanhelprendering4. UseJavaScriptifyouneedtodelayresources5. Useserverpushwhereyoucan
©2016 AKAMAI | FASTER FORWARDTM
Performancei. Measurementii. Renderingiii. Smallfilesiv. Sprites
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Smallfiles:CSSCSSbytesdownloaded
0
250
500
0
6
12
18
0 250 500 750 1000
H2issmallerbecauseofheadercompression
Filesizegrowsbecauseoflesscompression(gzip)andmoreheaders*
h1 h2
#offiles
bytes
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Smallfiles:CSSFirefoxperformancecomparison
0
250
500
0
6
12
18
h1 h2
H2isfaster,especiallyasyouincreasethenumberoffiles
Smallernumberoffilesisfastertoload
#offiles
time
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Smallfilesexample
Networknotmuchdifferent
h2after
h2before
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Smallfilesexample
h2after
h2before
Resultinbrowserisbig
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Smallfiles:JSFirefoxperformancecomparison
0
150
300
450
0
6
12
18
0 250 500 750 1000
filesiz
e(kb)
visualco
mplete(s)
#offiles
h1 h2
H2isonlyslightlyfasterevenasyouincreasethenumberoffiles
Smallernumberoffilesisfastertoload
#offiles
time
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Smallfiles:JSVisualexperienceofloadingthepage
0
3
6
9
0 250 500 750 1000
rend
erstart(s)
#offiles
h1 h2
Renderingrangeinh1islarge
#offiles
time
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Smallfiles:JSVisualexperienceofloadingthepage
0
3
6
9
0 250 500 750 1000
rend
erstart(s)
#offiles
h1 h2
Renderingrangeinh1islarge
#offiles
time
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Smallfiles:JSexample
Networkresultsprettysimilar
h2after
h2before
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– Smallfiles:JSexample
Fasterrenderinginbrowser
h2after
h2before
©2016 AKAMAI | FASTER FORWARDTM
SmallfilesSummary1. H2ismoreefficientNOTfasterdealingwithmanyfiles2. Keepcombiningfiles,sameash13. 2or3isok,basedonfrequencyofchange
©2016 AKAMAI | FASTER FORWARDTM
Performancei. Measurementii. Renderingiii. Smallfilesiv. Sprites
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– ImageSpritesVisualexperienceofloadingthepage h1 h2
0
5
10
0 250 500 750 1000
Renderingrangeinh1islarge
#offiles
time
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– ImageSpritesVisualexperienceofloadingthepage h1 h2
0
5
10
0 250 500 750 1000
Renderingrangeinh1islarge
#offiles
time
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– ImageSprites
Otherconsiderations1. Managementcomplexity2. Caching3. Imagesusedinsprite
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– ImageSpritesexample
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– ImageSpritesexample
h2images
h2sprite
Loaddifferencemuchlesswithsprite
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks.
Performance– ImageSpritesexample
#ofimagesused
Load
time(m
s)
#sprite19{background:url('images/sprite.png')no-repeat-17px0;}
#image19{background:url('sprite/sprite19.png')no-repeat;}
0
70
140
sprite 1 5 10 20 30 40
code
imgused
©2016 AKAMAI | FASTER FORWARDTM
SpriteSummary1. Keepusingspritesforperformance2. Ifyouareonlyusingafewimagesfilesareok3. Thinkaboutmanagementcost4. Thinkaboutfrequencyofchange5. Mobiledecodingtimescanbeslow
©2016 AKAMAI | FASTER FORWARDTM
Anti-patternsaren’tanti-patterns1. Makesurecriticalcontentisonthesamedomain2. Ifyouhavetoshardreusethesameconnection3. Checkrenderingtimescarefully4. Keepcombiningfiles5. Keepusingsprites(ifyouuseenoughimages)