Menu
We are currently implementing web-workers in our company's website (based on ReactJS-Redux) to execute an initial synchronization of the user's data (such as: a list of favorites, a list of discarded...) by calling an API endpoint.
The implementation was successful, but Lighthouse's Audit is showing a performance issue because we aren't preloading this asset. Even though we aren't really concerned about that, it is quite "annoying" and we would like to get rid of it.
We have tried to 'preload' it without success, even following W3C specs. The 'as' attribute with value 'worker' seems to be the correct answer, but Google Chrome doesn't detect it as a valid value. The following are some variations that we tried:
<link rel="preload" href="userSync.worker.js" as="script" type="text/javascript">
<link rel="preload" href="userSync.worker.js" as="fetch" type="text/javascript">
<link rel="preload" href="userSync.worker.js" as="worker" type="text/javascript">
We have also tried the different variations of the 'crossorigin' attribute without success.
Has anybody an idea of what could be wrong?
Thanks!
530
By preloading a certain resource, you are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page. In this example, Pacifico font is preloaded, so the download happens in parallel with the stylesheet.
The rel="preload" attribute value is used to preload assets. It can be applied to several file formats, including CSS, JS, fonts, images, and more. Depending on the type of file you would like to preload, the corresponding as attribute may also need to be included along with rel="preload" .
Comlink-fetch allows you to use Fetch in a web worker that is exposed through Comlink.
Try adding the attribute: crossorigin="anonymous"
As per the lighthouse tool (Chrome Dev Tools -> Audit):
A preload was found for "https://yourworker.js" but was not used by the browser. Check that you are using the crossorigin attribute properly.
Edit: still not working, I'm stuck too. I did notice that the 'type' in Chrome network for the preload shows as 'script', but the 'type' when its loaded is 'x-javascript'. However, if you specify 'x-javascript' as the as="" in the preload, it still doesn't work
126
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
