Support » Plugin: Autoptimize » Preloading google fonts with Autoptimize

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    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

    Thread Starter remotay

    (@remotay)

    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="http://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

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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)?

    Thread Starter remotay

    (@remotay)

    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

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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)?

    Thread Starter remotay

    (@remotay)

    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 2 months, 3 weeks ago by remotay.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

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

    Thread Starter remotay

    (@remotay)

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.