Support » Plugin: Autoptimize » Ensure text remains visible during webfont load

  • Resolved lgwp3000

    (@lgwp3000)


    Hello there,
    thank you for a great plugin, it improved speed of our site quite a bit.
    We are using option Combine and load fonts asynchronously with webfont.js as this option gives us the best speed results. However, on Google Page Speed insights we see a notice that we should ensure text remains visible during webfont load.
    Is there any way to utilize font-display: swap when fonts are loaded asynchronously?
    Thank you for your help.

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

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

    (@optimizingmatters)

    Afraid not to my knowledge, Google seems the have moved away from webfont.js, I would recommend switching to “aggregate & preload fonts” instead.

    hope this helps,
    frank

    Thread Starter lgwp3000

    (@lgwp3000)

    Thank you for your quick reply. We will keep it as it is for now as when aggregating and preloading the Google Page Speed Score drops by 15 points.
    Kristina

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    So if the score is 15 points lower, what are the differences in lab data/ opportunities/ diagnostics?

    Thread Starter lgwp3000

    (@lgwp3000)

    This is with loading fonts asynchronously (I have Google Page Speed in local language so the translations might not be 100% accurate):
    Mobile score: 53

    First contentful paint: 2 seconds
    First purposeful paint: 2.1 seconds
    Speed index: 6.3 seconds
    First processor idle: 7.8 seconds
    Time till interactive: 8.7 seconds
    Max first input delay: 610 ms

    Opportunities:
    Decrease server response time (TTFB) :1.53s
    Remove render blocking resources: 0.94s (Autoptimize css, scss and jquery)
    Remove unused css: 0.3s (Autoptimize css)

    Diagnostics:
    Ensure text remains visible during webfont loaad (all Google fonts and one another)
    There are other points but these do not change with font load change.

    Combine fonts and preload in header:
    Mobile score: 40

    First contentful paint: 4.1 seconds
    First purposeful paint: 4.2 seconds
    Speed index: 6.7 seconds
    First processor idle: 7.8 seconds
    Time till interactive: 8.5 seconds
    Max first input delay: 620 ms

    Opportunities:
    Decrease server response time (TTFB) :1.33s
    Remove render blocking resources: 0.9s (Autoptimize css, scss and jquery)
    Remove unused css: 0.45s (Autoptimize css)

    Diagnostics:
    Ensure text remains visible during webfont loaad (one theme font)

    Any ideas? I do not have any caching plugin enabled yet.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    might be the display:swap when preloaded slows the first paint down (although I don’t see how it could be 2s), but that’s just a guess … guess it’s webfont.js for you 😉

    Thread Starter lgwp3000

    (@lgwp3000)

    OK, we will leave it as it is for now, thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Ensure text remains visible during webfont load’ is closed to new replies.