real world experiences with http/2 (michael gooding, javier garza from akamai)

HTTP/2 (h2) in the real world

Michael Gooding@Michael_G_81

Javier Garza@jjaviergarza

©2016 AKAMAI | FASTER FORWARDTM

18Feb2015


ConflictinUkrainecontinued

Picture:AFP/GettyImages


HeavysnowinIstanbulcausesairportclosure



RelativesofmissingflightMH370passengersprotestinMalaysia



PeopleinFinlandcelebratedChineseNewYear

Picture:EPA


InHollandaTigercubgoesoutsideforthefirsttime!

Picture:Europics


MichaelGooding:PerformanceSpecialistJavierGarza:EnterpriseArchitect(h2evangelist)1. H2Performance

i. Measurementii. Renderingiii. Smallfilesiv. Sprites

2. Summary


Performancei. Measurementii. Renderingiii. Smallfilesiv. Sprites


AkamaiRealUserMonitoring(RUM)1.Billionsbeaconscollectedperday2.Somesitesseegoodimprovements3.Somesitesdon’t!4.3rd Partycontentwatersdownbenefit5.A/Btesting6.Browsersbehavedifferently7.Networkconditionsvaryresults


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.

Networkvariationsfornon-cellularconnections

seconds

%users

h1 h2



Networkvariationsforcellularconnections

seconds

%users

h1 h2



ReallatencyvsSimulatedlatency,h1vsh2,ChromevsFirefox

1.Testrealcitieswithreallatency2.Testusingsyntheticlatencyfromdulles3.UsingChromeandFirefoxagents(h2on/off)4.TensofthousandsofWPTtests

UsingWebpagetest.org (WPT)tomeasureLatency



UsingWPTtomeasure(RealvsSimulated)Latency

Lessonslearned:

• Can’ttrustsimulatedlatency

• Differencebetweenrealandsimulatedchangesbybrowsertoo

• BetterstickwithRUMtesting(moreworktocleanresults)



UsingWPTtomeasurePacketLoss

Source: http://conferences.oreilly.com/velocity/devops-web-performance-ny/public/schedule/detail/51303 - https://goo.gl/MPndFs

h2performancesufferswithpacketloss

0%packetloss 2%packetloss h1 h2

0%packetloss 2%packetloss



Otherresearchstudiesonpacketloss

h2helpswithalotofsmallobjects TCPslowstartimpactsasingleconnectionwhendeliveringmorebytes

Source: https://www.akamai.com/us/en/multimedia/documents/technical-publication/http2-performance-in-cellular-networks.pdf > https://goo.gl/y0NYha



Performance- Rendering

h1

h2

h1

h2

4 sec


What’stheproblem?Renderingwithdifferentprioritisation



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



Performance- Rendering:Sharding

cdn.website.com/jscdn.website.com/csswww.website.com


h1

h2

2 Domains

h2

1Certificate

2Certificates


dns connection ssl ttfb d/load



Performance– Rendering:Shardingexample

h2after

h2before

Simpleimprovementbynotmakingconnection



Performance– Rendering:Shardingexample

h2after

h2before



Performance– Rendering:Progressivejpegs

h2

normaljpeg

progressiveNormaljpegsjust60%loaded



Performance– Rendering:Progressivejpegexample

h2after

h2before



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



Performance– Renderingexample

Largeimagefillsbandwidth



Performance– Renderingexample

progjpg

h2before

jspriority



Performance– RenderingexamplewithPush

2 sec1 sec

Push

progjpg



Performance– RenderingexampleServerPush

h2push

progjpg



Performance– Rendering:Serverpushbadexample

h2push

h2before


RenderingSummary1. Keepcriticalcontentonsamedomain2. Ifyouneedtoshardtobalanceh1usethesamecert3. Progressivejpgscanhelprendering4. UseJavaScriptifyouneedtodelayresources5. Useserverpushwhereyoucan



Performance– Smallfiles:CSSCSSbytesdownloaded(gzip off)

H2issmallerbecauseofheadercompression

h1 h2

#offiles

bytes



