Enabling Atomics - BuilderIO/partytown Wiki

Partytown will use Atomics when they're enabled by the browser. Some of the advantages include:

It's important to note that not all browsers support Atomics, and the server hosting the site must be configured with the correct response headers. If neither of those are true, then Partytown will fallback to using the service-worker communication layer instead.

Document Response Headers

To enable Atomics communication, the browser's crossOriginIsolated readonly property should be true. The crossOriginIsolated property is only set to true, by the browser, when the document includes these http response headers:

Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Opener-Policy: same-origin

Setting Cross-Origin Attribute

An alternative to setting Cross-Origin-Embedder-Policy: credentialless, is to instead use Cross-Origin-Embedder-Policy: require-corp. The biggest thing to highlight is that the require-corp does not allow images, scripts, videos, etc. to be loaded from another origin. For example, when this header is set, any scripts or images to a CDN will no longer work.

However, the crossorigin attribute can be used on individual elements, such as <audio>, <img>, <link>, <script>, and <video>, which allows these requests to go through and not be blocked.

Below is an example of setting the crossorigin attribute on an image:

<img src="https://c.tenor.com/8wBCqZH60U8AAAAC/computer-cat.gif" crossorigin />

Additional Resources