As of 2018, PageSpeed Insights scores are calculated via Lighthouse, Google's open source, automated tool for improving the overall quality of ...
Skiptocontent
FindouthowmovingtoKinstacouldsaveyou$2,400+ayearonsitecosts.
Home
ResourceCenter
KinstaBlog
GooglePageSpeedInsights:TheTruthAboutScoring100/100
BrianJackson,
April21,2022
Shares
GooglePageSpeedInsights iswithoutadoubtausefultoolforwebmasters,developers,andsiteownersofalltypes.However,we’venoticedthatalotofpeoplespendhoursobsessingoveroptimizingtheirsites,inordertotryandscore100/100onthistest.
SeehowKinstastacksupagainstthecompetition.
Selectyourprovider
WPEngine
SiteGround
GoDaddy
Bluehost
Flywheel
HostGator
Cloudways
AWS
DigitalOcean
DreamHost
Other
Compare
Thetruthisthatthisisn’thowGooglePageSpeedInsightsismeanttobeused,norisitaworthwhilepursuit.Whenyoufocusonimplementingtheplatform’srecommendationsinsteadofzeroinginonthenumberatthetopofthepage,you’llbecreatingalotmorebenefitsforyoursite.
ThispostisacomprehensiveguidetousingGooglePageSpeedInsightstoyourbestadvantage.We’llcoverhowGoogleusesyourscore,aswellashowtoincorporatetherecommendationsyoureceive.
Let’sgetstarted!
AnIntroductiontoGooglePageSpeedInsights
Ifyou’renotyetfamiliarwithGooglePageSpeedInsights,it’satoolusedfortestingwebsiteperformance.YoucanenteranyURLandhaveitanalyzed:
GooglePageSpeedInsights
Googlethenprovidesanoverallscoreoutof100forthewebsiteyou’vetested,basedonseveralperformanceoptimizationbestpractices:
GooglePageSpeedInsightsscore
Alongwiththisresult,you’llalsoseeseveralrecommendationsfromGoogleonhowtoimproveyourperformance(andtherefore,yourPageSpeedInsightsscoreaswell):
GooglePageSpeedInsightsrecommendations
Asof2018,PageSpeedInsightsscoresarecalculatedviaLighthouse,Google’sopensource,automatedtoolforimprovingtheoverallqualityofwebpages.Thisplatformcanevaluateallsortsoffactors,includingperformance,accessibility,progressivewebapps,andmore.
ToseeLighthouse’scomprehensiveassessmentofyoursite,youcanuseGoogle’sMeasuretool:
GoogleWebmastersMeasureauditingtool
InadditiontoconductingaperformanceauditmuchliketheoneGooglePageSpeedInsightsruns,you’llgetscoresforaccessibility,bestpractices,andSearchEngineOptimization(SEO).
TheTruthAboutScoring100/100inGooglePageSpeedInsights
Aswementionedatthebeginningofthispost,weseemanysiteownersanddeveloperswhobecomeobsessedoverachievingaperfectPageSpeedInsightsscore.Unfortunately,thosefolkstendtooverlookthemoreimportantaspectofthetest’sresults:therecommendations.
Whileyoushouldcertainlystrivetoimproveyourwebsite’sloadingtimesasmuchaspossible,gettinga100/100inGooglePageSpeedInsightsisn’tactuallythatimportant.Forstarters,it’snoteventhebe-all-end-alltestforperformance.
UnlikePageSpeedInsights,PingdomTools enablesyoutotestyoursite’sperformancefromvariouslocations:
PingdomToolsspeedtestresults
YoucanalsoruntestsonplatformssuchasGTmetrix (whichcombinesyourscoresfromPageSpeedInsightsandYSlow)andWebPageTest.Chancesare,yourscoresacrossthesedifferenttoolswon’tmatchexactly,whichshowsyouhowarbitrarythesenumberscanbe.
Whatreallymattersistheactualspeedofyourwebsite.Toputitintoperspective,we’veseensiteswithaverageloadingtimesofunder500milliseconds(whichisextremelyfast!)thatdon’thavea100/100scoreonPageSpeedInsights.
Theotherfactorthatshouldinfluenceyourapproachtospeedoptimizationistheperceivedperformance ofyoursite.Yourvisitorsdon’tcarewhatyourGooglePageSpeedInsightsscoreis.Theyjustwanttobeabletoviewyourcontentasquicklyaspossible.
Therealpurposeoftestingyoursite’sperformancewithGooglePageSpeedInsightsisn’ttoachieveahighscore.Instead,it’stofindproblemspotsonyoursite,sothatyoucanoptimizethemanddecreasebothyouractualandperceivedloadingtimes.
HowGoogleUsesPageSpeedInsights
Inadditiontoinfluencingyoursite’sUserExperience(UX),performancealsoplaysaroleinSEO.GiventhatPageSpeedInsightsisrunbytheworld’slargestandmostpopularsearchengine,itstandstoreasonthatyourscoremighthavesomeeffectonyourSearchEngineResultsPage(SERP)rankings(atleastonGoogleitself).
TherealityisthatGoogledoes usePageSpeedInsightstodeterminerankings–kindof.Sitespeedisarankingfactor,plainandsimple.Yourperformancetestscorecangiveyouaprettygoodideaofwhereyoustandonthatfront.
However,GoogletakesintoconsiderationmorethanjustthenumberinthecircleatthetopofyourPageSpeedresults.Hittinga100/100won’tguaranteeyouatopspotontheSERPs.
Sitback,relax,andincreaseyourpagespeed—wetakecareofWordPresscachingsoyoudon’thaveto.TryKinstaforFree.
Withthatsaid,youcanstillputyourPageSpeedInsightsresultstoworkwhenimprovingyourSEO.Forexample,since2018,mobilepagespeedhasbeenarankingfactor forGoogle.You’llnoticethatyourperformancetestprovidesdataforboththedesktopandmobileversionsofyoursite:
MobiletabinGooglePageSpeedInsights
Sincemorethan73percentofmobileinternetusers claimthey’veencounteredasitethattakestoolongtoload,theinformationintheGooglePageSpeedInsightsMobile tabisinvaluable.Usingtherecommendationsheretodecreaseloadingtimes onsmartphonesandotherdevicesshouldgiveyouacompetitiveedge.
GooglePageSpeedInsightsRecommendations(24WaystoImprovePerformance)
We’vetalkedalotaboutGooglePageSpeedInsights’recommendationsinthispost.They’retherealmeatofyourperformancetestresults,andfarmorevaluablethanyouractualscore.That’swhywe’vededicatedtherestofthisposttothem.
Beforewediveintotheindividualsuggestions,however,you’llneedtounderstandthedifferencebetweenyourFieldData andLabData.TheformercomparesyoursitetoothersintheChromeUserExperienceReportforthelast30days.
TherearealsotwochartsthatshowwhereyouraverageFirstContentfulPaint(FCP) andFirstInputDelay(FID) fall:
GooglePageSpeedInsightsFieldData
Intheimageabove,oursite’sFCPisaboutthesameas45percentofsitesinthe75thpercentile,andourFIDisaboutthesameas9percentofthe95thpercentile.
LabData showsspecificdataforasimulatedpageload:
GooglePageSpeedInsightsLabData
You’llnoticethatourFieldData andLabData don’tmatchexactly.That’sperfectlynormal.TheLabData iscreatedunderfixedconditions,whiletheFieldData usesactualloadingspeedscollectedovertime.
Whenlookedatincombination,theFieldData andLabData shouldgiveyouanideaofyoursite’sactualloadingtimes.Aswementionedearlier,thisisevenmoreimportantthanyouroverallPageSpeedscore,soyou’llwanttopayattentiontothesenumbers.
Afteryou’veconsideredthisinformation,it’stimetostartimprovingyoursite’sperformancewithGooglePageSpeed’srecommendations.
1.EliminateRender-BlockingResources
OneofthemorecommonrecommendationsfromGooglePageSpeedInsightsistoEliminaterender-blockingresources:
Eliminaterender-blockingresourcesrecommendation
ThisisreferringtoJavaScriptandCSSscriptsthatarepreventingyourpagefromloadingquickly.Thevisitor’sbrowserhastodownloadandprocessthesefilesbeforeitcandisplaytherestofthepage,sohavingalotofthem‘abovethefold’cannegativelyimpactyoursite’sspeed.
Youcanlearnmoreaboutthisissueinourguidetoeliminatingrender-blockingscripts.AsfarasGoogleisconcerned,therearetwosolutionsyoushouldconsider:
Ifyoudon’thavealotofJavaScriptorCSS,youcaninlinethemtogetridofthiswarning.ThisprocessreferstoincorporatingyourJavaScriptand/orCSSintoyourHTMLfile.YoucandothiswithapluginlikeAutoptimize.However,thisisreallyonlyvalidforverysmallsites.MostWordPresssiteshaveenoughJavaScriptthatthismethodcouldactuallyslowyoudown.
TheotheroptionistodeferyourJavaScript.ThisattributedownloadsyourJavaScriptfileduringHTMLparsing,butonlyexecutesitaftertheparsingiscomplete.Also,scriptswiththisattributeexecuteinorderofappearanceonthepage.
You’llfindalistoftheresourcesthataremostaffectedbythisissuebelowtherecommendationinyourPageSpeedresults.
Checkoutthisvideotofindoutmoreabouthowtoeliminaterender-blockingresources:
2.AvoidChainingCriticalRequests
Theconceptofchainingcriticalrequests hastodowiththeCriticalRenderingPath(CRP)andhowbrowsersloadyourpages.Certainelements–suchastheJavaScriptandCSSwediscussedabove–mustbeloadedcompletelybeforeyourpagebecomesvisible.
Aspartofthissuggestion,GooglePageSpeedInsightswillshowyoutherequestchainsonthepageyou’reanalyzing:
Avoidchainingcriticalrequestsrecommendation
Thisdiagramwillshowyoutheseriesofdependentrequeststhatmustbefulfilledbeforeyourpagebecomesvisible.Itwillalsotellyouthesizeofeachresource.Ideally,youwanttominimizethenumberofdependentrequests,aswellastheirsizes.
Severalmethodsforaccomplishingthesegoalsarecoveredbyotherrecommendationsdiscussedinthispost,including:
Eliminatingrender-blockingresources
Deferringoffscreenimages
MinifyingCSSandJavaScript
Additionally,youcanoptimizetheorderinwhichassetsload,inordertoshortentheCRP.Thismeansmovingabove-the-foldcontenttothetopofyourHTMLfile.YoucanlearnmoreaboutoptimizingtheCRPinourpost,“HowtoOptimizetheCriticalRenderingPathinWordPress”.
It’simportanttonotethatthere’snotamagicnumberofcriticalrequestchainsthatyouneedtoworkdownto.GooglePageSpeedInsightsdoesn’tcountthisauditas‘passed’or‘failed’,unlikemanyofitsotherrecommendations.Thisinformationissimplymadeavailabletohelpyouimproveloadingtimes.
3.KeepRequestCountsLowandTransferSizesSmall
Themorerequestsbrowsershavetomaketoloadyourpages,andthelargertheresourcesyourserverreturnsinresponse,thelongeryourwebsitetakestoload.Therefore,itmakessensethatGooglewouldrecommendthatyouminimizethenumberofrequiredrequestsanddecreasethesizeofyourresources.
LiketheAvoidchainingcriticalrequests recommendation,thisonedoesnotresultina‘pass’or‘fail’.Instead,you’llsimplyseealistofthenumberofrequestsmadeandtheirsizes:
Keeprequestcountslowandtransfersizessmallrecommendation
There’snoidealnumberofrequestsormaximumsizestokeepinmind.Instead,Googlerecommendsthatyousetthosestandardsforyourselfbycreatingaperformancebudget.Thisisasetofdefinedgoalsthatmayberelatedtoaspectssuchas:
Maximumimagesizes
Thenumberofwebfontsused
Howmanyexternalresourcesyoucallto
Thesizeofscriptsandframeworks
Creatingaperformancebudgetgivesyouasetofstandardstoholdyourselfaccountableto.Whenyougooveryourbudget,youcanthenmakedecisionsaboutwhethertoeliminateoroptimizeresourcestosticktoyourpredeterminedguidelines.Youcanlearnmoreaboutcreatingone inGoogle’sownguide.
4.MinifyCSS
CSSfilesareoftenlargerthantheyneedtobe,inordertomakethemeasierforhumanstoread.Theymightincludevariouscarriagereturnsandspacesthataren’tnecessaryforcomputerstounderstandtheircontents.
MinifyingyourCSSistheprocessofcondensingyourfilesbyeliminatingunnecessarycharacters,spaces,andduplications.GooglerecommendsthispracticebecauseitreducesyourCSSfilesizes,andthereforecanimproveloadingspeed:
MinifyCSSrecommendation
ThesespeedbenefitsarewhyKinstabuiltacodeminificationfeatureintotheMyKinstadashboard.CustomerscanchoosetooptintoautomaticcodeminificationfortheirCSSandJavaScriptfiles,speedinguptheirsiteswithzeromanualeffort.
Ifyou’renotaKinstacustomer,werecommendusingapluginsuchasAutoptimizeorWPRocket tominifyyourCSSfiles.
5.MinifyJavaScript
JustasyoucanreduceCSSfilesizethroughminification,thesameappliestoyourJavaScriptfiles:
MinifyJavaScriptrecommendation
AutoptimizeorWPRocketcanhandlethistaskforyourWordPresssiteaswell.
SignUpFortheNewsletter
Wanttoknowhowweincreasedourtrafficover1000%?
Join20,000+otherswhogetourweeklynewsletterwithinsiderWordPresstips!
SubscribeNow
6.RemoveUnusedCSS
Anycodeinyourstylesheetiscontentthathastobeloadedinorderforyourpagetobecomevisibletousers.Ifthere’sCSSonyoursitethatisn’tactuallyuseful,it’sputtinganunnecessarydrainonyourperformance.
That’swhyGooglerecommendsremovinganyunusedCSS:
RemoveunusedCSSrecommendation
Thesolutionhereisessentiallythesameasthatforeliminatingrender-blockingCSS.Youcaninlineordeferstylesinwhateverwaymakesthemostsenseforyourpages.YoucanalsouseatoolsuchasChromeDevTools tofindunusedCSS thatneedstobeoptimized.
7.MinimizeMain-ThreadWork
The‘mainthread’istheprimaryelementofauser’sbrowserthat’sresponsibleforturningcodeintoawebpagethatvisitorscaninteractwith.ItparsesandexecutesHTML,CSS,andJavaScript.Additionally,it’sinchargeofhandlinguserinteractions.
Thismeansthat,whenthemainthreadisworkingthroughyoursite’scode,itcannotalsohandleuserrequests.Ifyoursite’smain-threadworktakestoolong,thiscanresultinpoorUXandslowpageloadingtimes.
GooglePageSpeedwillflagpagesthattakelongerthanfoursecondstocompletemain-threadworkandpresentausablewebpage:
Minimizemain-threadworkrecommendation
Someofthemethodsusedforreducingmain-threadworkhavealreadybeencoveredinothersectionsofthispost,including:
Minifyingyourcode
Removingunusedcode
Implementingcaching
However,youmayalsowanttoconsidercodesplitting.ThisprocessinvolvesbreakingupyourJavaScriptintobundlesthatexecutewhenthey’reneeded,insteadofrequiringbrowserstoloadallofthembeforethepagebecomesinteractive.
Webpackisoftenusedtoimplementcodesplitting.Notethatthisisafairlyadvancedtechniqueandbeginnersshouldusuallyundertakealone.
8.ReduceJavaScriptExecutionTime
JavaScriptexecutionisoftenthemostprominentcontributortomain-threadwork.PageSpeedInsightshasaseparaterecommendationtoalertyouifthistaskishavingasignificantimpactonyoursite’sperformance:
ReduceJavaScriptexecutiontimerecommendation
Themethodssuggestedaboveforreducingmain-threadworkshouldalsoresolvethiswarninginyourPageSpeedresults.
9.ReduceServerResponseTimes(TTFB)
TimetoFirstByte(TTFB)isameasureofhowlongittakesforabrowsertoreceivethefirstbyteofdatabackfromyoursite’sserveraftermakingarequest.Whilethisisn’tthesameasyouroverallsitespeed,havingalowTTFBisunderstandablygoodforyoursite’sperformance.
Therefore,reducingserverresponsetimesisamongGooglePageSpeedInsights’recommendations.Ifyou’reabletoachievealowTTFB,you’llseethismessageunderPassedaudits:
Serverresponsetimesarelowmessage
ThereareseveralfactorsthatcaninfluenceyourTTFB.Somestrategiesforloweringitinclude:
Choosingahigh-qualitywebhostingprovider thatfocussesonspeed
Usinglightweightthemesandplugins
Reducingthenumberofpluginsinstalledonyoursite
UtilizingaContentDeliveryNetwork(CDN)
Implementingbrowsercaching
SelectingasolidDomainNameSystem(DNS)provider
OurpostonTTFB isanexcellentresourceformoredetailsonoptimizationinthisarea.
10.ProperlySizeImages
Mediafilessuchasimagescanbearealdragonyoursite’sperformance.Properlysizingthemisasimplewaytoreduceyourloadingtimes:
Properlysizeimagesrecommendation
Ifyourpageincludesimagesthatarelargerthantheyneedtobe,CSSisusedtoresizethemappropriately.Thistakeslongerthansimplyloadingtheimagesattherightsizeinitially,thereforeimpactingyourpage’sperformance.
Tofixthis,youcaneitheruploadimagesatthepropersizes,oruse‘responsiveimages’.Thisinvolvescreatingdifferently-sizedimagesforvariousdevices.
Youcandothisusingthesrcset attribute,which isaddedto![]()
tagstospecifyalternativeimagefilesatdifferentsizes.Browserscanreadthislist,determinewhichoptionisbestforthecurrentscreen,anddeliverthatversionofyourimage.
Forexample,saythatyouhaveaheaderimageandyouwanttomakeitresponsive.Youcoulduploadthreeversionsofitat800,480,and320pixelswide.Thenyouwouldapplythesrcset attribute,likethis:
Thesrcset attributespecifiesthedifferentavailablefiles,andthesizes attributetellsbrowserswhichoneshouldbeusedbasedonthecurrentscreensize.
11.DeferOffscreenImages
Theprocessofdeferringoffscreenimagesismorecommonlyknownas‘lazyloading’.Thismeansthatinsteadofmakingthebrowserloadeveryimageonapagebeforedisplayingtheabove-the-foldcontent,itwillonlyloadtheonesthatareimmediatelyvisible.
Lessloadingbeforethepagebecomesvisiblemeansbetterperformance,whichiswhyGooglerecommendsthismethod:
Deferoffscreenimagesrecommendation
ThereareseveralWordPresspluginsmadespecificallyforlazyloading,includinga3LazyLoad and LazyLoadbyWPRocket.VariousimageandperformanceoptimizationpluginssuchasAutoptimizealsohavelazyloadingfeatures.CheckoutourcompleteguideonLazyLoadingImagesandVideosonWordPress.
12.EfficientlyEncodeImages
Aswementionedearlierinthispost,imageshaveasignificantimpactonyoursite’sperformance.Oneofthemostbasicoptimizationbestpracticesyoumaywanttoconsideriscompression,whichcanhelpreduceyourfilesizessothey’llloadfaster.It’salsotheprimarymethodforfollowingGoogle’srecommendationtoEfficientlyencodeimages:
Efficientlyencodeimagesrecommendation
Thekeyisachievingthesmallestpossiblefilesizes,withoutsacrificingthequalityoftheimagesthemselves.PluginssuchasImagify andSmush canhelpwiththistask.Youcanlearnmoreabouttheminourguidetoimageoptimization.
Otherrecommendationsthatinfluencewhetheryou‘pass’or‘fail’theEfficientlyencodeimages auditinclude:
Servingimagesatthecorrectsize
Implementinglazyloading(deferringoffscreenimages)
Convertingimagestonext-genfileformats,suchasWebP
Usingvideoformatsforanimatedcontent,suchasGIFs
Inadditiontocompressingyourimages,youcanfollowthestepsforfulfillingthesesuggestionsasdescribedelsewhereinthispost.
13.ServeImageinNext-GenFormats
Therearesomeimagefileformatsthatloadmorequicklythanothers.Unfortunately,they’renotyourcommonly-seenPNG orJPEG formats.WebP images arebecomingthenewstandard,andGooglePageSpeedwillinformyouifyourimagesaren’tadheringtoit:
Serveimagesinnext-genformatsrecommendation
Thismayseemlikeahardrecommendationtomeet,sinceyoulikelyalreadyhaveplentyimagesonyourWordPresssite.Fortunately,therearepluginsthatcanhelp.Forexample,ImagifyandSmushbothofferaWebPconversionfeature.
14.UseVideoFormatsforAnimatedContent
GIFscanbeaneffectiveformofvisualcontent inavarietyofsituations.Tutorialwalkthroughs,featurereviews,andevenhumorousanimationscanallelevateyourpostsandmakethemmoreenjoyableandvaluabletoreaders.
Unfortunately,thosebenefitscomeatacosttoyourperformance.GIFsaredemandingtoload,whichiswhyPageSpeedInsightsrecommendsservingvideocontentinstead:
Usevideoformatsforanimatedcontentrecommendation
Unfortunately,convertingGIFstovideoformatsisn’tthemoststraightforwardofprocesses.First,you’llhavetodecidewhichtypeofvideoyouwanttouse:
MP4: Producesslightlylargerfiles,butiscompatiblewithmostmajorbrowsers.
WebM: Themosthighly-optimizedvideoformat,althoughithaslimitedbrowsercompatibility.
Onceyou’vemadethechoicethatmakesthemostsenseforyoursite,you’llneedtoconvertthefileformats.Thebestwaytodothisisviathecommandline.Togetstarted,installFFmpeg.Thisisanopen-sourcetoolforconvertingfileformats:
FFmpegfileformatconversiontoolforvideoandaudio
Then,openyourcommandlineinterface andrunthefollowingcommand:
ffmpeg-iinput.gifoutput.mp4
ThiswillconverttheGIFwiththefilenameinput.gif intoanMP4videowiththefilenameoutput.mp4.Changingtheformatisjustthebeginning,however.YounowneedtoembedtheresultingvideoonyourWordPresssiteinawaythatmakesitappearlikeananimatedGIF.
EmbeddingVideoContentforAnimations
Asyou’velikelynoticedifyou’veeverseenaGIFbefore,they’reslightlydifferentfromnormalvideos.Theyusuallyautoplayandrunonaloop,andthey’realwayswithoutsound.EmbeddingyournewMP4orWebMfileonyourWordPresssitewon’tproducethesefeatures.
However,youcan recreatethemwithsomeverysimplecode.Uploadyourvideotoyourmedialibrary,andthenaddthefollowingtothepageorpostwhereyouwanttoincludeyourGIF:
Thiswillapplythespecifiedattributestoyourvideo,makingitappearmore‘GIF-like’.Simplyadaptthefilenameandtypetomatchthatofyourresource.Formoredetailsonthissubject,wesuggestreadingGoogle’sguideonconvertingGIFstovideos.
15.EnsureTextRemainsVisibleDuringWebfontLoad
Likeimages,fontstendtobelargefilesthattakealongtimetoload.Insomecases,browsersmayhideyourtextuntilthefontyou’reusingloadscompletely,whichwillresultinthisrecommendationfromGooglePageSpeedInsights:
Ensuretextremainsvisibleduringwebfontloadrecommendation
Googleadvises youresolvethisissuebyapplyingtheFontDisplayAPIswap directiveinyour@font-face style.Todothis,accessyourstylesheet(style.css)andaddthefollowingafterthesrc attributeunder@font-face:
font-display:swap
Youcanlearnmoreaboutoptimizingwebfontsinourpost“HowtoChangeFontsInWordPress” andourin-depthguidetohostinglocalfonts.
16.EnableTextCompression
GooglePageSpeedInsights’Enabletextcompression recommendationreferstotheuseofGZIPcompression:
Enabletextcompressionrecommendation
Insomecases(asyoucanseeintheimageabove)textcompressionwillbeenabledonyourserverautomatically.Ifthisisnotthecaseforyoursite,youhaveacoupleofoptionsforfollowingthisrecommendation.
ThefirstistoinstallapluginwithaGZIPcompressionfeature.WPRocketisaviablesolutionifyou’rewillingtopayforit.
Youcanalsocompressyourtextmanually.Thisinvolveseditingyour.htaccess file,whichcanberisky,somakesureyouhavearecentbackuponhand.
MostWordPresssitesrunonApacheservers.ThecodeforenablingGZIPcompression lookslikethis:
#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
Youshouldadditafter#END inyour.htaccessfile.IfyouhappentohaveyourWordPresssiteonanNginxserver,youshouldaddthefollowingcodetoyournginx.conf fileinstead:
36gzipon;
37gzip_disable"MSIE[1-6]\.(?!.*SV1)";
38gzip_varyon;
39gzip_typestext/plaintext/csstext/javascriptapplication/javascriptapplication/x-javascript;
Ifyou’dliketocheckyoursite’stextcompression,wesuggestusingatoolsuchasGiftOfSpeed:
GiftOfSpeedGZIPcompressioncheck
ThiswillletyouknowifGZIPcompressionhasbeensuccessfullyimplemented,aswellaswhattypeofserveryoursiteisrunningonandafewotherkeydetails.
17.PreconnecttoRequiredOrigins
Chancesarehighthatyouprobablyhaveatleastonethird-partyresourceonyoursite–GoogleAnalyticsisacommonexample.Itcantaketimeforbrowserstoestablishaconnectiontotheseresources,slowingdownyourloadingspeeds.
Usingpreconnect attributescantellbrowsersrightawaythattherearethird-partyscriptsonyourpagethatneedtobeloaded.Theprocessofrequestingthemcantheninitiateassoonaspossible,improvingyourperformance.
IfGooglefeelsthatyourpagecouldbenefitfromthistechnique,you’llseethePreconnecttorequiredorigins suggestion:
Preconnecttorequiredoriginsrecommendation
Thereareafewwaystogoaboutimplementingthisoptimizationstrategy.Ifyou’recomfortablewitheditingyourWordPressthemefiles,youcanaddalinktagtoyourheader.php file.Here’sanexample:
Inthiscase,thetagtellsbrowsersthattheyneedtoestablishaconnectiontoexample.com asquicklyaspossible.GooglePageSpeedInsightswilllistanyrelevantresourcesforwhichyoushouldaddlinktagswithpreconnectattributes.
Theotheroptionistouseaplugintoachievethesameeffect.Perfmattersincludesapreconnectfeature(disclaimer:I’moneofthefoundersofPerfmatters).WPRocketandPre*PartyResourceHints includesimilarfunctionality.
18.PreloadKeyRequests
SimilartothePreconnecttorequiredorigins recommendation,followingthissuggestionenablesyoutominimizethenumberofrequestsbrowsersmustmaketoyoursite’sserver.Ratherthanconnectingtothird-partyresources,however,Preloadkeyrequests referstoloadingcriticalassetsonyourownserver:
Preloadkeyrequestsrecommendation
Implementingthistechniqueisverysimilartothepreviousrecommendationaswell.YoucanaddlinktagsspecifyingtheresourceslistedinPageSpeedInsightstoyourheader.php file:
YoucanalsoincorporatethistagusingPerfmatters,WPRocket,orPre*PartyResourceHints.
19.AvoidMultiplePageRedirects
RedirectsareusedwhenyouwantoneURLtopointtoanother.They’recommonlyemployedwhenyoumoveordeleteapageonyoursite.Whilethere’snothingwrongwithusingredirectsingeneral,theydocauseadditionaldelaysinloadingtime.
Ifyouhavetoomanyredirectsonyoursite,youmayseethisrecommendationinGooglePageSpeedInsights:
Avoidmultiplepageredirectsrecommendation
Theonlythingyoucandoinresponsetothisrecommendationistomakesureyou’reonlyusingredirectswhenyouabsolutelyhaveto.Youcanlearnmoreabouttheprocessofcreatingtheminourpost,“WordPressRedirect–BestPracticesforBetterPerformance”.
20.ServeStaticAssetsWithanEfficientCachePolicy
Ifyou’vebeenusingGooglePageSpeedInsightsforawhile,youmightknowthisrecommendationbetterastheLeveragebrowsercachingwarning.InVersion5,it’snowlabeledasServeStaticAssetsWithanEfficientCachePolicy:
Serverstaticassetswithanefficientcachepolicyrecommendation
Thissuggestionhasafewlayersweneedtopiecethrough.Thefirstiswhat‘caching’means.Inshort,it’saprocessinwhichbrowserssavecopiesofyourpages,sotheycanbeloadedfasteronfuturevisits.
ThemostcommonwayWordPresssitesimplementcachingiswithplugins.WPRocketandW3TotalCachearepopularoptions.However,somehostingproviders–includingushereatKinsta –enablecachingviatheirservers.Makesuretocheckandseeifthisisthecaseforyourhostbeforeyouinstallacachingplugin.
Sitback,relax,andincreaseyourpagespeed—wetakecareofWordPresscachingsoyoudon’thaveto.TryKinstaforFree.
Onceyou’veenabledcachingforyoursite,youcanworryaboutthesecondpartofthisrecommendation,whichisyourcachepolicy’s‘efficiency’.Browserscleartheircachesperiodicallytorefreshthemwithupdatedcopies.
Ideally,youwantthistimeperiodtobehigherratherthanlower.Ifyou’reclearingyoursitefrombrowsercacheseverycoupleofhours,thatdefeatsthepurposeofusingthistechniqueinthefirstplace.YoucanoptimizeyourcacheexpirationperiodusingCache-Control andExpiresheaders.
AddingCache-ControlHeaders
Usethefollowingcodeto addCache-Controlheaders inNginx:
location~*\.(js|css|png|jpg|jpeg|gif|svg|ico)${
expires30d;
add_headerCache-Control"public,no-transform";
}
Youshouldaddthistoyourserver’sconfigurationfile.Intheaboveexample,thespecifiedfiletypesaresettoexpireafter30days.
ThosewithApacheservers shouldusethissnippetintheir.htaccess filesinstead:
HeadersetCache-Control"max-age=84600,public"
Addthiscodebefore#BEGINWordPress orafter#ENDWordPress.Inthisexample,thecacheexpirationperiodissetto84,600seconds.
AddingExpiresHeaders
Cache-Controlheadersareprettymuchthestandardnow.However,therearesometools(includingGTMetrix)thatstillcheckforExpiresheaders.
YoucanaddexpiresheaderstoaNginxserverbyincorporatingthefollowingintoyourserverblock:
location~*\.(jpg|jpeg|gif|png|svg)${
expires365d;
}
location~*\.(pdf|css|html|js|swf)${
expires2d;
}
Youshouldsetdifferentexpirationtimesbasedonfiletypes.Apacheserverswillproducethesameresultsifyouaddthiscodetoyour.htaccess file:
##EXPIRESHEADERCACHING##
ExpiresActiveOn
ExpiresByTypeimage/jpg"access1year"
ExpiresByTypeimage/jpeg"access1year"
ExpiresByTypeimage/gif"access1year"
ExpiresByTypeimage/png"access1year"
ExpiresByTypeimage/svg"access1year"
ExpiresByTypetext/css"access1month"
ExpiresByTypeapplication/pdf"access1month"
ExpiresByTypeapplication/javascript"access1month"
ExpiresByTypeapplication/x-javascript"access1month"
ExpiresByTypeapplication/x-shockwave-flash"access1month"
ExpiresByTypeimage/x-icon"access1year"
ExpiresDefault"access2days"
##EXPIRESHEADERCACHING##
Onceagain,youshouldaddthiscodeeitherbefore#BEGINWordPressorafter#ENDWordPress.
EfficientCachingofGoogleAnalytics
Ironically,theGoogleAnalyticsscriptyoumayhaveaddedtoyourpages’headersinordertotrackuserbehaviorhasacacheexpirationperiodofjusttwohours.Thisislikelysothat,ifupdatesaremadetotheplatform,userswillhaveaccesstothechangesquickly.
ThisscriptwillappearinthelistofresourcesrequiringyourattentionundertheServestaticassetswithanefficientcachepolicy recommendation.Sinceitbelongstoathirdparty,youcan’tchangetheexpirationperiodwithCache-Control orExpires headers.
Ifthisistheonlyscriptlistedunderthisrecommendation,youcanstillpasstheaudit:
Passedefficientcachepolicyaudit
However,aswe’venotedthroughoutthispost,yourPageSpeedscorematterslessthanyouractualandperceivedperformance.Inordertoservethisresourceefficiently,youmayconsiderhostingGoogleAnalyticslocally.
PluginslikeCompleteAnalyticsOptimizationSuite(CAOS) andPerfmatterswillenableyoutodothis.YoucanreadmoreabouttheprocessinourcompleteguidetothisPageSpeedsuggestion.
21.ReducetheImpactofThird-PartyCode
We’venowmentionedafewdifferentwaysinwhichthird-partyscriptscannegativelyimpactyourperformance,andresultinfailedauditsfromPageSpeedInsights.Ideally,it’sbesttolimityourrelianceonthesetoolsinordertopreventadverseeffects.
However,insomecasesthebestsolutiontoaneedyoursitehasistoincorporateathird-partyscript.GoogleAnalyticsisanexcellentexample.Othersinclude:
Socialmediasharingbuttonsandfeeds
YouTubevideoembeds
iFramesforadsandothercontent
LibrariesforJavaScript,fonts,andotherelements
Incaseswhereyoudeemtheuseofathird-partyscriptnecessary,it’simportanttostillreduceitsimpactonyoursite’sperformance,asyourPageSpeedanalysisresultswilltellyou:
Reducetheimpactofthird-partycoderecommendation
Toloadthird-partycodemoreefficiently,youcanconsideroneofthetechniqueswe’vealreadymentionedinthispost:
DefertheloadingofJavaScript
Uselinktagswithpreconnect attributes
Self-hostthird-partyscripts(aswedescribedwithGoogleAnalyticsabove)
Thesemethodsshouldminimizetheimpactonyoursite’sperformance.
22.AvoidEnormousNetworkPayloads
Thisrecommendationisparticularlyrelevanttoyourmobilevisitors.Largepayloadscanrequiretheuseofmorecellulardata,therebycostingyourusersmoney.Minimizingthenumberofnetworkrequestsneededtoreachyourpagescanpreventthis:
Avoidenormousnetworkpayloadsrecommendation
Googlerecommendskeepingyourtotalbytesizeto1,600KBorless.Themethodsmostcommonlyusedtoachievethisgoalarefoundthroughoutthispost,including:
DeferringCSS,JavaScript,andimagesthatarebelowthefold
Minifyingcode
Compressingimagefiles
UsingtheWebPformatforimages
Implementingcaching
Followtherelevantstepsforthesestrategies,andyoushouldpassthisauditwithoutanyadditionaleffort.
23.UserTimingMarksandMeasures
Thisrecommendationisonlyrelevantifyou’reusingtheUserTimingAPI.ThistoolcreatestimestampstohelpyouevaluateyourJavaScript’sperformance.Ifyou’vesetuptheAPIforyoursite,you’llseeyourmarksandmeasuresunderthisheadinginPageSpeedInsights:
UserTimingmarksandmeasuresrecommendation
Asyoucansee,thisisanothersuggestionfromGooglethatdoesn’tresultina‘pass’or‘fail’.PageSpeedInsightssimplymakesthisinformationeasilyretrievable,soyoucanuseittoassessareasthatmayrequireoptimization.
Ifyou’reinterestedinincorporatingtheUserTimingAPIintoyourWordPresssite,youcanlearnmoreintheMozillaguideonthetopic.
24.AvoidanExcessiveDocumentObjectModel(DOM)Size
Insimplestterms,theDOMishowbrowsersturnHTMLintoobjects.Itinvolvestheuseofatree-structuremadeupofindividualnodesthateachrepresentanobject.Naturally,thelargeryourpage’sDOMis,thelongeritwilltaketoload.
IfyourpageexceedscertainstandardsregardingDOMsize,itwillrecommendreducingthenumberofnodesaswellasthecomplexityofyourCSSstyling:
AvoidanexcessiveDOMsizerecommendation
Acommonculpritifyou’ve‘failed’thisauditinPageSpeedInsightsisyourWordPresstheme.HeavythemesoftenaddlargevolumesofelementstotheDOM,andmayalsoincludeconvolutedstylingthatslowsyoursitedown.Ifthisisthecase,youmayneedtoswitchthemes.
Areyoustrugglingtoscore100/100on#GooglePageSpeed?Here'satip:don'tobsessoveryourscoreandfocusonwhat'strulyaffectingyourpageload!🚀📊ClicktoTweet
Summary
GooglePageSpeedInsightsshouldbeastapleinyourwebmastertoolbox.However,fixatingonyourscoreandobsessingoverreachingthecoveted100/100probablyisn’tthebestuseofyourtime.Itmaytakeyouawayfromotherimportanttasksthatcouldprovidemoresignificantbenefits.
Inthispost,wecoveredthewaysinwhichyourGooglePageSpeedScoredoesanddoesn’tmatter.Wealsosharedsomebriefguidelinesforputtingtheplatform’srecommendationstoworkonyourWordPresssite,inordertoimproveitsperformance.
DoyouhavequestionsaboutGooglePageSpeedInsightsoroptimizingyoursite’sperformance?Askawayinthecommentssectionbelow!
Savetime,costsandmaximizesiteperformancewith:
InstanthelpfromWordPresshostingexperts,24/7.
CloudflareEnterpriseintegration.
Globalaudiencereachwith29datacentersworldwide.
Optimizationwithourbuilt-inApplicationPerformanceMonitoring.
Allofthatandmuchmore,inoneplanwithnolong-termcontracts,assistedmigrations,anda30-day-money-back-guarantee.Checkoutourplansortalktosalestofindtheplanthat’srightforyou.
Hand-pickedrelatedarticles
Blog
HowtoImproveWordPressSearch(andSpeedItUp)
Despiteitsminisculesize,aWordPresssearchformholdsalotofpower.Inthisguide,you'lllearnhowtoimprovesearchonyourwebsiteandspe…
Readingtime
27minread
Publishdate
December16,2019
Blog
HowtoReduceTTFBtoImproveWordPressPageLoadTimes
CheckoutsomeoftheseeasywaystoreduceTTFBonyourWordPresssite.Fasthosting,utilizingaCDN,caching,andDNSallcomeintoplay.
Readingtime
12minread
Publishdate
January26,2017
Blog
HowtoOptimizeImagesforWebandPerformance
Imagesareoftenthe#1elementresponsibleforslowpageloadtimes.Learnhowtooptimizeimagesforweb,aswellasperformanceonyourWordPres…
Readingtime
19minread
Publishdate
May16,2017
Comments
LeaveAComment
SouravBasak
January30,2020at6:27am
Reply
PagespeedistheprimaryfactorthatmattersmostinGoogleranking.Ifyourwebsite’slandingpagesareslow,thevisitorcanmovefromyourwebsitetoanother,andyoucanmissthelead,eventrafficalso.FromGoogle’spointofviewsitespeedisoneofthesignificantfactorsappliedbyitsalgorithmtorankthepages.Fromauserpointofview,Pagespeedisalsoveryimportanttouserexperience.Pagesthathavealongerloadtime,gothigherbouncerates.
Grant
February8,2020at2:44pm
Reply
Greatarticle,verygoodsummaryofPagespeedInsights!Thisdoesnotsoundright“Webpackisoftenusedtoimplementcodesplitting.Notethatthisisafairlyadvancedtechniqueandbeginnersshouldusuallyundertakealone.”Missing“not”?Youcandeletethiscomment.Cheers!
heather
January20,2021at1:00pm
Reply
Arethereanyreferencesitesouttherethatpassallthe4itemsonGoogle’sPageSpeedtest?Ihavenotfoundany.
BrianLi
January27,2021at7:16am
Reply
HiHeather,mypersonalblogpassesGoogle’sPageSpeedInsightstests.Withthatsaid,Ispecificallydesigneditforperformance.
Max
January22,2021at11:43am
Reply
WhyisyourownblogsoslowatKinsta?
Thisarticlegetsa26/100scoreonmobile.
Anyproofs,thatWordPresssitesarereallyfastonKinsta?
BrianLi
January27,2021at7:14am
Reply
ThereareplentyofreviewsonG2thatmentiontheperformanceofsiteshostedonKinsta.WealsohaveavarietyofcasestudiesthatdocumentperformanceimprovementsaftermovingtoKinsta.
VaibhavSharma
July6,2021at2:15pm
Reply
Hi
Isthereawordpresspluginthatcanresolve“ProperlySizeImages”erorr?
G.Lewis
December13,2021at5:43pm
Reply
HopefullybythetimewegettoWEB4.0therewillbetemplateswithtotalpluginconsolidationandSEOoptimisationasstandard.
Steve
March4,2022at1:11am
Reply
CanWPRocketbeusedsimultaneouslywithAsyncJavaScriptandAutoptimize?
MarcelBootsman
March17,2022at1:08pm
Reply
Theoreticallyyes,butthisisnotadvisedandprobablyalsonotsupported.
AreyoutiredofslowWordPresshosting&horriblesupport?
WedothingsdifferentatKinsta.
Seeplans
LeaveaReplyCancelreplyCommentpolicy:Welovecommentsandappreciatethetimethatreadersspendtoshareideasandgivefeedback.However,allcommentsaremanuallymoderatedandthosedeemedtobespamorsolelypromotionalwillbedeleted.
CommentName
Email
Bysubmittingthisform:YouagreetotheprocessingofthesubmittedpersonaldatainaccordancewithKinsta'sPrivacyPolicy,includingthetransferofdatatotheUnitedStates.
YoualsoagreetoreceiveinformationfromKinstarelatedtoourservices,events,andpromotions.Youmayunsubscribeatanytimebyfollowingtheinstructionsinthecommunicationsreceived.
