Jetpack Boost

外掛說明

Jetpack Boost 提供一鍵最佳化、提升 WordPress 網站效能、改進網站使用體驗分數並獲得較佳 SEO 的功能。

效能模組

這個外掛使用世界上最成功網站的相同技術,讓網站管理員能為自己的網站進行最佳化。每一項技術都製作為單一模組,網站管理員可以逐項啟用並進行測試。

目前這個外掛提供 3 個效能模組:

  1. CSS 載入最佳化會為網站首頁、文章及頁面產生關鍵 CSS。這能讓網站文章在裝置螢幕上顯示更加快速,尤其對使行動裝置的使用者來說,效果更加顯著。

    進一步了解 web.dev 上對產生關鍵 CSS 的說明

  2. 延遲載入非必要 Javascript 會將某些工作移至頁面載入後才完成,這能讓使用者更快看到重要的視覺化資訊。

    進一步了解 web.dev 上對延遲載入 JavaScript 的說明

  3. 圖片延遲載入僅會載入使用者當下可檢視的圖片。當使用者捲動畫面,圖片會在頁面顯示前變加以載入。這個簡易的最佳化方式能讓網站更加快速,並能為主機及網站使用者節省頻寬。

    進一步了解 web.dev 上對圖片延遲載入的說明

設定簡單

這個外掛沒有需要組態的項目,設定流程正如下列簡單步驟:

  1. 安裝外掛。
  2. 啟用 Jetpack 連線。
  3. 逐一開啟各個效能模組,並觀察他們對效能分數的影響。

    Google PageSpeed API 是用於測量網站效能分數的測量方式。由於搜尋引擎即將採用「網站使用體驗核心指標」作為排名因素,因此查看 PageSpeed 分數非常重要。

Jetpack 團隊全心 💚 開發

這僅僅是個開始!

開發團隊目前致力於將更多功能及改進加入 Jetpack Boost 中,請讓我們了解你的想法及意見。

我們也特別感謝 XWP 團隊,他們協助了外掛初期開發研究及外掛的範圍界定,並持續在專案中與我們保持合作。

螢幕擷圖

  • 管理 Jetpack Boost 設定

安裝方式

  1. 透過外掛目錄安裝 Jetpack Boost,安裝完畢後請啟用外掛。
  2. 前往 WordPress 管理後台的 [Jetpack Boost] 區段。
  3. 開啟想在網站上試用的增進效能的功能。

常見問題集

Jetpack Boost 外掛加速網站的方式為何?

Jetpack Boost makes small changes to the way that data is sent from your WordPress site to your users’ browser, to enable the browser to display your site faster.

Jetpack Boost includes a few separate features which can be turned on individually to improve your site’s performance. These include:

  • Optimize CSS Loading: This feature determines the most important CSS that your site needs to display your site’s initial content as quickly as possible, and embeds it directly into your site header.
  • Defer Non-Essential JavaScript: This feature forces all of the JavaScript which is not deemed essential to displaying your site to load after your site’s main content has been loaded.
  • Lazy Image Loading: This feature delays loading images on your site until they are scrolled into view, allowing the browser to load the first content that the user will see first.

使用 Jetpack Boost 可以改進哪些網站項目的速度?

Website Performance is complicated and can be affected by a number of factors. As a result, it is difficult to accurately predict how much impact it will have on each site.

Generally, the lower your speed score is to begin with, the more Jetpack Boost may impact your performance. We have seen user reports of up to 25 Speed Score points improvement simply by installing and using Jetpack Boost.

However, as performance can be impacted by so many factors, it is also possible for Jetpack Boost to have a small negative performance impact in some rare cases.

We recommend that you install Jetpack Boost, and try it for yourself. It includes a tool for measuring your Speed Score, to check what impact it has on your site.

Jetpack Boost 是否也能延遲載入非必要 CSS?

Jetpack Boost automatically defers non-essential CSS if its “Optimize CSS Loading” feature is enabled.

The “Optimize CSS Loading” feature identifies the most important CSS rules your site needs to display your pages as quickly as possible (commonly called “Critical CSS”), and defers all other CSS rules from loading until your main content has loaded.

什麼是「網站使用體驗」?

「網站使用體驗」是 Google 讓使用者更容易了解網站使用者體驗的測量方式。要改善「網站使用體驗」,網站管理員也要改善網站的使用者體驗。

如需進一步了解「網站使用體驗」,請造訪 web.dev

Jetpack Boost 如何改善「網站使用體驗」?

Each Core Web Vital relates to an aspect of how quickly your site can load and appear on new visitors’ screens.

Jetpack Boost makes small changes to the way that data is sent from your WordPress site to your users’ browsers, to enable your content to load faster. As a result, it can improve your Core Web Vitals scores.

For example, our “Optimize CSS Loading” feature ensures the most important CSS rules are sent to users’ browsers as early as possible, improving both First Contentful Paint (FCP) and Cumulative Layout Shift (CLS) scores.

使用這個外掛需要搭配 Jetpack 使用嗎?

Jetpack Boost 是 Jetpack 品牌旗下的一項服務,但它不需要 Jetpack 外掛便可獨立執行。這是一個 Jetpack 品牌的獨立外掛,並且會以這種方式持續提供服務。

