[Resolved] Preload Key Requests

[troyw]

Using Pagespeed Insights and Pingdom, I am finding one of my biggest speed issues is coming from ‘Preload Key Requests. As you can see, the offenders appear to be GP Premium and some GP fonts.
How do I make this go away?

[Elvin]

Hi there,

You can try David’s answer found here:
https://generatepress.com/forums/topic/local-font-pagespeed-insights/

And since you have 3 fonts being flagged, you’ll have to preload all 3 of them.

[troyw]

Hi Elvin,

I have followed the above instructions and added the Hook Element as per above but am stuck with the Font upload. Fontello font is not in Google Webfonts? In fact, I don’t know where this font came from in the first place to be honest, maybe the Generate Press theme?

So I found the font online and copied it into my Child Theme folder via FTP, however I cannot complete the instructions here because it is not in @Webfonts? These instructions are unclear and while it advised us;

If you’re comfortable with uploading files to your server via FTP, you can skip this step and simply upload your font files to your child theme.

it doesn’t tell us where to pick up the trail again.

As the font file does not appear in my media library and I cannot use @fontface I have reached a dead end in these instructions. Please can you advise the next step?

I seem to remember going through this process some time ago and having similar issues. With this hideous ‘Google Core Web Vitals’ update looming over us, is there any way GeneratePress can come up with a straight forward solution for this. This process seems so incredibly complicated and with so many websites to fix, will be massively time consuming for developers.

Failing a simple solution, can you and the team suggest how I / we can avoid this problem in future. Is there something we can do during the initial build to avoid this?

Sorry to moan, but ‘PageSpeed Insights’ now seems to be highlighting / (manufacturing) so many problems, even on simple, lightweight sites I have built using Generatepress. I know it’s definitely not GP’s fault and things like image sizes etc are our responsibility, but things like font issues are a real killer.

Again sorry if I have gone off on a tangent, I still love you guys!

Many thanks

[Elvin]

I have followed the above instructions and added the Hook Element as per above but am stuck with the Font upload. Fontello font is not in Google Webfonts? In fact, I don’t know where this font came from in the first place to be honest, maybe the Generate Press theme?

It’s from Lightweight Social icons.

Here’s the code you can insert on wp_head hook using the Hook Element:

<link rel="preload" href="https://www.yourdomain.com/wp-content/plugins/lightweight-social-icons/fonts/fontello.woff" as="font" type="font/woff">

I removed your URL for privacy concerns but you should add it in there instead of www.yourdomain.com

So I found the font online and copied it into my Child Theme folder via FTP, however I cannot complete the instructions here because it is not in @Webfonts? These instructions are unclear and while it advised us;

I’m not sure what you mean by this. Preloading doesn’t require you to upload the fonts. You just need the <link rel="preload"> code and the URL to the font file you’re trying to preload and hook it to wp_head.

To clarify, are you trying to host font locally instead of preloading?

If you’re trying to locally host a font, To put it simply, what you do is:

1.) download the font
https://docs.generatepress.com/article/adding-local-fonts/#downloading-our-font

2.) upload the font to your site either via FTP or through Media library by allowing WordPress to accept font files on its media upload using the PHP snippet provided.
https://docs.generatepress.com/article/adding-local-fonts/#uploading-our-font

3.) Import the font for CSS referencing using @font-face
https://docs.generatepress.com/article/adding-local-fonts/#using-font-face

4.) Optional: Adding it to the theme’s customizer setting.
https://docs.generatepress.com/article/adding-local-fonts/#adding-it-to-the-customizer

As the font file does not appear in my media library and I cannot use @fontface I have reached a dead end in these instructions. Please can you advise the next step?

It doesn’t have to appear on the media library. As long as you know the file path, example – /wp-content/themes/generatepress_child/fonts/myfont.woff – then you can use than for the @font-face url().

I seem to remember going through this process some time ago and having similar issues. With this hideous ‘Google Core Web Vitals’ update looming over us, is there any way GeneratePress can come up with a straight forward solution for this. This process seems so incredibly complicated and with so many websites to fix, will be massively time consuming for developers.

Failing a simple solution, can you and the team suggest how I / we can avoid this problem in future. Is there something we can do during the initial build to avoid this?

Having a one-size-fits-all solution to this is quite tricky. Not all sites need to preload their fonts. Google PSI may flag for font-display swap rather than preloading on some sites.

