Move Google Fonts block out of head to defer loading.

[alph486]

TL;DR - I recommended deferring the load of the font and CSS to improve First Contentful Paint and overall performance.

The default Google Font docs recommend you copy the font / css links into the . Per Google PageInsights, this is probably the highest contributor to First Contentful Paint (on mobile 700ms). Moving the style and fonts links to the tag and deferring their load enables a much faster First Contentful Paint by deferring the load. In the worst case (on my site at least) the resulting "flicker" for an extremely slow load of the CSS isn't too bad..probably because the default font isn't too wildly different than Poppins.

[JugglerX]

I wonder if there is a more elegant approach to improve this? Moving things to the bottom of the body is kind of a brute force approach. Cant we take advantage of something like preconnect, async, preload? I can see the google fonts snippet is out of date compared to the latest instructions. I didnt find anything about moving fonts to the bottom in these guidelines https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/?utm_source=lighthouse&utm_medium=lr

[alph486]

You might be right. I tried that initially but gave up because I'm less familiar with those directives' relationships and ran into issues. The problem in getting that working thus far might come from the dependency of the css on the font files.

I'm tinkering around with preload and pre connect for the fonts/styles to see if there's something better. Will report back.