使用 Smush、Hummingbird 和 The Hub 優化 WordPress 網站效能

已發表: 2020-10-20

如果您管理多個 WordPress 站點,登入每個單獨的站點來調整效能設定可能會很乏味且耗時。 Hub 的「效能」標籤可讓您透過單一標籤快速最佳化和管理 Hummingbird 和 Smush 的網站效能。

Hub 是一個完整的 WordPress 管理控制台,可讓您從一個中心位置管理一個或多個 WordPress 網站。

Hub 的儀表板分為多個選項卡,網站管理員可以快速存取有效管理 WordPress 網站所需的所有主要功能。

本教程重點介紹 The Hub 的“性能”選項卡,該選項卡結合了來自Hummingbird(我們的速度優化和緩存插件)和Smush(我們屢獲殊榮的圖像壓縮和優化插件)的有用“概覽”數據、設定和訊息,讓您快速輕鬆地查看和調整您管理的所有 WordPress 網站的效能設定。

Hub 的效能選項卡
使用 The Hub 的「效能」標籤管理和調整所有 WordPress 網站的效能設定。

本教學向您展示如何充分利用 Hub 的「效能」標籤。 我們介紹如何:

  • 從 The Hub 設定和管理您的 WordPress 網站的效能
  • 運行頁面速度測試
  • 分析速度測試結果
  • 監控伺服器的回應時間
  • 管理和優化您網站的圖像
  • 管理和優化您網站的資產
  • 管理 GZip 壓縮
  • 管理網站的快取
  • 配置進階工具
  • 運行報告

從 The Hub 設定和管理您的 WordPress 網站的效能

要從 The Hub 管理站點,您首先需要連接它們。 您可以從 Hub 本身自動執行此操作,也可以使用 WPMU DEV 儀表板外掛程式遠端執行此操作。

連接網站後,您將能夠直接從 Hub 的管理控制台管理和登入網站。

在您的網站上安裝並啟動 Hummingbird 和/或 Smush 外掛程式之前,The Hub 的「效能」標籤將保持灰色(不活動)。

中心 - 外掛程式和主題 - 效能標籤處於非活動狀態。
在網站上啟動 Hummingbird 或 Smush 之前,Hub 的「效能」標籤將保持非活動狀態。

點擊灰色的「效能」選項卡,您將看到一個啟動畫面,邀請您在網站上啟動蜂鳥。

集線器 - 效能標籤 - 啟動蜂鳥。
您可以在“效能”標籤中啟動蜂鳥。

您也可以從概述 > 推薦服務部分啟動效能模組。

中心 - 性能模組
從概述選項卡啟動效能模組。

啟動後,Hummingbird 的模組會自動在「效能」標籤內的各個面板中顯示關鍵資訊。

某些模組(例如回應時間)在啟動之前保持不活動狀態。 您可以在「效能」標籤本身中啟動模組和 Smush 插件。

The Hub - 效能標籤 - 其他效能工具
在效能標籤 > 其他效能工具部分中啟動回應時間等模組。

或者,您可以從 The Hub 的外掛程式和主題標籤啟動 Smush 等外掛程式。

The Hub - 外掛程式與主題 - 啟動 Smush
啟用 Smush

啟動 Hummingbird 和 Smush 後,「效能」標籤將顯示這兩個外掛程式的組合資訊面板。

Hub - 效能儀表板已啟動 Hummingbird 和 Smush。
Hub 的效能儀表板已啟動 Hummingbird 和 Smush。

中心的概述部分還讓您可以快速存取「效能」標籤。 點擊面板會將您帶到選項卡。

中心:概述部分 - 性能面板
您可以透過點擊「效能」面板從「概述」部分進入「效能」標籤。

現在您已經知道如何啟動 The Hub 中的「效能」選項卡,讓我們來探索一下它的主面板。

運行頁面速度測試

透過「效能」選項卡,您可以直接在 The Hub 中為您的網站執行 Google Page Speed 測試。 如果您管理多個 WordPress 站點,此功能可以真正節省時間。

