Preload Font Site Speed Issue

Your hrefs need to be complete URLs since the header.php is used on every page.

Also, <link> is not self-closing, so remove the last slash before the >.

Thanks for responding ??

I’ve changed it now to

<link rel="preload" as="style" href="https://brightrockmedia.com/wp-content/themes/hitmag/css/font-awesome.min.css" >
<link rel=”preload” href=”https://brightrockmedia.com/wp-content/themes/hitmag/fonts/fontawesome-webfont.woff2?v=4.7.0” as=”font” type="font/woff2" crossorigin>

But it still doesn’t fix the issue in page speed insights.

You know not all browsers support this, right? And browsers use different font file types.
What exactly does the optimization error say?

It’s a little confusing, because the CSS file has all the font files listed, in order, and you are showing a preload for just one (which is third in the list).

It says:

Preload key requests
2.07 s
Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load. Learn more.
URL
Potential Savings
…fonts/fontawesome-webfont.woff2?v=4.7.0(brightrockmedia.com)
2,070 ms

Well, perhaps the Insights tool doesn’t know how to match up the relative URL with the full URL.
Have you looked at the Network tab of the Developer Tool in your browser as the page loads to see if it preloads it?

Just took a look there. I’m not entirely sure how to decipher whether it’s getting preloaded right, but the font appears in roughly the same place on the list with the code there and with the code removed (after several other fonts)

S6u8w4BMUTPHjxsAXC-q.woff2 FontS6uyw4BMUTPHjx4wXg.woff2 FontS6u9w4BMUTPHh6UVSwiPGQ.woff2 Fontmem8YaGs126MiZpBA-UFVZ0b.woff2 Fontmem5YaGs126MiZpBA-UN7rgOUuhp.woff2 Font4iCs6KVjbNBYlgoKfw72.woff2 Font4iCv6KVjbNBYlgoCxCvjsGyN.woff2 Fontfontawesome-webfont.woff2?v=4.7.0 Fontdata:application/fo…

With and without the code snippet in the header, that font queues in the same place @ 1.7-1.8s
With the code in the css does, however, load closer to the top. It looks like it actually loads the font from font-awesome.min.css?v=4.7.0, but if I change the css preload line to that, it just loads that stylesheet twice and the font still loads in the same place.

I’m stumped :/

I have the same problem and I already broke my head looking for solutions, did you find any?

Same problem i can not find a solution =(

https://www.webnots.com/how-to-fix-preload-key-requests-with-fonts-in-wordpress/

With that i reduced the load from 1.4 second to 0.3

See you!

• This reply was modified 4 years, 9 months ago by claudiofromchile.

The best solution to this I found was the Asset CleanUp plugin, which has font preloading built-in. Just past the font URL in the preloading option there, should get rid of this issue.

I don’t know what else is wrong with your preload, but I noticed you are using ”, instead of ”
<link rel=”preload” href=”https://brightrockmedia.com/wp-content/themes/hitmag/fonts/fontawesome-webfont.woff2?v=4.7.0” as=”font” type="font/woff2" crossorigin>
should be
<link rel="preload" href="https://brightrockmedia.com/wp-content/themes/hitmag/fonts/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin>

This comment (@newwithtags) helped solve the problem. Pagespeed stopped complaining. But did it help increase the download speed? No. I don’t see any reason to worry.

Hi All,

I have the same issue, tried even installing the mentioned plugin and this simply does not work.
I have edited two files, namely header.php, where I have added:

<link rel="preload" href="https://jakaoferta.pl/wp-content/themes/Newspaper/images/icons/newspaper.woff?19" as="font" type="font/woff2" crossorigin>

and functions.php where I have:

// Preload Newspaper fonts for mobile theme

function dns_prefetch_mobile() {
	
	echo "<link href='https://www.jakaoferta.pl/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.woff?19' rel='preload' as='font' type='font/woff' crossorigin='anonymous'>";
}
add_action( 'wp_head', 'dns_prefetch_mobile', 0 );

(similar for desktop version).

Please help, tried everything, getting crazy here :/

@mrftun I’m happy my comment helped solved the pagespeed warning, but I regret it did not help increase the dowload speed. I’m not sure what you mean by “download speed” – do you mean your pagespeed score?
Just like @notbatman09, who started this thread, I use the Asset Cleanup plugin on several sites to help increase page speed score and decrease page downloading times. It’s useful for on-page offloads, for those plugins you use only on certain pages, but would still load on all pages. The 2 preload options (google and local fonts) work well and it came in extra handy in a specific case, when manually preloading google fonts in the header failed to produce results.
You could try using this plugin to increase your google pagespeed score. Do so with caution, up-to-date backups and using the “test mode”, so you can see the effects of your changes before publishing them on your site.

Hey, @piotrk87, I don’t know if you still have this issue but you could try a relative path and/or specifying the crossorigin attribute. For example:
<link rel="preload" as="font" href="/wp-content/themes/Newspaper/images/icons/newspaper.woff?19" type="font/woff2" crossorigin="anonymous">

I just added this to .htaccess. No need for any plugin or coding afaik

Header add Link "</wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2>; rel=preload; as=font; crossorigin"
Header add Link "</wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.woff2>; rel=preload; as=font; crossorigin"