[Solution] Fix render blocking Google font issues (700ms savings to FCP)

[Fast Lane!]

First, all the credit to this site (Wordpress folks... no surprise!): 

Here is the fix to save 0.7s due to render blocking (and it is a big one for anyone using a google font which I think is the default.  This should probably just be a permanent update by IPB 🙂 IMO.  It's so minor (and the linked page goes into the details).

In the includeCSS template.  Change this:

<link href="https://fonts.googleapis.com/css2?family={expression="\IPS\Http\Url::encodeComponent( \IPS\Http\Url::COMPONENT_FRAGMENT, \IPS\Theme::i()->settings['body_font'] )"}:wght@300;400;500;600;700&display=swap" rel="stylesheet">

to this:

<link href="https://fonts.googleapis.com/css2?family={expression="\IPS\Http\Url::encodeComponent( \IPS\Http\Url::COMPONENT_FRAGMENT, \IPS\Theme::i()->settings['body_font'] )"}:wght@300;400;500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">

This is the specific difference which is quite minor: media="print" onload="this.media='all'"

This was before:

And after it's totally gone :).  The improvement is significant... with before:

and after (0.7s faster!):

I tried this other fix but it was a bit hacky, requiring inlining the Google font css (the issue).  It does work as well... just less elegant as above.

Note: I have ton's of other things that slow my site down (ads / header bidding, etc...) but the relative improvement is awesome!  This is not just faking Google Pagespeed ratings...  this is a legit 0.7s reduced pageload time for the first page view.

Thanks... hope this helps others. @Matt and team IPB.  You are welcome to use (hopefully) or not :P.  I linked to all references on the "why's" of the technical implementation.

[opentype]

Disagree. It’s a poor hack and therefore nothing we should want in a professional framework for thousands of websites. You trick the browser into thinking the fonts are not used for screen at all, then after the page is loaded, you say “April fools! Now switch to the webfont!”. It creates a terrible user experience because of the delayed and unreliable font change long after the page started rendering and the “local font first, use webfont later“ is already available as CSS declaration. It works in a much more reliable and optimized way because it was specifically designed for this use. 

If loading webfonts is not acceptable in terms of the loading times, the solution is simple: don’t use webfonts, which Invision Community already supports. onLoad is not the right moment to activate webfonts. 

Edited July 16, 2023 by opentype

[Fast Lane!]

You'd prefer a 0.7s rendering delay (until it is cached)?  Btw I don't see any issue with the swap (hence the display=swap param in the current font call which it's doing already).  Also, let's be practical.  For my site (at least) the page hasn't even rendered yet so there is no visible font swap (and the time to render was reduced with this change).

There was a second option -- to inline the Google font styles rather wait for them to be fetched (which is the 0.7s delay).

2 hours ago, opentype said:

then after the page is loaded

It does not wait until the page is loaded.  It just waits until the resource is loaded.  It's extremely quick up front and at least in my testing not visible to the user.

Edited July 16, 2023 by Fast Lane!

[opentype]

5 minutes ago, Fast Lane! said:

You'd prefer a 0.7s rendering delay (until it is cached)?

I don’t appreciate leading questions like that. 
If you would say “let’s reduce environmental pollution with measure ’X’“ and I point out that measure X might not work properly and might cause other issues, it would be naive at best or even dishonest to ask “so you don’t want to reduce pollution?” It just doesn’t logically follow. I addressed a specific measure/hack and explained my concerns. I have nothing more to add. 

[Fast Lane!]

6 minutes ago, opentype said:

I don’t appreciate leading questions like that. 
If you would say “let’s reduce environmental pollution with measure ’X’“ and I point out that measure X might not work properly and might cause other issues, it would be naive at best or even dishonest to ask “so you don’t want to reduce pollution?” It just doesn’t logically follow. I addressed a specific measure/hack and explained my concerns. I have nothing more to add. 

I was not trying to rub ya wrong :).  Big hugs.  Just trying to understand where the practical (realized) downside is here versus theory.  You said "then after the page is loaded, you say “April fools! Now switch to the webfont!" -- however as mentioned, the font actually swaps once the resource is loaded which for me appears to be pre-render (not after the page loads) so there is no practical issue other than the benefit of the reduced render timeline and FCP (due to no blocking).

What am I missing here?

[Fast Lane!]

Just to add, I think the Google webfont is the default for the IPB suite.  I checked this page and IPB uses it too.  So this render blocking delay effects many people (without many knowing it) which is why I bothered to share a workaround here.

If there is a better solution -- awesome.  Maybe we can brain storm ideas?  Maybe in IPB 5 it will be baked in as the default.  🙂

[Randy Calvert]

This is a situation where you are catering to a bot instead of your actual users. 

[Fast Lane!]

This is talked about on many sites and reddit threads as an issue.  To each their own I guess.

 

 

[Fast Lane!]

I'm curious (maybe for my education and others) what part of this sites logic is wrong?  https://metabox.io/load-google-fonts-faster-wordpress/

They walk through various option with pros and cons

[CheersnGears]

19 hours ago, Fast Lane! said:

I'm curious (maybe for my education and others) what part of this sites logic is wrong?  https://metabox.io/load-google-fonts-faster-wordpress/

They walk through various option with pros and cons

What you're potentially setting yourself up for is a penalty on Cumulative Layout Shift. It won't be the entire penalty, but it will add to it.  Google has started to really pay attention to that.

[rfcontreras]

On 7/16/2023 at 5:54 AM, opentype said:

If loading webfonts is not acceptable in terms of the loading times, the solution is simple: don’t use webfonts, which Invision Community already supports. onLoad is not the right moment to activate webfonts. 

Hi OpenType, 

I've been searching about not using webfonts but I can't find the setting. It's a IPB setting or some coding is needed ?

Regards

Ricardo

[Nathan Explosion]

Edit your theme's settings

[rfcontreras]

Hi Nathan,

Thanks for your reply! I'm using "Default" but I don't know why the webfont is still being loaded, that's why I'm asking if you can "remove" the webfont loading.

Thanks!

Ricardo

[Nathan Explosion]

On the default theme, that setting removes the loading of the webfont from Google...

Before:

 

After:

 

 

Maybe an issue with your theme then?

If so...check the includeCSS template in your theme, which contains the code for those highlighted lines.

 

Edited July 21, 2023 by Nathan Explosion