Preloading google fonts with Autoptimize

Well, (a) it’s normal you would see two references to the font CSS in that case but (b) preload for that does not work as AO cannot recognize it as a CSS-file, to the as value is wrong.

What you could try though is preloading one or more of the actual fonts that are referenced in the Google Fonts CSS, e.g. https://fonts.gstatic.com/s/francoisone/v15/_Xmr-H4zszafZw3A-KPSZut9wQiR.woff2, https://fonts.gstatic.com/s/ptserif/v12/EJRVQgYoZZY2vCFuvAFWzr8.woff2 ?

hope this helps,
frank

Thanks for the clarification, bit of a novice here clearly. The goal is to improve pagespeed score and I only have a single item as render blocking resource left and it’s

https://fonts.googleapis.com/css?family=PT+Serif%7CFrancois+One&subset=latin%2Clatin-ext&display=swap

When I add both the individual google fonts to the preload, I end up with 3 total preload items in the header, the original blocking one and the two others I added.

<link rel="preload" href="https://fonts.gstatic.com/s/francoisone/v15/_Xmr-H4zszafZw3A-KPSZut9wQiR.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="https://fonts.gstatic.com/s/ptserif/v12/EJRVQgYoZZY2vCFuvAFWzr8.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" id="ao_optimized_gfonts" href="https://fonts.googleapis.com/css?family=PT+Serif%7CFrancois+One&subset=latin%2Clatin-ext&display=swap" /><link rel="profile" href="https://gmpg.org/xfn/11" />

Now I have the render blocking css + the 2 extra ones I preloaded through the extra tab.

Any ideas? Thank you for your time btw. Love your plugins

The goal is to improve pagespeed score and I only have a single item as render blocking resource left and it’s

In that case why not switch the Google Font option to “Combine and link deferred in head” (and forget about the preloading)?

Good point, I do remember trying it earlier and it didn’t resolve the issue. Take a look:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmmos.com%2Freview%2Flost-ark&hl=en&authuser=3

Only the Google Font is listed as blocking

Well, looking at the HTML the font is loaded in a non-render-blocking manner (using the “load css asynchronously” approach from filamentgroup);

<link rel="stylesheet" media="print" onload="this.onload=null;this.media='all';" id="ao_optimized_gfonts" href="https://fonts.googleapis.com/css?family=PT+Serif%7CFrancois+One&subset=latin%2Clatin-ext&display=swap" />

So this looks like a false positive in Pagespeed Insights really especially as a quick webpagetest test does not mark the CSS as render-blocking (but it does correctly identify the nextgen-gallery CSS as such)?

Thanks! Got caught up on pagespeed didn’t even look at other tests. Looks like I still got some work to do. Thank you for the assistance, much appreciated

• This reply was modified 3 years, 7 months ago by remotay.

you’re welcome, feel free to leave a review of the plugin and support here! ??

Done! Your contribution to the WP scene with Autoptimize is amazing. Truly a must have plugin. Thank you so much.