We are currently implementing web-workers in our pany'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!

We are currently implementing web-workers in our pany'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!

• javascript
• html
• reactjs
• redux
• preload

4 Answers 4

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

According to this post on Module Workers:

Classic workers had their own "worker" resource type for preloading, but no browsers implemented <link rel="preload" as="worker">. As a result, the primary technique available for preloading web workers was to use <link rel="prefetch">.

Chrome has now support for modulepreload. But for patibility reasons, prefetch is still a valid (but not perfect) solution.

Use prefetch instead of preload: <link rel="prefetch" href="userSync.worker.js" as="worker" />

In this case, the worker will be in the disk cache when called.

How about worker type is module

const worker = new Worker('worker.js', { type: 'module' });