- This topic has 11 replies, 4 voices, and was last updated 4 years, 3 months ago by Tom.
-
AuthorPosts
-
December 10, 2019 at 10:29 am #1100164Alirio
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!
December 10, 2019 at 4:20 pm #1100411DavidStaffCustomer SupportHi 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.
December 10, 2019 at 6:56 pm #1100474AlirioThank 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.
December 11, 2019 at 5:56 am #1100897DavidStaffCustomer SupportI saw that you have
dns-prefetch
on //fonts.gstatic.com you can trypreconnect
instead which will allow the font CSS and font file request to happen in parallel.
But the site loads ridiculously fast anyway πDecember 11, 2019 at 6:08 am #1100900AlirioDang. Thank you, David. And how do I change that? π
December 11, 2019 at 7:28 am #1101127DavidStaffCustomer SupportTry 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;
December 11, 2019 at 7:42 am #1101134AlirioI added it and can see it on the page code. Thank you, David!
December 11, 2019 at 7:44 am #1101137DavidStaffCustomer SupportYou’re welcome – not sure it will help π
December 26, 2019 at 5:47 am #1114301PraveenHi, can this code be used by anyone with any font? I added it using code snippets plugin. Is that fine?
December 26, 2019 at 5:49 am #1114302DavidStaffCustomer SupportHi there,
that specific code applies to Google requested fonts, so if you’re using them you can use the snippet.
December 26, 2019 at 5:55 am #1114310PraveenThanks! 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.
December 26, 2019 at 8:58 am #1114566TomLead DeveloperLead DeveloperYou 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.
-
AuthorPosts
- You must be logged in to reply to this topic.