Day 6 of⚡️ #30DaysOfWebPerf ⚡️
Happy Friday, y'all!
Did you think I forgot about self-hosted fonts? We can make those faster too!
Normally, we add them to our CSS like so:14:53 PM - 08 Nov 2019
1
1
But we're still getting a latency penalty because the browser doesn't know it needs to download those fonts until it...
1) first downloads the HTML,
2) then the CSS,
3) then creates the CSSOM at which point it knows it needs the files.14:53 PM - 08 Nov 2019
Luckily, there is another resource hint we can take advantage of in situations where we know we DEFINITELY need a resource. We can preload it!
Preload tells the browser that a resource can be loaded right away even though the signal for it's use hasn't been read yet.14:53 PM - 08 Nov 2019
Don't do this unless you definitely need a resource for a particular page. You'll waste the user's data and bandwidth. Luckily, in Chrome you'll get a warning in the console if it doesn't see you using the resource within a few seconds.
So how did we do? Pretty awesome!14:53 PM - 08 Nov 2019
Discussion