Jetpack Boost:網站速度、效能與關鍵 CSS

外掛說明

使用 Jetpack Boost 達到最佳網頁效能,加速 WordPress 網站運作速度。 輕鬆啟用一鍵最佳化功能,提升使用體驗核心指標的表現。

你知道嗎?網站速度變快即代表:

  • 提高 Google 搜尋排名。
  • 改善跳出率 (讓訪客在你的網站上待更久)。
  • 提高轉換率。

透過一鍵最佳化功能提高網站效能、加速網站運作,如此可增強 WordPress 網站效能,並改善使用體驗核心指標分數、提升搜尋引擎排名。

改善使用體驗核心指標表現,幫助你提高 Google 搜尋排名。 加快網站速度也能改善 SEO 效果,進而協助降低跳出率並提升電子商務轉換率。

  • 最大內容繪製 (LCP):用於測量載入效能。 建議改善 LCP 表現並提高網站載入速度。
  • 第一項輸入延遲 (FID):用於測量互動情況。 若要改善使用者體驗,必須降低頁面 FID。
  • 累計版面配置移位 (CLS):用於測量視覺穩定度。 降低 CLS 分數,可改善使用者體驗。

效能模組

比照全球最成功的各個網站所用的技巧,讓網站達到最佳化。

每種可供提升網站效能的技巧,都已整合在模組之中,方便你啟用並親身體驗。

目前此外掛程式提供 6 種效能模組:

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

    請造訪 web.dev,閱讀更多關於產生關鍵 CSS 的資訊

  2. 延遲非必要的 Javascript,即可將部分工作延遲到頁面載入後再進行,如此能更快看見重要的視覺資訊,並讓網站更快載入。

    請造訪 web.dev,閱讀更多關於延遲 Javascript 的資訊

  3. 圖片指南對於想要將網站圖片最佳化的使用者來說,是不可或缺的功能。 你可以配合此指南,確認網站上的圖片的大小和尺寸正確。如果要改善使用者體驗、提高網頁速度和網站排名,這點非常重要。 請按指南中列出的提示和最佳做法,減少圖片檔案大小並加速網站運作。 請查看我們的支援頁面,瞭解更多此功能的相關資訊,以及此功能如何協助你提供更快速且更流暢的網站使用者體驗。

  4. 圖片 CDN 可讓你的網站直接以 Jetpack 遍布全球的內容傳遞網路提供圖片,且會採用現代網路格式並自動調整圖片大小。

    請造訪 web.dev,閱讀更多關於圖片 CDN 的資訊

  5. 串連並縮小 CSS 和 JS 會將 JavaScript 和 CSS 資源合併及縮小,以減少對伺服器的要求數量與大小,進而加快載入內容。

    請造訪 web.dev,進一步閱讀關於縮小檔案的資訊

不想每次更新網站時,都得手動產生關鍵 CSS? 自動化關鍵 CSS 的所有麻煩事,全部交給我們就好:每當你更新網站時,我們都會自動重新產生你的關鍵 CSS 並更新你的效能評分。 升級後,你也會獲得專屬的電子郵件支援權限。

Jetpack 團隊全心 💚 開發

這僅僅是個開始!

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

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

螢幕擷圖

  • Jetpack Boost 產生關鍵 CSS
  • Jetpack Boost 速度提升

安裝方式

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

常見問題集

Jetpack Boost 如何協助加速我的 WordPress 網站?

Jetpack Boost 可微調自 WordPress 網站傳送資料至使用者瀏覽器的方式,讓瀏覽器能夠加速顯示你的網站。

Jetpack Boost 包含一些獨立的功能,你可以個別開啟以提升網站的效能,這類功能的數量會持續增加。 功能如下:

  • 最佳化 CSS 載入:此功能可判斷最重要的所需 CSS,讓你的網站盡快顯示網站的初始內容,並將內容直接嵌入網站頁首。
  • 延遲非必要的 JavaScript:此功能可強制在網站的主要內容載入後,再載入對顯示網站而言非必要的 JavaScript。
  • 影像 CDN:此功能會自動將圖片大小調整為更適合訪客畫面的大小,將圖片轉換為現代圖片格式,並以 JavaScript 遍布全球的伺服器網路提供圖片。
  • 串聯 JS:此功能可減少 JavaScript 資源大小,並自動將資源合併為較少檔案,以便加快網站載入並減少要求數量。
  • 串連 CSS:此功能可配合串連 JavaScript,縮減 CSS 檔案大小,並減少這些檔案載入時的要求數量。

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

