Menu
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.
789
If preloading is supported, the request for the image should be made before the JavaScript gets executed, i.e. you should see the request for the image immediately after the one for the HTML document is done.
The preload is competing with the render-blocking file for bandwidth. As a result, the download takes longer and the page renders more slowly. The page renders 0.9s faster without the preload. The downside of this change is that the JavaScript file will now finish loading later.
Preloading CSS files # Waiting for JavaScript to execute before loading non-critical CSS can cause delays in rendering when users scroll, so it's a good idea to use <link rel="preload"> to initiate the download sooner.
One of the most common issues that are faced is the Preload key request problem. This problem delays the render of the page, and makes a visitor wait. We will discuss how to fix this problem in order to reduce the valuable time a visitor has to wait. What is Preload?
If you use Autoptimize, open the Extra tab of the Autoptimize panel and go to the preload specific requests tab and add the above URLs there: 1. Do I have to clear my cache after modifying the header.php file in WordPress?
Preload is a way of telling the browser to request a resource before the browser feels the needs of it.
Page speed is one of the top ranking signals considered by Google’s algorithm to rank pages in the SERPs. They use data from their own testing tool PageSpeed Insights to check how a given website performs in terms of speed.
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
asvalue 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.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
