Settingperformancegoalsisalways a greatplacetostartwhendivingintothisstuffandoutlining a strategyandthenlookatthetoolsandtechniquesweusetoimproveperformanceinourownapp.
Mostaidworkersthat I knowtheymightbuyoneortwogigabytesat a time s sothey'reconstantlyhaving, like, runningoutofdata, havingtowait a day, gobacktothecellphonestore, plugsomemoredata, andondefyourstuffjuststopsworkingwhentheyrunoutofdataagain, backtofeeldependent.
Um, soinourcase, we'relookingat a midrangeandroiddeviceonwe'regoingtosay a badthree G connection, 400 kilobytes, a secondbandwidthand 400 milliseconds.
Leighton.
See, wewant a minutesizedataandpowerusage, andwe'regonnafocusforspeedontwokeyindicators.
Um, wedon't wanttousepullingbecausethat's goingtosend a heartbeatout.
Sothere's somegreattechouttherelikeWebsockets, whichdo a muchbetterjobofkeeping a TCPconnectionopenwithoutthatheartbeauty.
Um, wewanttolimitanimations a czmuchaspossibleeverytimethatyouhaveananimationdoing, um, it's goingtoberepaintingonthebrowserrunningthatCPU, and I'llshowyousomeperformancestatsonthatinjust a minute.
I thinkwhenyou'relookingatreallyoptimizingperformance, thisisgreaton a desktop, butit's finetojustlettheusertypeintheirsearchqueryandhitthesearchbuttonandmake a singlerequestuportodoitonce a secondoronceeveryhalfsecond, Um, thisis I bloweditupsomepagewith, like, a spinning, loadinganimationonthere.
Iftheystrolldownthere, oftentimesthey'rejustgonnaclick a linkonthemainmenuandneverneedthatsecondhalfofthepage.
Umandthen I thinkforprecashing, um, withtheserviceworkers, somethinglikethat, youwanttogetyourappworkingoffline, Askforconsent.
Just a simplebuttonlike, Hey, wouldyouliketodownloadtheofflineexperience?
Um, I thinkit's importantwhenyou'relookingatpeoplewith, uh, lowdatalikethey'reon a limitedmeteredplantojustgivethem a headsup.
It's therightthingtodoandthenimprovingspeed.
A lotofthesamethingyouneed.
Thiocompresspayloads, cashaggressively.
Serversiderenderingissuperusefulhere.
That's reallygoingtoreducetheamountoftimeittakestogettothatfirstpain, whichmeansifyou'rebuilding a singlepageapplication, youdoneedtodo a littlebitofextraworkandactuallysenddownsomeHTML.
AtleastsenddownanapplicationshowdownthetheheaderintheFooterand a sidebarand, youknow, maybe a littleloadingmessageorsomething.
A scriptdownloadTobecompetingwith a bunchofuseruploadedimages, Um, andminimizingtheamountofstuffonthecriticalpathisdefinitely a goodtechnique, especiallyforsinglepageapplications.
Youdon't needallofyourtemplatesatonce.
Loadthecurrenttemplate, loadtheinteractivityabovethefoldandthen a synchronouslygrabtherestofthatoncethepageisupandrunning.
Theyneverneedtoloaditagainfromyourserveraslongastheyhave a localcopy.
Whenyoumake a changeinyourapplication, itgenerates a newhash, andyouactuallyjustdownload a differentfile, whichis, I think, a prettygoodwayofdealingwithcashingandjusttryingtoholdontothatdataaslongasit's needed.
Ittook 22 secondstobecomeinteractive, andwedownloadedbasically a megabyteofcontent.
Thisseemsreallybad.
Itis a badthree G connectionin 2017.
Thiswastheaverageloadtimeformobile.
There's 22 secondstojustgrab a page, so I thinkwecandobetterthanthat.
Thisistheperformance, painanddeathtoolsyouseereallylongloadtimes, grabbingthatJavascriptfiletogettointeractivity, evenjustgrabbingtheimagesandontheDHDand l tookquite a while, sosecondaryloadsarebetter.
Wecantakeadvantageofbrowsercashing, takesabout a secondtopaintthepageandbecomeinteractive.
It's cashedallyourJavaScriptandyoujusthavetomake a Jasonrequestorsomethinglikethat.
Soyoucanseethere.
It's, uh, it's loadingjustabouteverything.
CompassionexceptfortheHTMLpage.
Sowe'regonnafocusonsomespeedimprovementshere.
Um, wedidn't I thoughtthatwehad g zipgoing.
Itturnsout I got a configurationfilewrongandwedidn't atall.
So I didsomeresearch, and I threwonbroadly.
It's basicallythenew G zip.
Ithasabout a 25% smallerfilesizes.
Whenthecompressionsdone, I addedhttptotwoengineswhichmultiplexrequeststhatcanreuseTCPconnections, whichmeansyoudon't havetodealwiththatleadandseeforeverysinglepipethatyouhaveopen, youjustopenup a handfulofthematthestart, andthenyoucanloadupmorestuffthroughthosepipes.
Um, I implemented a fairlysimplebundlesplittingstrategyinWebpacked, so I thinkthatwecoulddoevenmorehere.
Butfornow, I justwantedtoseparateourapplicationcodeandstylesfromourvendorcodeandstylesbecausethelibrariesandstuffweusedon't changenearlyasoftenasupdatestoactualbusinesslogicinfrontendcode.
Thiswillallowmetocashthatvendorfileandjustkeepitthereforweeksat a timeuntilwethrowinthenewimportwhilewe'remakingdailychangestotheapplication.
Um, yes, umimagerysizing.
Justcuttingdown.
Take a looklikeyou'rethrowingonfun, awesomeorsomething.
We'rereusing a lotofthesameTCPconnectionswiththecheesetoitgetstointeractivity, andthenwejustgrabtherestofthatusercontentSubsequentloads, similarsourceofimprovement.