Reputation: 1587
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
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