Web Performance in action.pdf

ForonlineinformationandorderingofthisandotherManningbooks,pleasevisitwww.manning.com.ThepublisheroffersdiscountsonthisbookwhenorderedinquantityFormoreinformation,pleasecontactSpecialsalesDepartmentManningpublicationsco20BaldwinRoadPOBoⅹ761Shelterisland.nY11964Emailorders@manning.com@2017byManningPublicationsCo.AllrightsreservedNopartofthispublicationmaybereproduced,storedinaretrievalsystem,ortransmitted,inanyformorbymeanselectronic,mechanical,photocopying,orotherwise,withoutpriorwrittenpermissionofthepublisher.Manyofthedesignationsusedbymanufacturersandsellerstodistinguishtheirproductsareclaimedastrademarks.Wherethosedesignationsappearinthebook,andmanningPublicationswasawareofatrademarkclaim,thedesignationshavebeenprintedininitialcapsorallcapsRecognizingtheimportanceofpreservingwhathasbeenwritten,itisManningspolicytohavethebookswepublishprintedonacid-freepaperandweexertourbesteffortstothatendRecognizingalsoourresponsibilitytoconservetheresourcesofourplanet,Manningbooksareprintedonpaperthatisatleast15percentrecycledandprocessedwithouttheuseofelementalchlorineManningpublicationscoDevelopmenteditor:SusannaKline20BaldwinRoadReⅤieweditor:IvanmartinoⅤicPOBoX761Technicaldevelopmenteditor:NickWattsShelterisland.ny11964Projecteditor:KevinSullivanCopyeditor:SharonwilkeyProofreader:elizabethmTechnicalproofreader:DavidFombellapombalTypesetter:GordanSalinovicCoverder:MarijaTuISBN9781617293771Printedintheunitedstatesofamerica12345678910-EBM-212019181716briefcontents1Understandingwebperformance12Usingassessmenttools22OptimizingCss5l4Understandingcriticalcss83Makingimagesresponsive1026Goingfurtherwithimages1307■Fasterfonts164KeepingJavaScriptleanandfast196Boostingperformancewithserviceworkers228Fine-tuningassetdelivery24211LookingtothefuturewithHttp/227412Automatingoptimizationwithgulp303contentsefacex22acknowledgmentsxiiiboutthisbookabouttheauthorxixaboutthecoverillustrationxxUnderstandingwebperformanceI1Understandingwebperformance2Webperformanceandtheuserexperience2Howwebbrowserstalktowebservers3.Howwebpagesload5Gettingupandrunning6gNode.jsandGit6.Downloadingandrunningthclientswebsite7Simulatinganetworkconnection83Auditingtheclglient'swebsite91.4Optimizingtheclientswebsite11Minifyingassets12Usingservercompression15Optimizingin181.5Performingthefinalweigh-in201.6Summary21CONTENTS2Usingassessmenttools222.1EvaluatingwithGooglePageSpeedInsights22Appraisingwebsiteperformance23.UsingGoogleAnalyticsforbulkreporting252.2Usingbrowser-basedassessmenttools262.3Inspectingnetworkrequests27Viewingtiminginformation27.viewinghttprequestandresponseheaders292.4Renderingperformance-auditingtools32Understandinghowbrowsersrenderwebpages32.UsinggoogleChrome'sTimelinetool32.Identifyingproblemevents:thyenemyisjank35.MarkingpointsinthetimelinewithJavaScript41Renderingprofilersinotherbrowsers422.5BenchmarkingJavaScriptinChrome482.6Simulatingandmonitoringdevices45Simulatingdevicesinthedesktopwebbrowser45.DebuggingwebsitesremotelyonAndroiddevices46.Debuggingwebsitesremotelyoniosdevices472.7Creatingcustomnetworkthrottlingprofiles482.8Summary50Optimizingcss513.1Donttalkmuchandstaydry52WriteshorthandCss52UseshallowCssselectors55.Cullingshallowselectors56LeSSismoreandtamingSASS57.Donurepeatyourself58GoingDRY58.FindingredundancieswithcssCSS59-SegmentCSs61Customizeframeworkdownloads633.2Mobile-firstisuser-first63Mobile-firstvs.desktop-first64.Mobilegeddon67.UsingGoogle'smobile-friendlyguidelines67.Verifyingasite'smobile-friendliness688.3Performance-tuningyourCss69Avoidingthe@importdeclaration69.@importserializesrequests69.parallelizesrequests70.PlacingCssintheshead>71PreventingtheFlashofUnstyledContent71Increasingrenderingspeed72.Usingfasterselectors72Constructingandrunningthebenchmark73Examiningthebenchmarkresults74.Usingflexboxwherepossible75Comparingboxmodelandflexboxstyles75.Examiningthebenchmarkresults77CoNTENTS3.4WorkingwithCSStransitions77UsingCsstransitions77.ObservingCsstransitionperformance79Optimizingtransitionswiththewill-changeproperty803.5Summary8UnderstandingcriticalCSS834.1Whatdoescriticalcsssolve?83Understandingthefold84Understandingrenderblocking854.2HowdoescriticalCSswork?86Loadingabove-the-foldstyles86Loadingbelow-the-foldstyles874.3Implementingcriticalcss88Gettingtherecipewebsiteupandrunning88Identifyingandseparatingabove-the-foldcss90-Loadingbelow-the-foldcss964.4Weighingthebenefits974.5Makingmaintainabilityeasier984.6Considerationsformultipagewebsites1004.7Summary101Makingimagesresponsive1025.1Whythinkaboutimagedelivery?1035.2Understandingimagetypesandtheirapplications105Workingwithrasterimages105.WorkingwithSVGimages108Knowingwhatimageformatstouse1095.8ImagedeliveryinCSs110highdpidisplayswithmediaqueries113UsingSVGtargetingTargetingdisplaysinCssbyusingmediaqueries111.7backgroundimagesinCSS1165.4ImagedeliveryinHTML117Theuniversalmax-widthruleforimages117.Usingsrcset118Usingthepicture>element121PolyfillingsupportwithPicturefill125.UsingSVGinHTML1275.5Summary1286Goingfurtherwithimages1306.1Usingimagesprites181Gettingupandrunning132Generatingtheimagesprite132Usingthegeneratedsprite134.Considerationsforimagesprites135.FallingbacktorasterimagespriteswithGrumpicon136CONTENTS6.2Reducingimages137Reducingrasterimageswithimagemin138.OptimizingSVGimages1436.3EncodingimageswithWebP145EncodinglossyWebPimageswithimagemin146.EncodinglosslesswebpImageswithimagemin147.SupportingbrowsersChatdontsupportWebP1496.4Lazyloadingimages150Configuringthemarkup151.Writingthelazyloader153AccommodatinguserswithoutJavaScript1606.5Summary162Fasterfonts1647.1Usingfontswisely165Selectingfontsandfontvariants165.Rollingyourown@font-facecascade1677.2CompressingEOTandTTFfontformats1727.3Subsettingfonts173Manuallysubsettingfonts174-Deliveringfontsubsetsbyusingtheunicode-rangeproperty1787.4Optimizingtheloadingoffonts184Understandingfont-loadingproblems185.UsingtheCssfontdisplayproperty186.Usingthefont-loadingAPI188UsingFontFaceObserverasfallback1927.5Summary194KeepingJavaScriptleanandfast1968.1Affectingscript-loadingbehavior197Placingtheelementproperly197erRingwoasynchronousscriptloading199.Usingasync199Usingasyncreliablywithmultiplescripts2018.2UsingleanerQuery-compatiblealternatives208Comparingthealternatives203.Exploringthecontenders203Comparingfilesize204.Comparingperformance204Implementinganalternative205.UsingZepto205UnderstandingcaveatsonusingShoestringorSprint206CoNTENTS8.3GettingbywithoutjQuery207CheckingforthedOMtobeready207.Selectingelementsandbindingevents208Usingclasslisttomanipulateclassesonelements210.Readingandmodifyingelementattributesandcontent211.MakingajaXrequestswiththeFetchAPI214UsingtheFetchAPI214.PolyfillingtheFetchAPI2158.4AnimatingwithrequestAnimationFrame217requestAnimationFrameataglance217.Timerfunction-drivenanimationsandrequestAnimationFrame217.Comparingperformance218ImplementingrequestAnimationFrame219Droppinginvelocity.js2218.5Summary222Boostingperformancewithserviceworkers2239.1Whatareserviceworkers?2249.2Writingyourfirstserviceworker226Installingtheserviceworker226Registeringtheserviceworker227-Interceptingandcachingnetworkrequests230Measuringtheperformancebenefits233.Tweakingnetworkrequestinterceptionbehavior2339.3Updatingyourserviceworker286Versioningyourfiles237-Cleaningupoldcaches2389.Summary24070Fne-tumningassetdeliverycomFollowingcompressionguidelines244UsingBrotlicompression24710.2Cachingassets251Understandingcaching252Craftinganoptimalcachingstrategy256.Invalidatingcachedassets25910.3UsingCDNassets261UsingCDN-hostedassets261WhattodoifaCDNfails264VerifyingCDNassetswithSubresourceIntegrity26510.4Usingresourcehints267Usingthepreconnectresourcehint267.Usingtheprefetchandpreloadresourcehints269.Usingtheprerenderresourcehint27110.5Summary272