[WordPress] 外掛分享： Web Worker Offloading

WordPress 外掛 Web Worker Offloading 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Web Worker Offloading」是 2024-10-02 上架。
  • 目前有 10000 個安裝啟用數。
  • 上一次更新是 2025-04-09，距離現在已有 24 天。
  • 外掛最低要求 WordPress 6.6 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.2 以上。
  • 有 1 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

wordpressdotorg |

外掛標籤

analytics | partytown | javascript | web worker | performance |

內容簡介

**總結：**
這個外掛將 JavaScript 執行工作委派給 Web Worker，在釋放主執行緒的同時提高了效能。這將導致互動至下一次繪製（INP）分數的提升。值得注意的是，這項功能目前仍在實驗階段。

**問題與答案：**
1. 如何透過這個外掛將腳本（script）加載到 Web Worker 中？
- 答案：只需將工作腳本數據添加到已註冊腳本中。例如，如果有一個以 'foo' 為標識的腳本，可以通過以下方式選擇將其委派給 Web Worker：`wp_script_add_data( 'foo', 'worker', true )`。

2. 這個外掛與哪些插件內建集成，可以將 Google Analytics 委派給 Web Worker？
- 答案：目前，這個外掛與 WooCommerce 內建集成，可將 Google Analytics 委派給 Web Worker。同時，計劃將支持 Site Kit by Google 和 Rank Math SEO。

3. 如何修改 Partytown 配置？
- 答案：可以透過使用 plwwo_configuration filter 來修改 Partytown 配置。例如，在 function 內加入 `$config['mainWindowAccessors'][] = 'wp';` 可以使 wp 全域在 Worker 中可用（例如 wp.i18n 和 wp.hooks）。

原文外掛簡介

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:

Rank Math SEO
Site Kit by Google
WooCommerce

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:
{
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.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Web Worker Offloading」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

0.1.0 | 0.1.1 | 0.2.0 | trunk |

延伸相關外掛（你可能也想知道）

  • Shortcoder — Create Shortcodes for Anything 》Shortcoder 外掛可讓您建立 HTML、JavaScript、CSS 和其他代碼片段的自訂捷徑。現在，這些捷徑可以在文章/頁面中使用，並且該片段將取代其位置。, ✍ 輕鬆建立...。
  • Enable jQuery Migrate Helper 》隨著 WordPress 5.5 的更新，一個名為 jquery-migrate 的遷移工具不再默認啟用。這可能會導致一些主題或外掛在運行舊代碼時缺少功能或出現意外行為。, 此外掛...。
  • Async JavaScript 》使用 Async Javascript 解決 above-the-fold 內容的 Render-blocking Javascript 問題。, Render-blocking Javascript 會導致 above-the-fold 內容在 Javascr...。
  • Speculative Loading 》- 這個 WordPress 外掛支援 Speculation Rules API，該 API 可以根據使用者互動，定義規則來動態預取或預渲染特定的 URL。, - 請參閱 Speculation Rules WICG...。
  • Scripts n Styles 》這個外掛讓管理員用戶能夠將自訂的 CSS 和 JavaScript 直接添加到個別文章、頁面或任何註冊的自訂文章類型中，也可以將類別添加到 body 標籤和文章容器中。還...。
  • jQuery Updater 》此外掛更新jQuery至最新的官方穩定版本，該版本通常不會在WordPress最新的穩定版本中提供。, jQuery Migrate也包含在內，以實現向下相容性。, 不會替換任何檔...。
  • Theme Authenticity Checker (TAC) 》掃描所有主題文件，尋找潛在的惡意或不需要的程式碼。, TAC 是什麼, TAC 代表主題真實性檢查器。TAC 搜尋每個安裝主題的原始檔案，尋找惡意程式碼的跡象。如...。
  • Code Embed 》注意： WordPress 5.0 及以上版本的使用者請查看常見問題以了解如何在區塊編輯器中使用此外掛。, Code Embed 外掛允許您在文章中嵌入程式碼（JavaScript 和 H...。
  • Read More Without Refresh 》你想顯示更多內容，但不影響使用者體驗嗎？, 我的外掛可以幫你解決這個問題！, 這個外掛透過短碼，可以隱藏預先定義好的文字，而根據你的選擇，只顯示剩下的...。
  • Raw HTML 》is capability is only granted to administrators. If you’re not an admin, you will need to ask them to add it to your role., Raw HTML is not r...。
  • SOGO Add Script to Individual Pages Header Footer 》已經在 Gutenberg 上進行測試, 創建一個簡單的方式，為個別頁面、文章或自訂文章類型的標題和頁腳添加 JavaScript 代碼，, 例如: 在感謝頁面上添加轉換代碼, ...。
  • BJ Lazy Load 》延遲載入可使您的網站加載速度更快，並節省頻寬。, 此外掛可取代您所有的文章圖片、文章縮略圖、大頭貼圖片和內容的 iframe，並使用佔位圖片，當訪客滾動頁面...。
  • WP Super Minify • Minify, Compress and Cache HTML, CSS & JavaScript 》這個外掛可以在需要時結合、縮小和緩存內聯的 JavaScript 和 CSS 文件，以加快頁面加載速度，並使用Minify PHP Framework。, 啟用此外掛後，您會發現您的 HTM...。
  • Use Google Libraries 》e's content distribution network (CDN) URLs for the supported libraries., This hook is used to replace the default WordPress registered script sour...。
  • Custom CSS and JavaScript 》這款外掛可以讓您在 WordPress 網站中添加自訂全站 CSS 樣式和 JavaScript 代碼，有助於覆蓋佈景主題樣式和添加客戶端功能。功能包括：, , 代碼編輯器，帶有...。

文章
Filter
Apply Filters
Close
Mastodon