Description
This plugin offloads JavaScript execution to a Web Worker, improving performance by freeing up the main thread. This should translate into improved Interaction to Next Paint (INP) scores.
⚠ This functionality is experimental. ⚠
In order to opt in a script to be loaded in a worker, simply add worker
script data to a registered script. For example,
if you have a script registered with the handle of foo
, opt-in to offload it to a web worker by doing:
wp_script_add_data( 'foo', 'worker', true );
Unlike with the script loading strategies (async/defer), any inline before/after scripts associated with the worker-offloaded registered script will also be offloaded to the worker, whereas with the script strategies an inline after script would block the script from being delayed.
Otherwise, the plugin currently ships with built-in integrations to offload Google Analytics to a web worker for the following plugin:
Support for Site Kit by Google and Rank Math SEO are planned.
Please monitor your analytics once activating to ensure all the expected events are being logged. At the same time, monitor your INP scores to check for improvement.
This plugin relies on the Partytown 🎉 library by Builder.io, released under the MIT license. This library is in beta and there are quite a few open bugs.
The Partytown configuration can be modified via the plwwo_configuration
filter. For example:
<?php
add_filter( 'plwwo_configuration', function ( $config ) {
$config['mainWindowAccessors'][] = 'wp'; // Make the wp global available in the worker (e.g. wp.i18n and wp.hooks).
return $config;
} );
However, not all of the configuration options can be serialized to JSON in this way, for example the resolveUrl
configuration is a function. To specify this, you can add an inline script as follows.
<?php
add_action(
'wp_enqueue_scripts',
function () {
wp_add_inline_script(
'web-worker-offloading',
<<<JS
window.partytown = {
...(window.partytown || {}),
resolveUrl: (url, location, type) => {
if (type === 'script') {
const proxyUrl = new URL('https://my-reverse-proxy.example.com/');
proxyUrl.searchParams.append('url', url.href);
return proxyUrl;
}
return url;
},
};
JS,
'before'
);
}
);
There are also many configuration options which are not documented, so refer to the TypeScript definitions.
FAQ
-
Why are my offloaded scripts not working and I see a 404 error in the console for `partytown-sandbox-sw.html`?
-
If you find that your offloaded scripts aren’t working while also seeing a 404 error in the console for a file at
/wp-content/plugins/web-worker-offloading/build/partytown-sandbox-sw.html?1727389399791
then it’s likely you have Chrome DevTools open with the «Bypass for Network» toggle enabled in the Application panel. -
Where can I report security bugs?
-
The Performance team and WordPress community take security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
To report a security issue, please visit the WordPress HackerOne program.
-
How can I contribute to the plugin?
-
Contributions are always welcome! Learn more about how to get involved in the Core Performance Team Handbook.
The plugin source code is located in the WordPress/performance repo on GitHub.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Web Worker Offloading” is open source software. The following people have contributed to this plugin.
Contributors“Web Worker Offloading” has been translated into 2 locales. Thank you to the translators for their contributions.
Translate “Web Worker Offloading” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
0.1.1
Enhancements
- Add Web Worker Offloading meta generator. (1598)
0.1.0
- Initial release.