Best practice for Google Fonts in Standard Mode

There’s a section on amp.dev that provides best practices for using custom fonts on AMP URLs.

Note that as the AMP plugin performs CSS treeshaking any additional fonts or styles don’t load in AMP URLs if not used, so much of the optimization is already performed, including preconnect. As opposed to hosting fonts locally or using Google Fonts you could use any web safe font should any suit your style or preference.

With the Litespeed Cache Plugin, whith the Load CSS Asynchronously option on, there are errors in the validator.

Out of curiously have you performed some performance tests after temporary deactivating or using the Plugin Suppression feature of the AMP plugin to limit your caching or optimization plugins on AMP URLs? Some such plugins have features that can conflict with the AMP Optimizer.

When you’re performing some performance tests you can also check the performance of the AMP Cache version of your site, which should lead to even better results. If you want to provide your URL I can provide you with the AMP cache version.

How interesting. The website is fully AMP and running in Standard AMP mode, so I hadn’t considered disabling. I’m getting between 90-97 on the desktop performance test but between 50-60 on mobile, which is confusing the living daylights out of me.

Will try some supression though and see.

@mspr1nt What’s your site’s URL? I want to see the PSI scores for desktop and mobile.

For fonts, I’m guessing you’re trying to trying to eliminate Lighthouse from raising a flag about blocking stylesheets?

Note that the asynchronous loading option in LiteSpeed Cache won’t work on AMP pages, since it probably relies on JavaScript. And that’s why you’re getting validation errors.

The AMP plugin will automatically add the preconnect link for Google Fonts and the AMP runtime has a built-in means of limiting the amount of time that external stylesheets block rendering.

You can self-serve your own fonts in order to eliminate the need for a render-blocking stylesheet, but this is not so straightforward for Google Fonts since it is tuned to serve optimized fonts tailored for each browser. I created a plugin that automatically inlines Google Font stylesheets, however your mileage may vary! https://gist.github.com/westonruter/25474fcdea0dc4ac69f3af551f0f15e9

• This reply was modified 3 years, 10 months ago by Weston Ruter.