網站效能十分複雜,並且會受到許多因素的影響。 因此,要準確預測此外掛程式對網站帶來的影響並不容易。

一般而言,如果起始速度分數越低,則 Jetpack Boost 對效能帶來的影響就會越大。 我們收到使用者回報,只要安裝並使用 Jetpack Boost,即可提升多達 25 點的速度分數。

不過,由於網站效能受到許多因素影響,在極少數情況下,Jetpack Boost 也有可能會對效能產生些微的負面影響。

建議安裝 Jetpack Boost 並親自試用看看。 此外掛程式包含可用於評估速度分數的工具,可讓你查看其對網站帶來的影響。

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

若啟用 Jetpack Boost 的「最佳化 CSS 載入」功能,非必要的 CSS 便會自動延遲載入。

「最佳化 CSS 載入」功能可識別最重要的所需 CSS 規則,讓你的網站可盡快顯示頁面 (一般稱為「關鍵 CSS」),並延遲載入所有其他 CSS 規則,直到你的主要內容已載入為止。

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

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

歡迎到 web.dev 閱讀更多關於核心指標的資訊

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

每個網站使用體驗核心指標均關係到網站的載入速度,以及能多快顯示在新訪客的畫面上。

Jetpack Boost 稍微變更了從 WordPress 網站將資料傳送至使用者瀏覽器的方式,以便加快內容的載入速度。 因此,這可提高你的網站使用體驗核心指標分數。

舉例來說,「最佳化 CSS 載入」功能,可確保及早將最重要的 CSS 規則傳送至使用者的瀏覽器,進而提高初次內容繪製 (FCP) 和累計版面配置移位 (CLS) 分數。

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

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

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

此外掛程式提供豐富的效能改善功能,可協助幾乎所有 WordPress 網站提升效能。

不過,如果你的網站已非常充分經過最佳化,則 Jetpack Boost 能夠發揮作用的空間可能不大。

Jetpack Boost 內建可評估網站速度分數的工具,我們也鼓勵各位試用此工具,瞭解工具可能帶來哪些影響。

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

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

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

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

沒錯,大可安心在任何 WordPress 網站上試用 Jetpack Boost。

Jetpack Boost 不會變更你的網站內容,只會修改將內容傳送至使用者瀏覽器的方式,以便加快內容的顯示速度。

因此,如果發生與其他外掛程式不相容的情況,你還是可以放心關閉所有 Jetpack Boost 功能。

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

對使用者而言,WordPress 速度最佳化外掛程式可能相當複雜且難以理解。 這些外掛程式經常有一大堆核取方塊,但幾乎沒有相關說明,且並未提供工具來評估使用者每個變更或選擇所產生的影響。

Jetpack Boost 旨在盡可能提供易於使用的方式,且包含速度分數指示器,可協助使用者立即評估其選擇所產生的影響。

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

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

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

Jetpack Boost 目前未包含以大型資料庫為目標的任何最佳化功能。 但敬請期待相關功能,因為我們不斷在尋找新方法,來協助提升使用者表現。

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

Jetpack Boost 的圖片 CDN 功能也會自動將你的圖片轉換為更現代化的網路格式,進而產生較小的圖片檔案,且不影響品質。

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

除了少數例外狀況外,Jetpack Boost 可順利與大多數快取和速度最佳化外掛程式一併執行。 原則上,我們不建議在多個最佳化外掛程式中啟用相同的功能。

舉例來說,如果兩個外掛程式都嘗試延遲非必要的 JavaScript,最後兩者可能會彼此衝突,使得網站顯示出現問題。

如果你遇到相容性問題,請務必讓我們知道。 你可以隨時在 Jetpack Boost 支援論壇上留言給我們。

使用者評論

2024 年 1 月 25 日 1 則留言
It does speed up the website with few clicks!
2024 年 1 月 21 日 1 則留言
Yeah, I'm a fan. Not staggering improvements in speed, but significant boost considering I just push a button and it does its thing.
閱讀全部 450 則使用者評論

參與者及開發者

〈Jetpack Boost:網站速度、效能與關鍵 CSS〉外掛目前已有 27 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈Jetpack Boost:網站速度、效能與關鍵 CSS〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

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

變更記錄

3.0.2 – 2024-01-31

Fixed

  • General: Fixed an issue with compatibility file

See the previous changelogs here