The Truth of Google Lighthouse Performance | Housing.com

Google lighthouse is an awesome tool to find out the performance issues in your web application and list down all the action items. This list helps you fix ... TheTruthofGoogleLighthousePerformanceMakeaninformativedecisionbeforepickinganotheroptimizationsuggestionWhensomeonestartslookingforoptimizingtheperformanceoftheirwebapplicationtheyimmediatelycomeacrossthistoolcalledlighthousebyGoogle.Googlelighthouseisanawesometooltofindouttheperformanceissuesinyourwebapplicationandlistdownalltheactionitems.ThislisthelpsyoufixtheissuesandseethegreencolorperformancescoreonyourGooglelighthousereport.WithtimeGooglelighthousehasbecomeadefactostandardforwebperformancemeasurement.Googleispushingiteverywherefromchromedevtoolstobrowserextensions,pagespeedinsighttoweb.dev,andevenwebmastersearchconsole.AnywhereifyoutalkaboutperformanceyouwillseetheGooglelighthouseauditingtool.ThisarticlewillcovertheusageofGooglelighthouse,itsstrengths,anditsweaknesses.Wheretotrustitandwheretonot.Googlehasadvertisedallthebenefitsofthetoolsandintegrateditinallofitsothermajortoolslikesearchconsole,pagespeedinsight,andweb.dev.Thisforcespeopletoimprovetheirscoresometimesatthecostofsomethingimportant.ManyteamsdoweirdthingstoseegreenticksintheirGooglelighthousereportwithoutknowingtheexactimpactofitontheirconversionandusability.IssueswhichneedstobesolvedCPUpowerissueGoogleLighthousecoversonlythemostgenericissuesanddoesnotunderstandyourapplicationbehaviorSolvingthescoreinconsistencyissueUsinghoistedservicesSelfhoistedGooglelighthouseinstanceIntegratingWebVitalsConsideringGooglelighthousesuggestionsHowfastpagerendered(FCP,LCP,SpeedIndex)PageInteractivity(TBT,TTI)Stability(CLS)ConclusionIssueswhichneedstobetackledA)CPUpowerissueGooglelighthousehasmadeitveryeasytogenerateyoursiteperformancereport.Openyoursite,gotodev-toolsclickAuditTab,andrunthetest.Boomyougottheresults.Butwaitcanyoutrustthescoreyougot,theanswertothisisabigno.Yourresultsvaryalotwhentheyareexecutedonahigh-endmachinevswhenexecutedonalow-endmachinebecauseofdifferentavailableCPUcyclestotheGooglelighthouseprocess.YoucanchecktheCPU/MemorypoweravailabletotheGooglelighthouseprocessduringthetestatthebottomofthisreport.TheGooglelighthouseteamhasdoneagreatjobinthrottlingthecputobringcomputationcyclesdowntoanaverageofmostuseddeviceslikeMOTOG4orNexus5X.Butonaveryhigh-endmachinelikethenewfancyMacBookProthrottlingCPUcyclesdoesnotdropCPUcyclestothedesiredlevel.ForexampleLetahigh-endprocessorlikeInteli7canexecute1200instructionsinasecbythrottlingit4xonly300instructionswillgetexecuted.Similarly,alow-endprocessorlikeinteli3canonlyexecute400instructionsinasecandbythrottlingitto4xonly100instructionscangetexecuted.Itmeanseverythingoninteli7oranyotherhigher-endprocessorwillbeexecutedfasterandwillresultinmuchbetterscores.OneofthecriticalmatricesintheGooglelighthouseisTBT(TotalBlockingTime)whichdependsonCPUavailability.HighCPUavailabilityensuresafewernumberoflongtasks(tasksthattakemorethan50ms).LessthenumberoflongtasksloweristheTBTvalueandhigheristheperformancescore.Thisisnottheonlyproblem,Googlelighthousescorescandifferbetweenmultipleexecutionsonthesamemachine.ThisisbecauseGooglelighthouseorinfactanyapplicationcannotcontroltheCPUcyclesasthisisthejoboftheoperatingsystem.Theoperatingsystemdecideswhichprocesswillgethowmanycomputationcycles.ItcanreduceorincreaseCPUavailabilitybasedonmanyfactorslikeCPUtemperature,otherhighprioritytasks,etc.BelowaretheGooglelighthousescoresonthesamemachinewhenitisexecuted5timesforhousing.comonceseriallyandonceinparallel.Whenexecutedseriallyresultsarecompletelydifferentthanwhenruninparallel.Theoperatingsystemdistributesthecpucycleamong5processeswhenrunninginparallel.Duringserialexecution,allavailablecpucycleswereutilizedbyasingleprocess.WhentheGooglelighthouseisexecuted5timesonthehousinghomepageserially. letnumberOfTests=5; leturl='https://housing.com'; letresultsArray=[]; (asyncfunctiontests(){ for(leti=1;i<=numberOfTests;i++){ letresults=awaitlaunchChromeAndRunLighthouse(url,opts) letscore=results.categories.performance.score*100; resultsArray.push(score); } console.log(median(resultsArray)); console.log(resultsArray); }()); Median-84[83,83,84,84,85]Resultsareprettymuchconsistent.Whenthesametestisexecutedinparallel. constexec=require('child_process').exec; constlighthouseCli=require.resolve('lighthouse/lighthouse-cli'); const{computeMedianRunasmedian}=require('lighthouse/lighthouse-core/lib/median-run.js'); letresults=[],j=0; for(leti=0;i<5;i++){ exec(`node${lighthouseCli} https://housing.com --output=json`,(e,stdout,stderr)=>{ j++; results.push(JSON.parse(stdout).categories.performance.score); if(j===5){ console.log(median(results)); console.log(results); } }); } Median-26[22,25,26,36,36]Youcanclearlyseethedifferenceinscoresbetweenthetwoapproaches.B)GooglelighthousecoversonlythemostgenericissuesanddonotunderstandyourapplicationbehaviorThisisthemostcomplexissuewhichIseewithGooglelighthousereporting.Everyapplicationisdifferentandoptimizestheavailableresourcewhereitseesthebestfit.Gmailisthebestexampleofthiscase.Itprioritizesemailsoveranyotherthingsandmailsgetinteractiveassoonastheapplicationloadsinthebrowser.OtherapplicationslikeCalendar,Peak,Chat,Taskskeeploadinginthebackground.IfyouwillopenthedevtoolswhenGmailisloadingyoumightgetaheartattackseeingthenumberofrequestsitmakestoitsservers.Calendar,Chat,Peak,etc.addstoomuchtoitsapplicationpayloadbutGmail’sentirefocusisonemails.GoogleLighthousefailstounderstandthatandgivesaverypatheticscoretoGmailapplications.TherearemanysimilarapplicationslikeTwitter,arevampedversionofFacebook.PerformanceisonecoremetricforthesewebsitesbuttheyallfailtoimpressGooglelighthouse.Allthesecompanieshavesomeofthebestbrainswhoverywellunderstandthelimitationsofthetool.TheyknowwhattofixandwhataspectstobeignoredfromGooglelighthousesuggestions.Theproblemiswithorganizationsthatdonothaveresourcesandtimetoexploreandunderstandtheselimitations.Searchgooglefor“perfectlighthousescore”andyouwillfindahundredarticlesexplaininghowtoachieve100ontheGooglelighthouse.MostofthemhavenevercheckedothercriticalmetricslikeconversionorBouncerate.Theonlysolutiontothisissueistomeasuremoreandregularly.Definecoremetricsyourorganizationisconcernedaboutandprioritizethemproperly.Performancehasnomeaningifitisatthecostofyourcoremetricslikeconversion.SolvingthescoreinconsistencyissueInconsistencyinGooglelighthousescorescannotbesolvedwith100%accuracybutcanbecontrolledtoagreaterextent.A)UsinghoistedservicesCloudservicesareagainanawesomewaytotestyoursitequicklyandgetabasicperformanceidea.SomeofthegoogleimplementationslikepagespeedinsighttriestolimittheinconsistencybyincludingGooglelighthouselabdataandfielddata(googletrackstheperformancescoreofallsitesyouvisitifyouallowGoogletosyncyourhistory).WebpagetestqueuesthetestrequesttocontrolCPUcycles.Butagaintheyalsohavetheirownlimitations.Cannotmakealltestsserialasthiswillincreasewaitingtimefortests.Makingthemparallelondifferentmachineswillincreaseinfracosttoinfinity.ParallelexecutiononthesamemachinewillresultinunevenCPUcycledistribution.DifferentprovidershavedifferentthrottlingsettingslikesomeprefertonotthrottleCPUwhenexecutingtestsforthedesktopsite.Whichmayormaynotbeaperfectsettingformostpeople.Servicesneedtohaveserversallaroundtheworld(webpagetestalreadyhasthisfeature)tounderstandthelatencybehaviorinyourtargetlocation.Youwillbeamazedbyseeingthedeltabetweenthesmallestandlargestoftentestrunsofasinglepageonweb.dev.Prefertotakethemedianofallresultsorremovetheoutliersandtakeavgoftheremainingtests.B)SelfhoistedGooglelighthouseinstanceGooglelighthouseteamhasagaindoneagreatjobherebyprovidingaCIlayerforselfhoisting.TheproductislighthouseCI.ThisisanamazingtoolthatcanbeintegratedwithyourCIProvider(GithubActions,Jenkins,Travis,etc)andyoucanconfigureitasperyourneeds.Youcanchecktheperformancediffbetweentwocommits,TriggerGooglelighthousetestonyournewpullrequest.Createadockerinstanceofit,thisisawaywhereyoucancontrolCPUavailabilitytosomeextentandgetconsistentresults.Wearedoingthisathousing.comandprettymuchhappywiththeconsistencyofresults.TheonlyproblematpresentIseewiththisapproachisItistoocomplextosetup.Wehavewastedweekstounderstandwhatexactlyisgoingon.Documentationneedsalotofimprovementandtheprocessofintegrationshouldbesimplified.C)IntegratingWebVitalsWebvitalsarecoreperformancemetricsprovidedbychromeperformanceAPIandhaveaclearmappingwiththeGooglelighthouse.Itisusedtotrackfielddata.SenddatatrackedtoGAoranyothertoolyouuseforthatsake.Weareusingperfume.jsasitprovidesmoremetricsweareinterestedinalongwithallmetricssupportedbywebvitals.ThisisthemostconsistentandreliableamongalltheotherapproachesasItistheaverageperformancescoreofyourentireuserbase.Wecanmakehugeprogressinoptimizingourapplicationbyvalidatingthisdata.WeworkedonimprovingourTotalBlockingTime(TBT)andtheLargestContentfulPaint(LCP)afteridentifyingproblemareas.WeimprovedTBTbyatleast60%andLCPby20%.TBTimprovementsGraphLCPimprovementsGraphTheaboveimprovementswereonlypossiblebecauseweweremeasuringthings.Measuringyourcriticalmetricsistheonlywaytomaintaintherightbalancebetweenperformance,conversion,etc.Measuringwillhelpyouknowwhenperformanceimprovementishelpingyourbusinessandwhenitiscreatingproblems.DevelopersapplyallsortsoftrickstoimprovetheirGooglelighthousescores.Fromlazyloadingoffscreencontenttodelayingsomecriticalthird-partyscripts.Inmostcases,developersdonotmeasuretheimpactoftheirchangeonuserexperienceortheuserslostbythemarketingteam.ConsideringGooglelighthousesuggestionsLighthouseperformancescoresdependuponthethreeparametersHowfastpagerendered(FCP,LCP,SpeedIndex)PageInteractivity(TBT,TTI)Stability(CLS)Toimproveyourperformancescore,theGooglelighthousereportprovidestonsofsuggestions.Youneedtounderstandthesuggestionsandcheckhowfeasibletheyareandhowmuchvaluethosesuggestionswillbringtoyourwebsite.LetustakeafewsuggestionsfromeachcategoryoftheGooglelighthousereportandseewhatarethehiddencostofimplementingthem.Howfastpagerendered(FCP,LCP,SpeedIndex)GoogleLighthousesuggestsoptimizingimagesbyusingmodernimageformatssuchaswebporavifandalsoresizingthemtothedimensionoftheimagecontainer.ThisisaverycooloptimizationandcanhaveahugeimpactonyourLCPscore.Youcanenhanceitfurtherbypreloadingfirstfoldimages.Tobuildasystemwhereimagesareresizedontheflyorpreresizedinmanypossibledimensionsonuploadisatedioustask.Inbothways,dependinguponyourscaleyoumightneedtotakeahugeinfraburdenthatneedstobemaintainedandalsoinvest.Abetterapproachistoimplementitonasinglepageforalimitedimageandtrackyourmostcriticalmetricslikeconversion,bouncerate,etc.AndifyouarereallyhappywiththeROIthentakeittoliveforallofyourimages.PageInteractivity(TBT,TTI)GoogleLighthouserecommendsreducingyourJavascriptandCSSsizeasmuchaspossible.JavascriptorCSSexecutioncanchokethemainthreadandtheCPUwillbeunavailableformoreimportantstufflikehandlinguserinteraction.Thisisafairideaandmostpeopleunderstandthelimitationofjsbeingsingle-threaded.ButGoogletookthewrongpathhere.Intheupcomingversion,theGooglelighthousewillstartsuggestingthereplacementoflargerlibrarieswiththeirsmallercounterparts.Therearemultipleproblemswiththisapproach.Mostlibrariesgetlargerbecausetheysolvemorecornercasesandfeaturerequests.Whydopeoplesaywebpackistoughbecauseithandlessomanyedgecasesthatnootherbundlerhandles.Imagineifwebpackdidnotexistthenhalfofuswouldhavestuckinunderstandingthedifferentkindsofmodulesystemsjssupports.Similarly,thepopularfrontendframeworksarelargebecausetheyhandletoomanythings,frombackwardcompatibilitytomorebugs.Jumpingtoanewlibrarymaycauseissueslikeweakdocumentation,bugs,etc.Soifyouplantopickthisitemgetreadytohaveanexpertdeveloperteam.ItishighlyunlikelythatGooglewillrecommendPreacttoReactbecauseoftheemotionalattachmentcommunityhaswiththeReactframework.Doingthisisunprincipledandunfairwiththemaintainersofprojectswhosecommunityisnotaggressiveinnature.Googleitselfdoesnotfollowrulescreatedbythemselves.MostofthegoogleproductsloadwaytoomuchJavascript.Acompanywhichhasthebestresourcesaroundtheworldhasneverfocusedontheirownlighthousescorebutwantstheentireworldtotakeitseriously.ThereseemstobesomehiddenagendaofGooglebehindthislikefasterthewebbetteristheiradrevenue.Googleshouldlearnfromthisfamousquote“Bethechangethatyouwishtoseeintheworld.”-MahatmaGandhiBeforetakinganysteptoreducingjavascriptonyourpagelikelazyloadingoff-screencomponentspleasecalculateitsimpactonyourprimarymetricslikeconversion,userexperience,etc.Stability(CLS)Everywebsitemusttrytoavoidanykindoflayoutshiftwhichmaycauseissuesinuserexperience.ButtherewillbecaseswhereyouwillnothavemanyoptionstoavoidCLS.Letawebsitewanttopromoteappdownloadstouserswhohavealreadynotinstalledtheapp.Chromehasaddedsupporttodetectifyourappisalreadyinstalledonthedevice(usinggetInstalledRelatedAppsAPI)butthisinformationisnotavailabletotheserveronthefirstrequest.Whattheservercandoismakeaguessanddecideifitneedstoappendtheappdownloadbanneronthepageornot.Iftheserverdecidestoadditandtheappisalreadypresentonthedevice,theDownloadbannerneedstoberemovedfromthepage,andsimilarlywhentheserverdecidestonotincludethedownloadbannerandtheappisalreadynotinstalledonthedeviceitwillbeappendedtotheDOMontheclientwhichwilltriggerCumulativelayoutshift(CLS).ToavoidCLSyouwillremovethebannerfromthemainlayerofthepageandshowitasamodal,floatingelementorfindsomeotherwaytoshowit,butwhatifyougetmaximumdownloadswhenthebannerispartofyourpage.Wherewillyoucompromise?Onafunnynote,MostpeoplehavealreadyexperiencedCLSonthegooglesearchresultpage.ConclusionGoogleLighthouseisanawesomeperformancetoolbuiltbyGoogleandcanhelpyouimproveyourwebsiteperformance.TherearemanyissuesrelatedtohowGooglelighthouseworkandtheconsistencyoftheresults.DeviceswithdifferentconfigurationscangivecompletelydifferentscoressoitisimportanttosticktoasingledeviceconfigurationwhilerunningaGooglelighthouseprocess.ThesamedevicecangivedifferentscoresbasedonhowmuchCPUisavailabletotheGooglelighthouseprocessduringthetest.Usingcloudsolutionslikeweb.devisabettersolutiontogetconsistentresultsthanrunningaGooglelighthouseonyourlocalmachine.Runningselfhoistedserviceisbetterthancloudsolutionsbecauseresultsincloudsolutionscangetinconsistentbasedontheamountoftraffictheyarehandling.Also,Googlelighthousesettingscanbebettermanipulatedinaself-hostedenvironment.Aself-hostedenvironmentrequiresexpertiseandtimebecauseoflimitedresourcesanddocumentationbutisveryscalableandintegratesverywellwiththemostpopularCIproviders.Trackingrealuserdataisthemostreliableapproachtotrackwebperformance.Googlewebvitalorperfume.jsissomeofthelovelylibrariestotrackrealuserdata.Definecriticalmetricstoyourwebsitelikeconversion,bouncerate,userexperience,etc.PlananyoptimizationsuggestionfromtheGooglelighthouseaftertrackingtheimpactofitonyourcriticalmetrics.NeverdoprematureoptimizationforthesakeofahighGooglelighthousescore.Simplelazyloadingofoffscreencomponentstoreducejavascriptsizeinsomecasescanreduceuserexperiencesoprefercautionwhilemakingsuchchanges.WRITTENBYAshutoshSharmaEngineeringManager@Housing.com.Ilovelearningandteaching.Webperformanceenthusiast.DNSoptimizations→