Credits :ifyouwillit
today I’m going to show you how to preload local fonts so that you can increase the performance of your website

I already did a GT metrics report for this particular test site and it’s running the Astra theme and typically you’ll see these fonts loaded from any sort of well a lot of custom themes and also page Builders do in this case you’ll see that Astra. Woff is loaded is 3.2 KB it takes about 250 Ms to load and it appears to be blocking here for about a hundred 3839 Ms so what we want to do is we want to preload this and have it load asynchronously

I’m with some of these other assets so the way we do that we can go over to plugins like add new will search for asset

install asset cleanup

activate

go to the settings of the plugin

then the settings the first thing that is going to ask you is if you want to prevent useless and often large CSS in JS files increasing you total page size I typically just

toggle I understand quick update all settings

and we’re ready to go can I will go back over to the gtmetrix waterfowl report click on the Astra. Woff file

so I’ll select

the the part of the URL that doesn’t include the domain name

copy that go back over to the tab for acid clean up

and I’m going to go down to local fonts now this is where you can add fonts to be pre-loaded so I will go ahead and paste the URL of the font that I want to preload

and click update all settings

okay so we’re updated will go ahead and clear the cache

flush out of the cash just to make sure

now we’ll head back over to our gtmetrix report

crec retest

and with any luck we’re going to see that the font is loading at the same time as other assets and is loading higher up on the waterfall

so let’s take a look

all right

so take a look at the waterfall and we can see that where is it there it is okay so now this font is loading in 77 Ms and it’s loading concurrently with other resources and it’s loading a fairly high up on the waterfall so that’s how to increase a little bit of performance bye-bye pre-loading some of your local fonts and by the way you can do this with multiple fonts so if you have multiple fonts that are blocking you can put them all over here in the settings plug-in and and gain some performance that’s all for today

today I’m going to talk about a plug-in that I recently started using it’s called asset cleanup and it

unloads scripts from pages that really don’t need to load those scripts and it’s very easy to do they also they have a test mode which makes the changes visible to just use so in case you break something you don’t need the world to see it so here’s how it works

on on every page you’re going to have this little section in the bottom and you just go through here and this one is for a Melia which is the plug-in I use for my appointments calendar

there’s no calendar on this page so I don’t need that so I can click unload on this page

better click to tweet yeah kind of I might want someone to tweet something from that page choose scripts that you think aren’t going to load on this page and if it breaks something then

uncheck it

sometimes it’s just trial and error disabling the scripts on this particular page that you don’t need

Add a review

Origin Ten  Ltd,
Queens House
200 Lower High Street
Watford
WD17 2EH

Stay tuned

Exceptional quality. Ethical factories. Radical Transparency. Shipping and returns.

    Privacy Preference Center