“效能”面板中,按一下“執行測試”按鈕並等待幾秒鐘。 這將測試您網站的桌面和行動速度。

在「效能」面板中執行網站的桌面和行動速度測試。

從此面板中,您還可以存取 Hummingbird 的文檔並查看更多選項。

Hub:「效能」標籤 - 更多選項
點擊省略號圖示以取得更多效能選項。

已完成的頁面速度測試的結果將顯示在速度測試面板中,以下的下一部分將對此進行介紹。

分析速度測試結果

速度測試面板包含三個子選項卡:

  • 分數指標– 透過顏色編碼的分數(綠色、黃色和紅色)和速度結果,取得網站關鍵速度測試指標的「概覽」快照。
  • 審核– 查看詳細的測試結果,確定可以改善網站效能的機會和領域,並獲得有關需要修復的問題的詳細建議。
  • 歷史現場數據– 此部分針對成熟的網站,並根據現實世界中用戶在各種設備和網路條件下的匿名性能數據,編譯有關特定 URL 隨著時間的推移如何執行的信息。

點擊此面板中的活動項目會自動將您帶入網站的 wp-admin 並直接將您發送到包含建議的修復或改進的特定部分。

在速度測試面板中查看效能改進建議和修復。

了解有關速度測試指標的更多資訊。

監控伺服器的回應時間

「回應時間」面板是「效能」標籤中您需要經常參考的主要面板之一。

它顯示來自正常運作時間監控功能的數據。 從這裡,您可以監控伺服器回應時間,並立即了解您的網站是否正常運作、宕機或運作緩慢。

免費電子書
您通往獲利的網路開發業務的分步路線圖。 從吸引更多客戶到瘋狂擴張。

下載此電子書即表示我同意偶爾接收 WPMU DEV 的電子郵件。
我們將您的電子郵件 100% 保密,不會發送垃圾郵件。

免費電子書
順利規劃、建立並啟動您的下一個 WP 網站。 我們的清單使過程變得簡單且可重複。

下載此電子書即表示我同意偶爾接收 WPMU DEV 的電子郵件。
我們將您的電子郵件 100% 保密,不會發送垃圾郵件。

如需更詳細的讀數,請將滑鼠懸停在平均響應時間軸的任何資料點或部分上,按一下模組標題,或按一下查看詳細資訊

中心:性能選項卡 - 響應時間面板。
監控您的伺服器回應時間。

了解有關響應時間面板的更多資訊。

管理和優化您網站的圖像

圖片優化面板可讓您了解 Smush 如何壓縮和優化您網站的圖片。 您還可以執行批次優化所有網站圖像、啟用/停用延遲載入、管理CDN以及存取外掛程式的附加工具設定等任務。

中心:效能標籤 - 影像優化面板。
在影像優化面板中檢查 Smush 如何處理影像。

要查看此面板,您必須在網站上安裝並啟動 Smush。

了解有關影像優化模組的更多資訊。

管理和優化您網站的資產

資產優化面板可讓您快速概覽 Hummingbird 網站的最佳化資產。

其中包括檔案大小實現的總減少量、目前優化的檔案總數、您的優化資產是否由DEV CDN提供服務以及「設定」部分中的最佳化檔案類型。

若要直接前往網站 wp-admin 中對應的 Hummingbird 螢幕,請按一下模組標題「總減少量」部分中的「檢視詳細資料」連結或「設定」部分中的齒輪圖示。

中心:效能選項卡 - 資產優化。
概覽您的優化資產。

了解有關資產優化設定的更多資訊。

管理 GZip 壓縮

Gzip 會先壓縮您的網頁和樣式表,然後再將其傳送至訪客的網頁瀏覽器。

透過此面板,您可以快速查看網站上目前使用 Gzip 優化的內容類型以及網站運行的伺服器類型。

