[WordPress] 外掛分享: Web Worker Offloading

首頁外掛目錄 › Web Worker Offloading
WordPress 外掛 Web Worker Offloading 的封面圖片
10,000+
安裝啟用
★★★☆☆
3.5/5 分(2 則評價)
20 天前
最後更新
問題解決
WordPress 6.9+ PHP 7.4+ v0.3.0 上架:2024-10-02

內容簡介

Web Worker Offloading 外掛將 JavaScript 執行轉移至 Web Worker,提升性能並釋放主執行緒,進而改善互動至下一個繪製(INP)分數。此功能目前為實驗性質,並將逐步淘汰。

【主要功能】
• 將 JavaScript 執行轉移至 Web Worker
• 改善互動至下一個繪製(INP)分數
• 支援 Google Analytics 的外掛整合
• 提供 Partytown 🎉 庫的配置選項

外掛標籤

開發者團隊

⬇ 下載最新版 (v0.3.0) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Web Worker Offloading」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

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, and it is now intended to be sunset. ⚠
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.

延伸相關外掛

文章
Filter
Mastodon