[Resolved] GTmetrix Blocking Time on Fonts

Home Forums Support GTmetrix Blocking Time on Fonts

  • This topic has 11 replies, 4 voices, and was last updated 9 months ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1100164
    Alirio

    Hi GP Team. This blocking time is driving me crazy.

    It seems that all fonts, direct download from Google and the GP theme’s have the same problem. Their blocking time is too high.

    If I switch to system fonts to avoid downloading fonts from Google, I’ll have left generatepress.woff2, wp-show-posts.ttf, fontello.woff.

    https://gtmetrix.com/reports/ithrive.health/qU9x2Euw

    Any insight on how to improve these times? Also, what’s this blocking time if you don’t mind me asking?

    I just don’t think that a 300KB page with 14 requests shouldn’t take a second or more to load. Maybe I need serve Google fonts locally and switch CDN providers?

    Thank you!

    #1100411
    David
    Staff
    Customer Support

    Hi there,

    i am never too sure if GTMetrix or similar tools provide 100% real-world timings – if anything they provide a worse case scenario which isn’t a bad thing.

    I tested your site on Chrome Dev Tools – i am based in the UK on a reasonably good internet service and the best time result for full load was 309ms. No ‘blocking’ visible on the fonts.

    You can eliminate the GP Icon fonts – by switch the Customizer > General > Icon Type to SVG.

    #1100474
    Alirio

    Thank you, David. Maybe I’m just going too crazy trying to obtain the maximum performance I can get.

    I learned somewhere that the blocking time is fixed by hosting fonts locally and preloading them in the header. I’ll try that some other time.

    #1100897
    David
    Staff
    Customer Support

    I saw that you have dns-prefetch on //fonts.gstatic.com you can try preconnect instead which will allow the font CSS and font file request to happen in parallel.
    But the site loads ridiculously fast anyway 🙂

    #1100900
    Alirio

    Dang. Thank you, David. And how do I change that? 🙂

    #1101127
    David
    Staff
    Customer Support

    Try this PHP Snippet:

    if ( ! function_exists( 'generate_typography_resource_hints' ) ) :
    add_filter( 'wp_resource_hints', 'generate_typography_resource_hints', 10, 2 );
    function generate_typography_resource_hints( $hints, $relation_type ) {	
    	if ( 'preconnect' === $relation_type ) {
            $hints[] = '//fonts.gstatic.com';
        }
     
        return $hints;
    }
    endif;
    #1101134
    Alirio

    I added it and can see it on the page code. Thank you, David!

    #1101137
    David
    Staff
    Customer Support

    You’re welcome – not sure it will help 🙂

    #1114301
    prakshah

    Hi, can this code be used by anyone with any font? I added it using code snippets plugin. Is that fine?

    #1114302
    David
    Staff
    Customer Support

    Hi there,

    that specific code applies to Google requested fonts, so if you’re using them you can use the snippet.

    #1114310
    prakshah

    Thanks! this was super fast!!

    Is there a way to optimise fontawesome too? Its been flagged as a potential area of improvement by pagespeed and pingdom.

    #1114566
    Tom
    Lead Developer
    Lead Developer

    You might be able to if you’re using their CDN: https://stackoverflow.com/questions/49268352/preload-font-awesome

    It’s better to build your own font with only the icons you need instead of using the entire Font Awesome library. IcoMoon is a good tool to do that.

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