Performance– Smallfiles:CSSh2performancecomparison h

#offiles

time



Performance– Smallfiles:CSSh2performancecomparison- Chrome h

#offiles

time

h1 h2

H2isfaster,especiallyasyouincreasethenumberoffiles

Smallernumberoffilesisfastertoload



Performance– Smallfiles:CSSh2performancecomparison- Firefox h

#offiles

time

h1 h2

H2isslowerinFFafter~100files

Smallernumberoffilesisfastertoloadforh1andh2



Performance– Smallfiles:CSSh2performancecomparison– SafariMobile h

#offiles

time

h1 h2

H2isfaster,especiallyasyouincreasethenumberoffiles




Performance– Smallfiles:CSSh2performancecomparison– ChromeMobile h

#offiles

time

h1 h2

H2isfaster,butstruggles>500files



Performance– Smallfiles:CSSToomanyfilescausesproblemsinChrome

???



Performance– Smallfilesexample

Networknotmuchdifferent

h2after

h2before



Performance– Smallfilesexample

h2after

h2before

Resultinbrowserisbig



Performance– Smallfiles:JSh2performancecomparison h

#offiles

time



Performance– Smallfiles:JSWhataboutrendering? h

h1 h2



Performance– Smallfiles:JSexample

Networkresultsprettysimilar

h2after

h2before



Performance– Smallfiles:JSexample

Fasterrenderinginbrowser

h2after

h2before


SmallfilesSummary1. h2ismoreefficientinmostbrowsers2. NOTfasterdealingwithmanyfiles3. Keepcombiningfiles,sameash14. 2or3isok,basedonfrequencyofchange



Performance– ImageSpritesh2performancecomparison h

#offiles

time

mob-SafariX



Performance– ImageSpritesh2performancecomparison- Chrome h

#offiles

time

h1 h2

Differencebetweenh1andh2isalmostnonexistentforimages

Smallernumberoffilesisfastertoloadforbothprotocols



Performance– ImageSpritesh2performancecomparison- Firefox h

#offiles

time

h1 h2

h2isonlyslightlyslowerinFF

Smallernumberoffilesisfastertoloadforh1andh2



Performance– ImageSpritesh2performancecomparison– SafariMobile h

#offiles

time

h1 h2

h2justbreaks>200files




Performance– ImageSpritesh2performancecomparison– SafariMobile h h2

HardertodebugoniPhone,couldbe:1. Maxstreams2. Memory3. CPU



Performance– ImageSpritesh2performancecomparison– ChromeMobile h

#offiles

time

h1 h2

h2performanceismixedforChromeMobile



Performance– ImageSpritesVisualexperienceofloadingthepage

h1 h2



Performance– ImageSprites

Otherconsiderations1. Managementcomplexity2. Caching3. Imagesusedinsprite



Performance– ImageSpritesexample




h2images

h2sprite

Loaddifferencemuchlesswithsprite




#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


SpriteSummary1. Keepusingspritesforperformance,especiallymobile2. Ifyouareonlyusingafewimagesfilesareok3. Thinkaboutmanagementcost4. Thinkaboutfrequencyofchange5. Mobiledecodingtimescanbeslowandhasissueswith

largenumbersoffiles


Mostofthetimesh2improvesperformanceDon’tgiveupifitdoesn’tAnti-patternsaren’tanti-patterns

1. Don’tshardcriticalcontent2. Keepcombiningfiles3. Keepusingsprites(ifyouuseenoughimages)

EverythingisevolvingFAST(servers,browsers,QUIC)



Shamelessplug

https://goo.gl/3ZVNN8


1. Turnh2on2. Measure3. Experiment4. Share

Whatifwecouldsave1secondoneverypagethiswomanviewsinaday?(50pageviews/day)


1sec/pagex50/dayx365=5hours/year

5 sec/page=25hours/year

Questions?

Michael Gooding@Michael_G_81

uk.linkedin.com/in/mgooding1981

Javier Garza@jjaviergarza

www.linkedin.com/in/jjgarza

real world experiences with http/2 (michael gooding, javier garza from akamai)

Technology