The 2 have pros and cons. See here: https://betterwebtype.com/articles/2019/11/02/preloading-fonts-when-does-it-make-sense/

And while we can do something about making preloading automatic fonts picked on the customizer, we can’t do anything about the fonts used by the plugins as it’s up to the developer to preload their fonts. Plus, it’s something that may be non desirable for other sites as it has its own cons.

Note: While I understand that LSI plugin is also a plugin Tom develops, the point still stands for the other plugins who uses their own font.

That said, things like this are left out.

[troyw]

Hey,
I have added the code you suggested
`Here’s the code you can insert on wp_head hook using the Hook Element:

<link rel=”preload” href=”https://www.mydomain.com/wp-content/plugins/lightweight-social-icons/fonts/fontello.woff&#8221; as=”font” type=”font/woff”>

However I still have the error in PageSpeed Insights (see attached link)

So am I supposed to be hosting the fonts myself or not?

[Elvin]

So am I supposed to be hosting the fonts myself or not?

Actually, in your case, the font is already added to your site through the plugin.

As mentioned on my previous reply – “Preloading doesn’t require you to upload the fonts. You just need the <link rel=”preload”> code and the URL to the font file you’re trying to preload and hook it to wp_head.” -meaning you don’t have to locally host the fonts.

However I still have the error in PageSpeed Insights (see attached link)

I don’t see the same error anymore.
https://share.getcloudapp.com/2NuE0W1P

The flags your site gets now is related to font-display I’ve mentioned on the previous reply.

To address this, try using this PHP snippet.

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

[troyw]

Hey Elvin,
I have added that Filter to the function.php of the child theme and I still get the error. It only shows on Mobile, not Desktop?

[Elvin]

I have added that Filter to the function.php of the child theme and I still get the error. It only shows on Mobile, not Desktop?

Ah right, I should say that the snippet was for how the theme adds the google fonts by default.

If you’re locally hosting the google fonts or any other fonts, you may have to edit the @font-face you’ve added to add font-display: swap;.

As for the <link rel="preload" href="https://www.yourdomain.com/wp-content/plugins/lightweight-social-icons/fonts/fontello.woff" as="font" type="font/woff"> error you may have to add crossorigin attribute.

example:

<link rel="preload" href="https://www.yourdomain.com/wp-content/plugins/lightweight-social-icons/fonts/fontello.woff" as="font" type="font/woff" crossorigin>

[troyw]

Hey Elvin, that seems to have worked, thanks.
I am getting a warning in Page Speed Insights which says ‘Ensure text remains visible during webfont load’. Is this anything to do with hosting the fonts?

[Elvin]

I am getting a warning in Page Speed Insights which says ‘Ensure text remains visible during webfont load’. Is this anything to do with hosting the fonts?

It’s possible to get that flag whether the font is hosted locally or not.

I’ve actually mentioned that from my previous replies.

and this snippet should fix it unless you’re hosting it locally:

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

If you’re hosting the fonts locally, instead of using this PHP snippet, you should edit your @font-face codes to include font-display: swap; as I’ve mentioned on my previous reply.

[troyw]

Hey,
So I am going through all of my websites and making these changes, but I now have another site which is not responding to any of the above. I have added a Hook Element and added the filter to functions.php, but Page Speed Insights still shows a big delay under Mobile. The message is ‘Ensure text remains visible during webfont load’ and Once again, it is this Fontello font playing up. 550ms
Why is this happening again, even with the Web Hook?

Is there anything I can do in future to avoid this Fontello font as it really seems to upset the Page Speed? I’m not choosing Fontello, it just seems to be a part of all the GP themes I use?

Chees

[troyw]

Please ignore above.
I have found that I can apply that @fontface swap in Litespeed Cache and that fixes it.

Many thanks for your time.

[Elvin]

Is there anything I can do in future to avoid this Fontello font as it really seems to upset the Page Speed? I’m not choosing Fontello, it just seems to be a part of all the GP themes I use?

I’ve mentioned quite a few times on the previous replies that this is from the Lightweight Social Icons plugin, one of the old plugins Tom used to develop. But it’s quite dated now so if you want to replace this plugin with another one, you can do that. 😀

I have found that I can apply that @fontface swap in Litespeed Cache and that fixes it.

Ah yes you can do that as well. Glad you got it sorted.

[Author]

Posts