Link="preload" added but not detected by Pagespeed

Viewed 806

Pagespeed Insights recommends preloading certain font files to speed up page load. I have added the code within my element, but Pagespeed still does not detect it. I tried all the fixes mentioned on other answers:

  • Using crossorigin attribute(with anonymous)
  • Using the insert headers/footers plugin
  • Loading other font types like .woff, .eot

Here is the link to the page. This page is only an example. The same problem exists on all other posts too where Pagespeed mentions:

Consider using `<link rel=preload>` to prioritize fetching resources that are currently requested later in page load. Learn more.
URL
Potential Savings
…fonts/johannes-font.ttf(productiveclub.com)
2,670 ms

The multiple preloads right now is only for testing. The same error persists when I retain only one preload statement.

Can anyone understand what's wrong in my code here? Thanks in advance.

1 Answers

When you actually load the font it has a ? at the end of it.

This will in some circumstances then clear the cache and load a fresh version of the file, undoing any preloading you have done / treat it as a different file.

url(/wp-content/themes/johannes/assets/fonts/johannes-font.ttf?) format('truetype') located in one of the minified CSS files.

You are also preloading it more than once (line 7 and line 199 in the HTML) so you will get a console error, not directly related but important to fix either way.

The resource https://productiveclub.com/wp-content/themes/johannes/assets/fonts/johannes-font.ttf was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

for clarity - as far as a browser is concerned fonts/johannes-font.ttf does not equal fonts/johannes-font.ttf? so you aren't actually preloading the file as far as the browser is concerned. Remove the ? from your URL and it should work as expected.

Related