A Deep Dive Into the GTmetrix Speed Test Tool - Kinsta

GTmetrix was developed by GT.net, a company based out of Canada, as a tool for their hosting customers to easily determine the performance ... Skiptocontent FindouthowmovingtoKinstacouldsaveyou$2,400+ayearonsitecosts. Home ResourceCenter KinstaBlog ADeepDiveIntotheGTmetrixSpeedTestTool BrianJackson, April29,2022 333 Shares Therearealotofoptionsyouhaveasawebsiteownerwhenitcomestorunningspeedteststo checkperformance.Previouslywetookanin-depthlookatthe Pingdom tool.TodaywewanttodiveintohowtobetteruseandunderstandthedatafromthepopularwebsitespeedtesttoolGTmetrix.Toolslikethisrelyongradingsystemsandscores,alongwithwarningsofwhatmightbewrongonyoursite. Sometimesthesecanbedownrightconfusing, andsotakingsometimetointerpretwhattheyactuallymean,canhelpyounotjustincreaseyourscores,butalsotheperformanceofyoursite,whichiswhatreallymatters. SeehowKinstastacksupagainstthecompetition. Selectyourprovider WPEngine SiteGround GoDaddy Bluehost Flywheel HostGator Cloudways AWS DigitalOcean DreamHost Other Compare Knowinghow@GTmetrixworksispricelessinformationforWordPresswebsiteowners!⏱ClicktoTweet GTmetrixwasdevelopedbyGT.net,acompanybasedoutofCanada,asatoolfortheirhostingcustomerstoeasilydeterminetheperformanceoftheirsite.BesidesPingdom,itisprobablyoneofthemostwellknownandusedspeedtestingtoolsonthewebtoday!Infact,thereasonwearewritingthisisthatwehavealotofKinstacustomersthatarealwaysaskingushowtofollowtheadvicetheyseeontheirGTmetrixreports.Comparedtootherdevelopertools,GTmetrixisprettyeasytouseandthebeginnercanpickitupprettyquickly.ItusesacombinationofGooglePageSpeedInsightsandYSlow togeneratescoresandrecommendations. GTmetrixspeedtesttool GTmetrixAnalysisOptions ThebasicversionofGTmetrixiscompletelyfreeandyoucangainaccesstoanumberofoptionssimplybysigningupforanaccount.Theyalsohavepremiumplans,butintoday’spost,wewillbeusingthefreeversion.Ifyouhaveanaccountyoucanusespecifyanumberofadditionalanalysisoptions. ThefirstistheabilitytochoosethelocationinwhichyouwanttotestyourURL.Thephysicallocationyouchooseisactuallyveryimportantasitrelatestowhereyourwebsiteisactuallyhosted.Thelesslatency,thefasteryourloadtimes.Currentlyavailablelocationsinclude: Dallas,USA HongKong,China London,UK Mumbai,India Sydney,Australia SãoPaulo,Brazil Vancouver,Canada Youcanchoosewhichbrowseryouwanttouse.YoucantestwithChrome(Desktop)andFirefox(Desktop).Mobileversionsareavailableintheirpremiumplans.Theyalsoallowyoutochangetheconnectionspeed,whichmeansyoucansimulatevariousconnectiontypestoseehowtheyaffectyourpageloads. GTmetrixtestformatoptions Additionaloptionsincludetheabilitytocreateavideo.Thiscanhelpyoudebugissuesasyoucanseehowthepagerenders.TheAdBlock Plusisanicefeature.Ifyouarerunninga3rdpartyadnetworksuchasGoogleAdsense,youcanenablethisoptiontoseethefullimpactadshaveonyourloadtimes. GTmetrixextraoptions Additionaloptionsincludestoppingthetestonload(whichwewilldiveintolater),beingabletosendacookiealongwithyourrequest,useHTTPauthentication,theabilitytowhitelistandblacklistURLs,screenresolutionanddevicepixelratio,anduseragentoverride. Analysiswiththe GTmetrixSpeedTestTool Awebpageismadeupofdifferentassets,suchasHTML,JavaScript,CSS,andimages.Eachofthesegeneratesrequeststorenderwhatyouseeonyourwebsite.Typicallythemorerequestsyouhave,thesloweryourwebsitewillload.Thatisnotalwaysthecase,butitistruemostofthetime. BelowwearegoingtobreakupeachGTmetrixsectionandexplaininmoredetailwhattheinformationmeansasitpertainstotheoverallperformanceofyourwebsiteandwhattodoabouttherecommendations. Remembernottoobsesstoomuchonthescores,butratheronmakingactualspeedimprovementsonyoursite. GTmetrixSummary Performance Structure WaterfallChart Video History GTmetrixSummary(PerformanceScoresandDetails) WhenyourunyourWordPresswebsitethroughGTmetrixitgeneratesaperformancereportwhichincludesyour“GTmetrixGrade”and“WebVitals”. TheGTmetrixGradeiscalculatedfromtwometrics–PerformanceandStructure. GTmetrixPerformanceistheperformancescorefromtheLighthousesiteaudittool GTmetrixStructureisaproprietaryperformancemetricthatmeasurestheoverallperformanceofapage. In2020,GoogleintroducedastandardizedsetofwebperformanceanduserexperiencemetricscalledWebVitals.WebVitalsconsistsofavarietyofmetrics,buttheonesthatGTmetrixtakesintoaccountareLargestContentfulPaint(LCP),TotalBlockingTime(TBT),andCumulativeLayoutShift(CLS). LargestContentfulPaint(LCP)istheamountoftimeittakesforthelargestpartofyourpagetoload.Forsomesites,theLCPcanbealargeheroimage,whileonothersites,LCPmayrefertothebodytext. TotalBlockingTime(TBT)istheamountoftimeapageisblockedbeforeausercaninteractwithit.Render-blockingCSSandJScanhaveahugeimpactonTBT. CumulativeLayoutShift(CLS)referstotheshiftingofelementswhileapageisloading.Forexample,thelayoutofapagecontainingembeddedtweetscanshiftdramaticallyasthepageloads. Inourexample,weareusingourcasestudydomainkinstalife.com,whichishostedonKinsta.Inourfirstspeedtest,oursiteregisteredthefollowingstats. GTmetrixGrade–B GTmetrixPerformance–85% GTmetrixStructure–83% LCP–1.0s TBT–0ms CLS–0 GTmetrixspeedtestforkinstalife.com. WethenrananadditionaltestandnowourGTmetrixGradeis“A”!Whatisthatallabout?YoumightnoticethisaswellifyouarerunningyourwebsitethroughtheGTmetrixspeedtesttoolmultipletimes.Oneofthereasonsthishappensisbecauseofcaching,bothDNScachingandservercaching.Findoutwhyfurtherbelowinourwaterfallanalysis. OursecondspeedtestwithGTmetrix. TheGTmetrixsummarypagealsocontainsaspeedvisualization,whichshowsatimelineofkeyeventsduringapageload.Inthescreenshotbelow,youcanseeTTFB,FCP,LCP,onloadtime,timetointeractive,andfullyloadedtimeforkinstalife.com. Atthebottomofthesummarypage,therearealso“TopIssues”and“PageDetails”sections.Under“TopIssues”,youcanseealistofhighpriorityitemstofix,while“PageDetails”providespercentageandfilesizebreakdownsofyourpage. GTmetrixtopissuesandpagedetails. Performance NextupistheGTmetrix“Performance”tab,whichshowsanumberofusefulmetricssourcedfromLighthouseperformancedata.InadditiontotheLCP,TBT,andCLSshownonthesummarypage,the“PerformanceMetrics”sectionalsoshowsSpeedIndex(SI),TimetoInteractive(TTI),andFirstContentfulPaint(FCP). GTmetrixLighthouseperformancemetrics. Whilethe“PerformanceMetrics”sectiondoesn’tshowyouexactlywhatyouneedtofix,itdoesgiveaniceoverviewaboutwhichkeyuserexperiencemetricsyoucanimproveon. Furtherdownthepage,GTmetrixalsoshowsafewmoretraditional“BrowserTiming”statsincludingOnloadTime,TimetoFirstByte,FullyLoadedTime,andmore.Inthepast,thesetraditionalmetricswereveryimportant.However,withGooglepavingthewaywithstandardizedmetricswithWebVitals,werecommendoptimizingforthoseinstead.Inmostcases,you’llfindthatoptimizingforWebVitalswillalsoresultingoodbrowsertimingmetrics. GTmetrixbrowsertimingmetrics. Structure TheGTmetrix“Structure”tabiswhereyoucanviewspecificissuesaffectingtheperformanceofyoursite.Thispageisveryusefulbecauseitprovidesyouwithactionableinformationlike“eliminaterender-blockingresources”and“minifyCSS”tostartoptimizingyoursite. WewilltrytocoverthemostcommonandpopularonesweseeWordPresssiteownersstrugglingwith.Makesuretoalsobookmarkthispostaswewillbeconstantlyupdatingit.Generally,ifyouimprovetheseonyoursite,youshouldseeanincreaseinperformance. GTmetrixPageSpeedscores ServeScaledImages Whenitcomestoworkingwithimagesonyourwebsite,youshouldalwaystryanduploadthemtoscale,andnotlet CSSresizethem.Ifyoudon’t,youwillendupwiththeservescaledimagesrecommendation. IfyouareusingWordPress,bydefault,itresizesyourimageswhenuploadingthemtothemedialibrary.Thesesettingscanbefoundunder“Settings>Media.”Youwillwanttoensurethatthemaxwidthisclosetothewidthofyoursite.ThiswayCSSisnottryingtoresizeyourimagedowntofitinside.Youcouldalsoautomaticallyresizethemwithanimageoptimizationplugin. Servescaledimages InlineSmallCSS InliningyourCSSisusuallynotrecommendedasitwillincreasetheoveralldownloadsizeofyourpagerequest.However,ifyoursiteissmall,withminimalrequests,itcouldimproveyourperformance. InlinesmallCSS ToeasilyinlineyourCSSyoucanuseafreepluginlikeAutoptimize.Simplycheckthe“InlineallCSS?”optionandthenensureyouhaveexcludedtheadditionalCSSfilesyoudon’tinline. AutoptimizeinlineCSS InlineSmallJavaScript JustlikewithinliningsmallCSS,thesamethingappliesforinliningsmallJavaScript.Itisusuallynotrecommendedasitwillincreasetheoveralldownloadsizeofyourpagerequest.However,ifyoursiteissmall,withminimalrequests,itcouldimproveyourperformance.Again,youcanusetheJavaScriptsettingsofAutoptimize. InlinesmallJavaScript LeverageBrowserCaching Leveragebrowsercachingisaverycommonrecommendationthatpeoplestrugglewith.ThisisgeneratedduetonothavingthecorrectHTTPcacheheadersonyourwebserver.Seeourin-depthpostonhowtofixtheleveragebrowsercachingwarning.Youcanonlyfixthisonresourcesyoucontrol.Forexample,ifyouareseeingthisonthird-partyadnetworks,thereisnothingyoucando. Leveragebrowsercaching ServeResourcesFromaConsistentURL IfyouareareseeingtheserveresourcesfromaconsistentURLitismostlikelythatyouhaveidenticalresourcesbeingservedfromthesameURL.Alotoftimesthiscanhappenwhentherearequerystringsinvolved.Checkouthowtoremovequerystringsfrom staticresources.Oncetheyaregone,itshouldnolongerhavetoloadittwice. ServeresourcesfromaconsistentURL DeferParsingofJavaScript JavaScriptandCSSarebydefaultrender-blocking.Thismeanstheycanpreventthewebpagefrombeingdisplayeduntiltheyaredownloadedandprocessedbythebrowser. ThedeferattributetellsthebrowsertoholdoffondownloadingtheresourceuntilHTMLparsingiscomplete.AfeweasywaystofixthisistoutilizethefreeAutoptimizeorAsyncJavaScriptplugins.Makesuretocheckoutourin-depthpostonhowtoeliminaterender-blockingJavaScriptandCSS. DeferparsingofJavaScript Foranin-depthexplanation,read:HowtoDeferParsingofJavascriptWarninginWordPress(4Methods). MinifyCSSandJavaScript Minificationisessentiallyremovingallunnecessarycharactersfromsourcecodewithoutchangingitsfunctionality.Thiscouldincludelinebreaks,emptyspace,indents,etc.Bydoingthisitcansavebytesofdataandspeedupdownloading,parsing,andexecutiontime. MinifyCSSandJavaScript Again,thefreeAutoptimizepluginisgreatforthis.Simplyensurethatthe“OptimizeJavaScriptCode”and“OptimizeCSSCode”arebothchecked.Ifyouhavealargesite,youmightalsowanttoplaywiththeadvancedsettingsunderneath,assomecouldharmtheperformanceonyoursite.InliningorcombiningCSSandJavaScriptonlargesitesisusuallynotrecommended.ThisiswherethepowerofHTTP/2comesintoplay. AutoptimizeminifyCSSandJavaScript IfyouareaKinstacustomer,youcantakeadvantageofthecodeminificationfeaturethatisbuiltrightintotheMyKinstadashboard.ThisallowscustomerstoquicklyandeasilyenableautomaticCSSandJavaScriptminificationwithasimpleclick,speedinguptheirsiteswithzeromanualeffort. OptimizeImages AccordingtoHTTPArchive,asofApril2017,imagesmakeuponaverage66%ofatotalwebpage’sweight.SowhenitcomestooptimizingyourWordPresssite,imagesisbyfarthefirstplaceyoushouldstart!It’smoreimportantthanscriptsandfonts. Optimizeimages Inaperfectworld,everyimageshouldbecompressedandoptimizedbeforeuploadingtoWordPress.Butunfortunately,thatjustisn’trealistic.Becauseofthis,werecommendusingagoodimageoptimizationplugin.Thiswillhelpautomaticallycompressyourimages,resizethem,andensuretheyarelightweightandfastloadingonyoursite.Checkoutourin-depthpostonhowtooptimizeimagesforweb. ReduceInitialServerResponseTime ForWordPress,themainculpritforslowinitialserverresponsetimesisthelackofpagecaching.Withoutpagecaching,WordPressusesPHPtodynamicallybuildpagesforeachindividualrequest,whichmeansitcangetoverwhelmedwithrequestsquickly.Withpagecachingenabled,yoursitecanserverpre-generatedHTMLfiles,whichismuchfasterandmorescalablethanusingPHPtofulfilleachpagerequest. Reduceinitialserverresponsetime. Ifyou’rehostedonKinsta,youdon’thavetoworryaboutpagecachingbecausewetakecareofthatforyouwithourNginxconfiguration.IfyourWordPresshostdoesn’tsupportpagecaching,youcaninstallacachingpluginlikeWPRocketorW3TotalCache.Toreduceserverresponsetimeevenfurther,werecommendintegratingCloudflareAPOwithyourWordPresssite.ThisinnovativeoptimizationservicefromCloudflaredistributesyoursite’sHTMLpagesaroundtheworld,whichcanreduceserverresponsetimeglobally. MinifyHTML JustlikeCSSandJavaScript,HTMLcanalsobeminifiedtostripoutunnecessarycharactersandsaveyoubytesofdatatospeedupexecutiontime. MinifyHTML ThefreeAutoptimizepluginisalsogreatforthis.Simplyenablethe“OptimizeHTMLCode”option. AutoptimizeoptimizeHTMLcode EnableGZIPCompression GZIP isafileformatandasoftwareapplicationusedforfilecompressionanddecompression.GZIPcompressionisenabledserver-side,andallowsforfurtherreductioninthesize ofyourHTML,stylesheets,andJavaScriptfiles.Itwillnotworkon imagesasthesearealreadycompressedinadifferentway.Somehaveseenupto70%reductionsduetocompression.ItisprobablyoneoftheeasiestoptimizationsyoucouldmakewhenitcomestoWordPress.Note:GZIPcompressionisenabledbydefaultonallKinstaservers. SignUpFortheNewsletter Wanttoknowhowweincreasedourtrafficover1000%? Join20,000+otherswhogetourweeklynewsletterwithinsiderWordPresstips! SubscribeNow EnableGZIPcompression ToenableGZIPcompressioninApache,simplyaddthefollowingcodetoyour.htaccessfile. #CompressHTML,CSS,JavaScript,Text,XMLandfonts AddOutputFilterByTypeDEFLATEapplication/javascript AddOutputFilterByTypeDEFLATEapplication/rss+xml AddOutputFilterByTypeDEFLATEapplication/vnd.ms-fontobject AddOutputFilterByTypeDEFLATEapplication/x-font AddOutputFilterByTypeDEFLATEapplication/x-font-opentype AddOutputFilterByTypeDEFLATEapplication/x-font-otf AddOutputFilterByTypeDEFLATEapplication/x-font-truetype AddOutputFilterByTypeDEFLATEapplication/x-font-ttf AddOutputFilterByTypeDEFLATEapplication/x-javascript AddOutputFilterByTypeDEFLATEapplication/xhtml+xml AddOutputFilterByTypeDEFLATEapplication/xml AddOutputFilterByTypeDEFLATEfont/opentype AddOutputFilterByTypeDEFLATEfont/otf AddOutputFilterByTypeDEFLATEfont/ttf AddOutputFilterByTypeDEFLATEimage/svg+xml AddOutputFilterByTypeDEFLATEimage/x-icon AddOutputFilterByTypeDEFLATEtext/css AddOutputFilterByTypeDEFLATEtext/html AddOutputFilterByTypeDEFLATEtext/javascript AddOutputFilterByTypeDEFLATEtext/plain AddOutputFilterByTypeDEFLATEtext/xml #Removebrowserbugs(onlyneededforreallyoldbrowsers) BrowserMatch^Mozilla/4gzip-only-text/html BrowserMatch^Mozilla/4\.0[678]no-gzip BrowserMatch\bMSIE!no-gzip!gzip-only-text/html HeaderappendVaryUser-Agent Ifyouarerunningon NGINX,simplyaddthefollowingtoyournginx.conffile. gzipon; gzip_disable"MSIE[1-6]\.(?!.*SV1)"; gzip_varyon; gzip_typestext/plaintext/csstext/javascriptimage/svg+xmlimage/x-iconapplication/javascriptapplication/x-javascript; Makesuretoalsocheckoutourin-depthpostonhowtoenableGZIPcompression. MinimizeRedirects MinimizingHTTPredirectsfromoneURLtoanothercutsoutadditionalRTTsandwaittimeforusers.CheckoutourpostonWordPressredirectsinwhichwediscoveredthat2badredirectsincreasedthesiteloadtimesby58%! Plainandsimple,WordPressredirectsslowdownyoursite.That’swhyit’sworthtakingthetimetominimizethenumberofredirectsvisitorstoyoursiteexperience. Minimizeredirects SpecifyaCacheValidator ThespecifyacachevalidatorrecommendationappearswhentherearemissingHTTPcachingheaders.Theseshouldbeincludedoneveryoriginserverresponse,astheybothvalidateandsetthelengthofthecache.Iftheheadersaren’tfound,itwillgenerateanewrequestfortheresourceeverytime,whichincreasestheloadonyour server. Utilizingcachingheadersensuresthat subsequentrequestsdon’thavetobeloadedfromtheserver,thussavingbandwidthandimprovingperformancefortheuser.Andremember,youcan’tfixthison3rd-partyresourcesyoudon’tcontrol. Important HTTPcachingheadersareautomaticallyaddedonallKinstaservers. Specifyacachevalidator ThereareanumberofdifferentHTTPcachingheadersinvolvedthatcanbeusedtofixthisrecommendation.Checkoutourin-depthpostonhowtospecifyacachevalidator. SpecifyImageDimensions Justlikeyoushouldn’tletCSSresizeyourimages,youshouldalsospecifyimagedimensions.ThismeansincludingthewidthandheightinyourHTMLcode. Incorrect Correct Specifyimagedimensions RemoveQueryStringsFromStaticResources YourCSSandJavaScriptfilesusuallyhavethefileversionontheendoftheirURLs,suchasdomain.com/style.css?ver=4.6.Someserversandproxyserversareunabletocachequerystrings,evenifacache-control:publicheaderispresent.Sobyremovingthem,youcansometimesimproveyourcaching.ThiscaneasilybedonewithcodeorfreeWordPressplugins. Checkoutourin-depthpostonhowtoremovequerystringsfromstaticresources. Andremember,youcan’tfixthison3rd-partyresourcesyoudon’tcontrol. Removequerystringsfromstaticresources SpecifyaVary:Accept-EncodingHeader ThisisanHTTPheaderand shouldbeincludedoneveryoriginserverresponse,asittellsthebrowserwhetherornottheclientcanhandlecompressedversionsofthecontent.Usually,whenGZIPcompressionisenabled,thisisalsofixed.Butmakesuretocheckoutourin-depthpostonhowtofixthespecifyavary:accept-encodingheader recommendation.Andagain,youcan’tfixthisonthird-partyresources. StrugglingwithdowntimeandWordPressproblems?Kinstaisthehostingsolutiondesignedtosaveyoutime!Checkoutourfeatures Specifyavary:accept-encodingheader GTmetrixWaterfallChart TheGTmetrixwaterfallchartdisplaysalloftheindividualrequestsonyourwebpage(asshownbelow). Youcanthenanalyzeeachrequesttoseewhatiscausingdelaysandperformanceissuesonyoursite.Belowisa morein-depth summaryandordefinitionofwhateachofthecolorsmeansoneachrequest. GTmetrixwaterfallchart Blocking(Brown) Whenabrowserloadsawebpage,JavaScriptandCSSresourcesusuallypreventthewebpagefrombeingdisplayeduntiltheyaredownloadedandprocessedbythebrowser.ThistimedelayshowsupasblockingintheGTmetrixwaterfallchart.Checkoutourin-depthpostonhowtoeliminaterender-blockingJavaScriptandCSS formoreinformation. blocking DNSLookup(Teal) YoucanthinkofDNSlookuplikeaphonebook.ThereareserverscalledDomainNameServerswhichholdtheinformationaboutyourwebsiteandwhichIP itshouldberoutedto.WhenyoufirstrunyourwebsitethroughGTmetrix, itperformsafreshlookup,andithastoquerytheDNSrecordstogettheIPinformation.Thisresultsinsomeadditionallookuptime. WhenyourunyourwebsitethroughGTmetrixasecondtime,itcachestheDNSbecauseitalreadyknowstheIPinformationanddoesn’thavetoperformthelookupagain.ThisisonereasonwhyyoumightniceyourwebsiteappearsfasterafterrunningitthroughGTmetrixmultipletimes.Asyoucanseeinthescreenbelow,onthe2ndtestweran,theDNSlookuptimeontheinitialDOCloadis0ms.Thisisoneareaalotofpeoplemisinterpret!Werecommendrunningyourtestmultipletimesandtakingtheaverage,unlessyouwantDNSaspartofyourreport,inwhichcaseyoucantakethefirsttest. SecondDNSlookup Thesameappliestoyourassets(JavaScript,CSS,images)ifyouareusingaCDN.ACDNcacheworksmuchlikeDNS,onceitiscached,itisthenmuchfasteronconsecutiveloads.AnothertiponspeedingupDNSistouseDNSprefetching.ThisallowsthebrowsertoperformDNSlookupsonapageinthebackground.YoucandosobyaddingsomelinesofcodetotheheaderofyourWordPresssite.Seesomeexamplesbelow. OrifyouarerunningWordPressversion4.6ornewer,youmightwanttouseresourcehints.Developerscanusethewp_resource_hintsfiltertoaddcustomdomainsandURLsfordns-prefetch, preconnect, prefetchorprerender. Connecting(Green) TheconnectingtimeinGTmetrixisreferringtotheTCPconnection,orthetotaltimerequiredtocreateaTCPconnection.Youdon’treallyneedtounderstandhowthisworks,butthisissimplyacommunicationmethodbetweenthehost/clientandtheserverthathastotakeplace. Connecting Sending(Red) Thesendingtimeissimplythetimeittakesforthewebbrowsertosenddatatotheserver. Sending Waiting(Purple) ThewaittimeinGTmetrixisactuallyreferringtothetimetofirstbyte,alsoknownastheTTFBinsometools.TTFB isameasurementusedasanindicationoftheresponsivenessofawebserverorothernetworkresource.Generally,anythingunder100msisacceptableandgoodTTFB.Ifyouareapproachingthe300-400msrangeyoumighthavesomethingmisconfiguredonyourserveroritmightbetimetoupgradetoabetterwebstack.Asyoucanseeinourtestbelowitwasapproximately100mswhichisgreat. Waiting SomeeasywaystodecreaseyourTTFBistoensureyourhosthaspropercachinginplaceandutilizingaCDN.Checkoutourin-depthpostonallthewaystoreduceTTFBonyourWordPresssite. Receiving(Grey) Thereceivingtimeissimplythetimeittakesforthewebbrowsertoreceivedatafromtheserver. Receiving EventTimings Eachtimeyourequestapageithaseventtiminginwhichthingsarerenderedandloaded. FirstPaint(GreenLine):Thefirstpointatwhichthebrowserdoesanysortofrenderingonthepage,suchasdisplayingthebackgroundcolor. DOMLoaded(BlueLine):ThepointatwhichtheDOM(DocumentObjectModel)isready. Onload(RedLine): Whentheprocessingofthepageiscompleteandalltheresourcesonthepage(images,CSS,etc.)havefinisheddownloading. FullyLoaded(PurpleLine): ThepointaftertheOnloadeventfiresandtherehasbeennonetworkactivityfor2seconds. Eventtiming HTTPResponseHeaders YoucanalsoclickonanindividualrequestseewhattheycalltheHTTPresponseheaders.Thisprovidesvaluableinformation.Inthescreenbelowwecaninstantly seethingssuchasgzipisenabledonthewebserver,itisrunningoverHHVM,itisbeingservedfromcache(HIT,wouldshowMISSotherwise),thecache-controlheaders,serverarchitecture(thisisnotalwaysvisible),expiresheaders,thebrowseruser-agentandmore. HTTPresponseheaderinGTmetrix AnotherthingtobeawareofisthattheGTmetrixtooldoessupportHTTP/2,unlikePingdom,becauseitiscurrentlyusingChrome58+torunitstests.ChromeaddedHTTP/2supportinversion49.Sokeepinmind whenyouarechoosingwhichspeedtesttooltouse. Video Tohelpyoudebugvisualglitchesandfrontendperformanceissues,thelatestversionofGTmetrixincludesa“Video”tab.Withthevideofeatureenabled,GTmetrixwillautomaticallyrecordanembeddablevideoshowinghowapageloadsforeachperformancetest.Thisfeatureisveryusefulfordebuggingvisualissuesthatonlyappearoncertainbrowserandscreensizecombinations. GTmetrixvideorecording. History Underthehistorytabyoucanviewallofyourpastspeedtests.Thereisalimittohowmanyarestoredinfreeaccounts.YoucanalsomonitoraURLwhichallowsyoutokeeptrackofperformanceovertimeandseeanychangeswhentheyoccur. History Onereallycoolfeatureisyoucanselectyourpastreportsandcomparethemsidebyside.Thiscanbeveryuseful,especiallywhenyouaredoingoptimizationsonyoursitetoseeifthereareimprovements.Remember,sometimesyoucanoveroptimizetoo. ComparereportsinGTmetrix CaseStudyDomainConfiguration Ifyougotthisfardowninourin-depthGTmetrixdivethenyouareinforatreat.Itisalwaysannoyingtoseepeoplesharetipsandcasestudiesbutthennotsharehowtheygotthere.Sobelowis ourexactconfigurationforthecasestudydomainusedabove!Feelfreetoreplicateit. Architecture Thecasestudydomain(perfmatters.io)ishostedwithKinstaontheGoogleCloudPlatformintheUSA(Centrallocation).KinstausesHTTP/2,NGINX,MariaDB,whichallcontributetothefastloadtimes. ThesiteisusingHHVM.PHP7.3isnowavailableatKinstawhichisevenfasterthanHHVM!YoucanswitchtoPHPversions withapressofabutton. Thesiteisnotusinganycachingplugin.Kinstacacheseverythingattheserverlevelwhichgreatlysimplifiesthings,andinmostcasesisfaster! WordPressPlugins AndhereisalistofthepluginsbeingusedontheWordPresssite. ThefreeCDNEnablerpluginisusedtodeployKeyCDN. ThefreeCAOSpluginisusedtosyncGoogleAnalyticslocally. ThepremiumperfmatterspluginisusedtogetridofunnecessaryHTTPrequestsanddisablethingssuchasEmojisandEmbeds. ThepremiumGonzalezpluginisusedtodisablecertainscriptsfromloading. ThepremiumImagifypluginisusedtocompressimages. RecommendedTutorialsforFurtherReading: HowtoSpeedupYourWordPressSite(UltimateGuide) HowtoDisableEmojisinWordPress HowtoDisableEmbedsinWordPress IdentifyAndAnalyzeExternalServicesOnYourWordPressSite HowtoScore100/100inGooglePageSpeedInsightswithWordPress HowtoDiagnoseHighAdmin-AjaxUsageonYourWordPressSite 7TipsonHowtoReduceDNSLookupsandSpeedThemUp Summary Asyoucansee,knowinghowtheGTmetrixspeedtesttoolworksalittlebetterandwhatallthechartsmeancanhelpyoumakeamoredata-drivendecisionwhenitcomestoperformance.Awaterfallanalysisaswecallitiscrucialtoknowhowyourindividualassetsload.Andremember,whenitcomestocomparingitwithPingdom,theyaredifferenttoolsandsoitisbettertostickwithoneortheotherastheycalculatethingsdifferently.GotanyothergreatGTmetrixtips? Ifyouwouldliketoseemorein-deptharticlesliketheoneabove,pleaseletusknowbelowinthecomments! Savetime,costsandmaximizesiteperformancewith: InstanthelpfromWordPresshostingexperts,24/7. CloudflareEnterpriseintegration. Globalaudiencereachwith29datacentersworldwide. Optimizationwithourbuilt-inApplicationPerformanceMonitoring. Allofthatandmuchmore,inoneplanwithnolong-termcontracts,assistedmigrations,anda30-day-money-back-guarantee.Checkoutourplansortalktosalestofindtheplanthat’srightforyou. Hand-pickedrelatedarticles Blog 8TipsonHowtoReduceDNSLookupsandSpeedThemUp DNSspeedisoftenoverlooked.Checkoutthese8recommendationsonhowtoreduceDNSlookupsandspeedthemuponyourWordPresssite. Readingtime 14minread Publishdate August21,2017 Blog HowtoProperlyRunaWebsiteSpeedTest(You’reDoingitWrong) Manyusersrunspeedteststhewrongway,whichresultsinbaddata.Checkouthowtoproperlyrunawebsitespeedtestalongwith15awesometools. Readingtime 21minread Publishdate April10,2019 Comments LeaveAComment EP_2012 May31,2017at9:15am Reply Perfmattersismentioned,butnotavailable.Looksinteresting. BrianJackson May31,2017at9:17am Reply Thanks,thisissomethingIamactuallyadeveloperfor.Itwillbeavailabletomorrow(Thursday). EP_2012 May31,2017at9:18am Reply Verynice!Goodluckwiththelaunch! MichaelKugler April1,2019at10:16am Reply WOW! Ibegantoreadthisanditwentonandonandonandon…. OneofthebestanalysiswriteupsIhaveeverseen.WetoohavebeengoingthroughtheGTMetrixchasewithoursiteandasyoucanseebythisscreenshot,weachievedgreatgrades. https://www.screencast.com/t/pHP9KhcN Becauseoftheslowspeedtoloadthepage,wearenowintheprocessofsplittingoffthesectionsofJSthatarenotrelevanttoeachpageandanticipatethatthescoreswillimprovedramaticallyinthecomingdays.Honestly,ifIcangetthistoanA/Awithapageloadof3secondsorlessIwouldbethrilled. Whentravelersarelookingforagreathometorentontheirnextvacationthelastthingtheywanttodoiswaitendlesslyforapagetoload.ThankyouGTMetrixforagreattool. TomZsomborgi April2,2019at7:44am Reply ThislooksgreatMichaelcongratsonachieving99%withGTMetrix! Mark April4,2019at12:22am Reply YeahloveGtmetrixbutitdoeshaveafewflaws. Ifyou’reusinghttp2,thenthecookiefreezonesandmakefewerhttprequestsbecomeirrelevantbecauseofthebenefitsofparellelismandmultiplexing–supposedly. Samegoesforthemultipledomainsissue. Andconcatenatingallyourjsandcssfiles. Somewillarguethatyoushouldstilldoit,otherssayitmakesnodifference. TheothermajorflawistheblanketinsistencethatyouuseaCDN. InmanycasesusingaCDNwillmakeyoursiteslower,sometimesfourtimesslower,yetGTmetrixwillgiveyouabetterscoreforusingacdnandhavingareallyslowwebsitethanifyouhaveareallyfastonebutdon’tuseacdn. Fastsitesshouldalwaysscorehigherthanslowones,buttheydon’t.Sothat’sareallproblemwiththecurrentscoringcalculations. WhydoCDN’smakesomesitesslower?Severalreasons. IfyourCDNprovider’sserversarenotinyourtownorcity,thenthereisgoingtobeaphysicallagforthedatatotravelupanddownthepipe. Thisisespeciallyrelevantifyou’realocalbusinessandyourtargetaudienceisinyourhometown. Dependingwhereyouareintheworldtheroundtripcanbeover10,000kms.Seriously.Sothat’sjustgoingtotaketimeforthecontenttocompletethejourney. Secondlyifyou’reusingoneofthefreeorcheapcdnservicesprovidedmymostwebhoststhesedays,wellyougetwhatyoupayfor. Everybodyelsewillbeusingittoo,soitwillcrowdedandoftenoverloadedleadingtofrequent502errors.I’msurewe’veallseenafewofthosefromthecommoncdnproviders. Oftenyouwillgetbetterresultsifyouspendmoreonyourlocalhostingplan.ie:optforabetterplanwhereyougetbetterhardware. Afterthat,ifyoudowanttogowithaCDN,payforagoodone.Thecheaponescanbecounterproductive. Thebottomlineasalwaysistotesteverythingyourself,don’tjustdothingstogetaperfect100whenthatmightactuallybemakingyoursiteslower. JakeBallinger May17,2019at12:12pm Reply Thisisanamazingoverview—I’mwritingapieceaboutShopifyspeedrightnowandI’mtotallyreferencingthis.Goodjob! LeaveaReplyCancelreplyCommentpolicy:Welovecommentsandappreciatethetimethatreadersspendtoshareideasandgivefeedback.However,allcommentsaremanuallymoderatedandthosedeemedtobespamorsolelypromotionalwillbedeleted. CommentName Email Bysubmittingthisform:YouagreetotheprocessingofthesubmittedpersonaldatainaccordancewithKinsta'sPrivacyPolicy,includingthetransferofdatatotheUnitedStates. YoualsoagreetoreceiveinformationfromKinstarelatedtoourservices,events,andpromotions.Youmayunsubscribeatanytimebyfollowingtheinstructionsinthecommunicationsreceived.