若要在 Hummingbird 中配置不同的伺服器類型,請按一下「伺服器類型」部分中的齒輪圖示。

Hub:效能標籤 - GZIP 壓縮面板
GZIP 壓縮面板。

了解有關配置 Gzip 選項的更多資訊。

管理網站的快取

快取透過在訪客的裝置上儲存臨時資料來加快頁面載入時間,這樣他們就不必重新載入資源。

Hummingbird 可讓您在網站上配置不同類型的緩存,而「快取」面板可讓您查看使用該外掛程式在網站上配置了哪些快取選項。

其中包括在「設定」部分中為每種檔案類型設定的瀏覽器快取到期時間、頁面快取、Gravatar 快取、RSS 快取以及透過 Hummingbird 在網站上啟用的其他類型的快取。

您可以透過點擊「設定」部分中的面板標題或齒輪圖標,直接進入網站 wp-admin 中的「蜂鳥快取設定」畫面。

Hub:效能選項卡 - 快取面板。
緩存面板。

您也可以透過點擊「清除快取」連結從 The Hub 清除網站上的不同快取。

這將打開一個帶有不同選項的模式視窗。 選擇您要清除的快取並點擊按鈕。

Hub:效能標籤 - 清除快取連結。
從 The Hub 清除您網站的快取。

了解有關快取面板的更多資訊。

配置進階工具

透過進階工具面板,您可以查看所有可用的 Hummingbird 工具及其目前狀態的清單。

點擊齒輪圖示上的標題,將自動導向至網站 wp-admin 中的「Hummingbird」>「進階工具」畫面。

中心:效能標籤 - 進階工具面板。
進階工具面板。

了解有關使用 Hummingbird 的高級工具部分的更多資訊。

運行報告

您的報告面板可讓您快速查看網站效能的狀態和回應時間報告。

點擊此面板中的某個項目,您將直接進入網站 wp-admin 中相應的報告螢幕,然後您可以在其中啟用或配置該功能的計劃。

中心:性能選項卡 - 報告面板。
將量身訂製的績效報告傳送到您的收件匣。

從 Hub 密切關注您網站的效能

WPMU DEV 的主要目標之一是繼續開發和改進 The Hub,為我們的用戶提供更快、更輕鬆的 WordPress 網站管理存取。

“性能”選項卡也不例外。 能夠從一個中心位置輕鬆快速地管理和監控各個站點的性能不僅可以為您節省大量時間,而且如果您是管理多個 WordPress 站點的 Web 開發人員或代理機構,它還可以讓您擴展業務並服務更多的客戶。

除了上述特定於「效能」標籤的功能之外,請記住,The Hub 可以翻譯成不同的語言,因此您可以用您的語言管理網站的效能(如果您的語言目前不可用,請告訴我們別擔心——很快就會的!)

中心可讓您以您的語言查看網站的效能。

此外,您很快就能夠完全白標 The Hub 並與您的客戶一起使用 The Hub,包括計費、您自己的範本和您選擇的主機。

最後,考慮到 Hummingbird 和 Smush 插件中提供的廣泛優化功能,很快您還可以保存您的首選配置,並將其批量應用到您喜歡的任意數量的新站點和現有站點。

有關使用“性能”選項卡的更多詳細信息,請查看我們的文檔。 此外,要密切關注我們為 The Hub 和所有插件所做的所有令人興奮的開發,請訪問我們的路線圖。

最後但並非最不重要的一點是,如果您對使用「效能」標籤有任何疑問或需要任何與 WordPress 相關的協助,請隨時聯絡我們的 24/7 專門支援團隊。 我們希望幫助您從您管理的每個 WordPress 網站中獲得最佳效能。 透過 The Hub 的「效能」選項卡,您就可以做到。

[編者註:本文最初於 2020 年 10 月發布,並於 2023 年 12 月更新以確保準確性。]

您是否使用 The Hub 的效能標籤來管理網站上的 Hummingbird 和 Smush 設定? 請在下面的評論中分享您的想法和建議。