{"id":409294,"date":"2024-10-03T08:00:00","date_gmt":"2024-10-03T08:00:00","guid":{"rendered":"https:\/\/www.weixiaoduo.com\/plugins\/web-worker-offloading\/"},"modified":"2025-04-09T23:05:00","modified_gmt":"2025-04-09T23:05:00","slug":"web-worker-offloading","status":"publish","type":"post","link":"https:\/\/www.weixiaoduo.com\/plugins\/web-worker-offloading\/","title":{"rendered":"Web Worker Offloading"},"content":{"rendered":"<p>This plugin offloads JavaScript execution to a Web Worker, improving performance by freeing up the main thread. This should translate into improved <a href=\"https:\/\/web.dev\/articles\/inp\" rel=\"nofollow ugc\">Interaction to Next Paint<\/a> (INP) scores.<\/p>\n<p>\u26a0 <em>This functionality is experimental.<\/em> \u26a0<\/p>\n<p>In order to opt in a script to be loaded in a worker, simply add <code>worker<\/code> script data to a registered script. For example,<br \/>\nif you have a script registered with the handle of <code>foo<\/code>, opt-in to offload it to a web worker by doing:<\/p>\n<pre><code>wp_script_add_data( 'foo', 'worker', true );\n<\/code><\/pre>\n<p>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.<\/p>\n<p>Otherwise, the plugin currently ships with built-in integrations to offload Google Analytics to a web worker for the following plugin:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/seo-by-rank-math\/\" rel=\"ugc\">Rank Math SEO<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/google-site-kit\/\" rel=\"ugc\">Site Kit by Google<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" rel=\"ugc\">WooCommerce<\/a><\/li>\n<\/ul>\n<p>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.<\/p>\n<p>This plugin relies on the <a href=\"https:\/\/partytown.builder.io\/\" rel=\"nofollow ugc\">Partytown \ud83c\udf89<\/a> library by Builder.io, released under the MIT license. This library is in beta and there are quite a few <a href=\"https:\/\/github.com\/BuilderIO\/partytown\/issues?q=is%3Aopen+is%3Aissue+label%3Abug\" rel=\"nofollow ugc\">open bugs<\/a>.<\/p>\n<p>The <a href=\"https:\/\/partytown.builder.io\/configuration\" rel=\"nofollow ugc\">Partytown configuration<\/a> can be modified via the <code>plwwo_configuration<\/code> filter. For example:<\/p>\n<pre><code><?php\nadd_filter( 'plwwo_configuration', function ( $config ) {\n    $config['mainWindowAccessors'][] = 'wp'; \/\/ Make the wp global available in the worker (e.g. wp.i18n and wp.hooks).\n    return $config;\n} );\n<\/code><\/pre>\n<p>However, not all of the configuration options can be serialized to JSON in this way, for example the <code>resolveUrl<\/code> configuration is a function. To specify this, you can add an inline script as follows.<\/p>\n<pre><code><?php\nadd_action(\n    'wp_enqueue_scripts',\n    function () {\n        wp_add_inline_script(\n            'web-worker-offloading',\n            <<<JS\n            window.partytown = {\n                ...(window.partytown || {}),\n                resolveUrl: (url, location, type) => {\n                    if (type === 'script') {\n                        const proxyUrl = new URL('https:\/\/my-reverse-proxy.example.com\/');\n                        proxyUrl.searchParams.append('url', url.href);\n                        return proxyUrl;\n                    }\n                    return url;\n                },\n            };\n            JS,\n            'before'\n        );\n    }\n);\n<\/code><\/pre>\n<p>There are also many configuration options which are not documented, so refer to the <a href=\"https:\/\/github.com\/BuilderIO\/partytown\/blob\/b292a14047a0c12ca05ba97df1833935d42fdb66\/src\/lib\/types.ts#L393-L548\" rel=\"nofollow ugc\">TypeScript definitions<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Offloads select JavaScript execution to a Web Worker to reduce work on the main thread and improve the Interaction to Next Paint (INP) metric.<\/p>\n","protected":false},"author":65,"featured_media":409295,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Web Worker Offloading - \u8587\u6653\u6735\u63d2\u4ef6\u76ee\u5f55","description":"Offloads select JavaScript execution to a Web Worker to reduce work on the main thread and improve the Interaction to Next Paint (INP) metric."},"footnotes":""},"categories":[1],"tags":[457,826,57493,64,57494],"class_list":["post-409294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-analytics","tag-javascript","tag-partytown","tag-performance","tag-web-worker"],"_links":{"self":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/409294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/comments?post=409294"}],"version-history":[{"count":0,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/posts\/409294\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media\/409295"}],"wp:attachment":[{"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/media?parent=409294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/categories?post=409294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weixiaoduo.com\/plugins\/wp-json\/wp\/v2\/tags?post=409294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}