Webfont.js And Render Blocking Google Fonts

  • Hey Frank,

    Love the new AO features ??

    Just a suggestion for the new Google Fonts options. Webfont.js works but will almost always still cause the “Render Blocking” recommendation on PageSpeed Insights for the fonts it’s asynchronously loading. Rather than deal with those future 234,635,765 support requests about that, you might consider something like so:

    <script>function loadCSS(e,t,n){"use strict";var o=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e,o.media="only x",s.parentNode.insertBefore(o,s),setTimeout(function(){o.media=n||"all"})}loadCSS("insert-you-favorite-color-here");</script>

    GPSI still doesn’t ‘get it’ with this sometimes, but does far more often than with webfont.js.

    Be well,
    AJ

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

    (@optimizingmatters)

    interesting. i’m already using loadCSS for the deferred CSS. on the other hand, what if I set the inline webfont.js-calling JS from wf.async=\'true\' to wf.defer=\'true\'? that would _force_ webfont.js and hence the fonts to be loaded (even) later, no?

    Thread Starter AJ @ WpFASTER.org

    (@ajm_1976)

    It would. The FOUT is obviously more pronounced, however.

    Just to emphasize: The problem is not with webfont.js (it does in fact async fonts) but with PageSpeed Insights and how it speculates about and/or deals with stuff that appears in the </head>. For a reason we’re still a bit fuzzy about, GPSI likes RequestAnimationFrame, LoadCSS, webfont.js, in that order, in spite of LoadCSS and webfont.js being superior in terms of real world performance.

    Another potential option, Frank, would be “Inline Google Fonts CSS?” (Fast Velocity Minify offers this). The irony here being that while inlining Google Fonts CSS will get rid of the render blocking recommendation for Google Fonts on GPSI, the specific file the browser needs… will block rendering in the real world. Albeit in a far less significant manner than the browser having to contend with parsing an entire aggregated font file for example.

    AJ

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    thanks AJ. will go for the simple wf.defer='true' for now, might revisit later. fonts are messy, whatever way one tries to optimize them.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Hey AJ, small update; “combine and preload in head” will be the 5th option in AO 2.4. lots of FOUT on my dev-instance though, but if it makes GPSI happy … ??

    will also switch webfont.js based solution back to “async”.

    Thread Starter AJ @ WpFASTER.org

    (@ajm_1976)

    Awesome! Yeah, big FOUT. And will sometimes still be identified as render blocking for mobile on PSI lol ??

    Be well,
    AJ

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Webfont.js And Render Blocking Google Fonts’ is closed to new replies.