Jetpack Boost – Website Speed, Performance and Critical CSS

外掛說明

使用 Jetpack Boost 最佳化頁面效能並加速網站。

Did you know that a faster website:

  • Ranks higher on Google.
  • Improves bounce rate (people stay on your site for longer).
  • Increases your conversion rate.

Increase your website performance and speed up your website with one-click optimizations that supercharge your WordPress site’s performance and improve core web vitals scores for better search engine listings.

Improving Core Web Vitals helps you rank higher on Google. A faster website also improves your SEO, helps you reduce your bounce rate and increase your ecommerce conversion rate.

  • Largest Contentful Paint (LCP): Measures loading performance. Improve your LCP and improve your website loading speed.
  • First Input Delay (FID): Measures interactivity. To improve user experience pages should have a low FID.
  • Cumilative Layout Shift (CLS): Measures visual stability. Lowering your CLS helps improve your user experience.

效能模組

Optimise your website with the same techniques used on the world’s most successful websites.

Each technique that is used to increase website performance is packaged up as a module that you can activate and try out.

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

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

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

  2. Defer Non-Essential Javascript moves some tasks to after the page loads, so that important visual information can be seen sooner and your website loads quicker.

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

  3. Lazy Image Loading only loads the images the user can see. As the user scrolls, images are loaded just before they show up on the page. Lazy loadThis simple optimization makes websites faster and saves bandwidth for your host and your customers.

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

    Google PageSpeed API is used to measure the performance score of a site. It’s important to look at the Page Speed score because Core Web Vitals are going to be used as a ranking factor in search engines which means improving your SERP listing and increase your website visitors.

Jetpack 團隊全心 💚 開發

這僅僅是個開始!

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

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

螢幕擷圖

  • Jetpack Boost Critical CSS Generation
  • Jetpack Boost Speed Improvement

安裝方式

  1. 透過外掛目錄安裝 Jetpack Boost,安裝完畢後請啟用外掛。
  2. 啟用 Jetpack 連線。
  3. 逐一開啟各個效能模組,並觀察他們對效能分數的影響。

常見問題集

What does the Jetpack Boost plugin do to help speed up my WordPress site?

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.

使用者評論

2022 年 5 月 19 日
Yes, a 14% speed boost is very pleasant, thanks to this amazing team of Jetpack for the free tools !! . I also recommend engaging in the rest of the paid options.
閱讀全部 137 則使用者評論

參與者及開發者

Jetpack Boost – Website Speed, Performance and Critical CSS 外掛目前已有 13 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈Jetpack Boost – Website Speed, Performance and Critical CSS〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

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

變更記錄

1.4.2 – 2022-04-11

Fixed

  • Fixed critical CSS generation failure while using a CDN to serve CSS

See the previous changelogs here