Maxim Dsouza
Maxim Dsouza

Reputation: 1587

Link="preload" added but not detected by Pagespeed

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:

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.

Upvotes: 6

Views: 985

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24905

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.

Upvotes: 5

Related Questions