css

How to delay loading Google Web Fonts to improve Core Web Vitals score

Good to know: CSS is a render blocking resource. This means it'll block rendering any content until CSS is fully processed! In this article you'll learn how to fix that

September 25, 2022 4 min read 1397 words
css web vitals performance

Google Web Fonts is just CSS

Good to know: CSS is a render blocking resource. This means it'll block rendering any content until CSS is fully processed!

Given the above, for sure there will be some impact on the Core Web Vitals/Lighthouse score for your web app due to CSS. There are 2 ways to fix this:

  1. Delay loading CSS (make it async)
  2. Inline all of your CSS. (include all of it in the HTML inside a {`