這個外掛是否能改進任何網站的效能?

This plugin includes a range of performance improvements, which can help almost any WordPress site perform better.

However, if your site is already extremely well optimized, Jetpack Boost may not have much room to improve it.

Jetpack Boost includes a tool for measuring your site’s Speed Score – we encourage users to try it out and see what impact it can have for them.

如何得知外掛是否發揮效果?

每個網站都有其不同之處,因此每一個效能模組對不同的網站能產生的效能改善也會因站而異,這也是我們建議逐一啟用效能模組並逐項測量效能改善的原因。現在已有多項免費工具可用於測量效能改善:

Jetpack Boost 控制台已內建 Google PageSpeed 測量方式。

Jetpack Boost 的速度最佳化功能是否安全?

Yes, it’s safe to try Jetpack Boost on any WordPress site.

Jetpack Boost does not alter your site’s content, it only modifies the way the content is sent to the user’s browser to allow it to display faster.

As a result, all of Jetpack Boost’s features can safely be turned off in the event of an incompatibility with your other plugins.

Jetpack Boost 與其他速度最佳化外掛比較起來如何?

Speed Optimization plugins for WordPress can be complicated and opaque for users. They often offer columns of checkboxes with little explanation, and don’t include tools to measure the impact of each change or choice users make.

Jetpack Boost aims to be as easy to use as possible, and includes a Speed Score indicator to help users immediately measure the impact of their choices.

這個外掛是否能與靜態頁面快取搭配使用?

當然可以!如果網站已安裝如 WP Super Cache 或 W3 Total Cache 等外掛,Jetpack Boost 僅會協助增加網站效能。請注意,必須在清除快取後,才會看到 Jetpack Boost 的效能改善。

如果網站資料庫龐大,Jetpack Boost 能讓網站較快載入嗎?

Jetpack Boost does not include any optimizations that target large databases at this time. However, watch this space – we are always looking for new ways to help our users perform better.

Jetpack Boost 是否能處理圖片最佳化?

Jetpack Boost can help sites with large images perform better through lazy-loading, preventing images from loading until they are scrolled into view.

However, it currently does not have any Image Format Optimization features. We are always looking for ways to improve the plugin, so watch this space for more features in the near future.

Jetpack Boost 是否相容於其他快取及速度最佳化外掛?

With few exceptions, Jetpack Boost has no problems running alongside most caching and speed optimization plugins. As a guideline, we don’t recommend enabling the same feature in multiple optimization plugins.

For example, if two plugins attempt to defer your non-essential JavaScripts, then they may end up conflicting with each other and cause display problems on your site.

If you run into compatibility issues, please do let us know. You can drop us a line on the Jetpack Boost Support Forums at any time.

使用者評論

2021 年 10 月 26 日
Really love the Jetpack series, Boost isn't different at that point for me. Jetpack Boost is as good as it looks! Fast & Reliable
2021 年 10 月 25 日
This plugin is very helpful, especially it works well with critical CSS. Of course we already know the role and function of this plugin. I find it quite extraordinary.
2021 年 10 月 6 日
I'm hesitant to use other complex optimization tools, but this one was so simple to use and I noticed an immediate difference. No obvious issues or conflicts with other plugins. So far so good!
2021 年 10 月 6 日
I am not sure how good role it plays in speeding a website. I added because, a YouTuber mentioned it to add with a couple of other plugins, but I noticed that, it stops the other plugin (especially the plugin used for optimization) from loading / caching CSS files. Fonts are not displaying properly, some CSS rules are not being added to the cached files, I mean, this is not how a plugin should behave. I feel bad giving it three stars, but if they fix this issue, then I may come back and give it five stars.
閱讀全部 20 則使用者評論

參與者及開發者

Jetpack Boost 外掛目前已有 12 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將 Jetpack Boost 外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.3.0 – 2021-10-25

Security

  • Critical CSS: Add permissions checks to AJAX endpoints used when dismissing Critical CSS Recommendations.

Added

  • Critical CSS: Added explanation for mod-security HTTP 418 errors.
  • Critical CSS: Added stats tracking for generation outcomes.
  • Critical CSS: Added step-by-step instructions for Advanced Recommendations.
  • Critical CSS: Add extra information to “fetch” errors when generating Critical CSS.
  • Critical CSS: More descriptive error message if critical css is failing because of x-frame-options deny config.
  • Speed Scores: Added “without Boost” speed score indicator.
  • Speed Scores: Retry if a score request job is stuck for more than 15 minutes

Changed

  • Critical CSS: Take port numbers into account when comparing origins for proxying.
  • Refresh speed score if theme has changed since last score
  • Update Critical CSS Generator library to latest

Fixed

  • Critical CSS: Clear generated CSS on theme change.
  • Critical CSS: Ensure generator process is resumed after module deactivated and reactivated without reload.
  • Critical CSS: Move CSS file proxying to client-side, to catch WAF-based CDN URLs
  • Make sure that the Critical CSS Nonce for dismissing recommendations is always available in the settings page
  • Speed Scores: Clear speed score on plugin deactivation and uninstallation.

See the previous changelogs here