Support » Plugin: AMP » AMP Fonts – Page Speed Insights

  • Resolved David Elstob

    (@davwaiguy)


    Page speed insights is giving me an error for not incorporating the following rule. No matter what I’ve tried, hosting the fonts on my CDN, etc, I can’t get rid of this error in the audit.

    Ensure text remains visible during webfont load
    Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more.

    When you click on Learn more it advises to use the font-display rule:

    @font-face {
    font-family: ‘Arvo’;
    font-display: auto;
    src: local(‘Arvo’), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format(‘woff2’);
    }

    Obviously this is PSI related, but I believe it’s to do with the way the plugin calls the font? It doesn’t give me a URL, but I believe it is a blob that it links to?

    Any advice would be helpful please?

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    Yeah, this is a known issue. It’s a very common complaint. See https://github.com/google/fonts/issues/358

    A solution is to fetch the stylesheet source and serve it yourself as part of style[amp-custom].

    Thread Starter David Elstob

    (@davwaiguy)

    Thanks for the input.

    One thing I did notice, in an audit recently on Lighthouse, it actually said that there were some unused styles in the style sheet you mention, plus another AMP custom one that I can’t remember its name exactly. Only that they were both AMP.

    No drama, but you just reminded me of it!

    Cheers!

    Plugin Author Weston Ruter

    (@westonruter)

    (I mean, it’s a common issue on the web, not just in the AMP plugin.)

    Plugin Author Weston Ruter

    (@westonruter)

    @davwaiguy Which unused styles specifically? Please share the specific URLs that were reporting.

    Thread Starter David Elstob

    (@davwaiguy)

    My gut feeling it was a console log message in one of the Google products. I specifically remember it stated the size in kb and there were definitely two items.

    Also, I remember that they were both AMP styles one was AMP Custom and the other was something like css/amp and I got the impression that one was only used partially and the other wasn’t used at all because it gave me the sizes and what I could save by removing them.

    So if one was 14kb it said savings 14kb. That’s how I know none were used. The other was of similar size, but the savings were roughly half.

    Sorry I can’t point you to it at present. I’ll do my best to track it down.

    Thread Starter David Elstob

    (@davwaiguy)

    As for the URLs it will only of been on the three sites I’ve been playing with recently:

    https://sonicseo.co.uk/

    https://gossiplolly.com/

    https://parallaxsite.com/

    Thanks

    Plugin Author Weston Ruter

    (@westonruter)

    @davwaiguy In regards to improving the performance of Google Fonts, try out this plugin: https://gist.github.com/westonruter/25474fcdea0dc4ac69f3af551f0f15e9

    Please see the plugin’s description for more details.

    Akki Verma

    (@luckyankit)

    I get this error too for my site. Should I try this?

    Plugin Author Weston Ruter

    (@westonruter)

    Sure. Just beware that it will increase the size of style[amp-custom], so be careful that you are well below the 50KB limit.

    Akki Verma

    (@luckyankit)

    Oh yes, then I would skip it. I am already on verge of 50KB.

    Thread Starter David Elstob

    (@davwaiguy)

    @weston Ruter thanks for your input. Really appreciate it.

    I’m trying to test it for you – on the one site where I’m still getting the error – my tester site (parallaxsite.com), but Page Speed Insights doesn’t seem to be registering my updates yet.

    Probably need to wait till all the CDN caches have cleared, etc.

    Cheers!

    Sorry for spamming this thread, but… this was released
    https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap

    • This reply was modified 1 year, 10 months ago by lofesa.
    Plugin Author Weston Ruter

    (@westonruter)

    Also landed in core for bundled themes: https://core.trac.wordpress.org/ticket/47282

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘AMP Fonts – Page Speed Insights’ is closed to new replies.