Day 6 of⚡️ #30DaysOfWebPerf ⚡️: Self-hosted fonts
Google Fonts is great, but how do we avoid the performance pitfalls?
But we're still getting a latency penalty because the browser doesn't know it needs to download those fonts until it...— Sia Karamalegos (@TheGreenGreek) November 8, 2019
1) first downloads the HTML,
2) then the CSS,
3) then creates the CSSOM at which point it knows it needs the files. pic.twitter.com/MM8SySThdF
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!— Sia Karamalegos (@TheGreenGreek) November 8, 2019
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. pic.twitter.com/MD7hCm4OSb
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.— Sia Karamalegos (@TheGreenGreek) November 8, 2019
So how did we do? Pretty awesome! pic.twitter.com/OjYrF8J0zv
Hi, I'm Sia.
I'm a freelance performance engineer and web developer, and I'm available for your projects.Hire me