[Resolved] GTmetrix Blocking Time on Fonts

[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!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alirio]

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

[David]

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;

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alirio]

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

[David]

You’re welcome – not sure it will help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Praveen]

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

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Praveen]

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.

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts