使用新的 Hummingbird Critical CSS 讓 WordPress 網站載入速度比以往更快
已發表: 2023-10-09透過 Hummingbird 備受期待的 Critical CSS 功能，您可以期待更快的頁面載入和效能更好的 WordPress 網站。 這就是為什麼渲染阻塞資源現在已經成為過去...
如果您關心頁面載入速度（如果您希望訪客在您的網站上停留超過兩秒，則應該關心），那麼了解 CSS 如何影響網站效能以及如何使用優化來加快頁面載入時間至關重要任務稱為關鍵CSS 。
在本文中，我們將討論以下主題：
- 什麼是關鍵 CSS 以及它如何提高效能？
- 如何使用 Hummingbird 的關鍵 CSS 功能優化 WordPress
- Hummingbird 的關鍵 CSS 與 WordPress 的所有內容相容
讓我們深入了解…
什麼是關鍵 CSS 以及它如何提高效能？
當用戶到達網站時，他們最初看到的只是滾動先前螢幕上顯示的內容。
該區域被稱為“首屏”。
正面的使用者體驗可以透過使用者感知網頁上載入內容的速度來衡量。 頁面載入速度越快（或使用者認為載入速度很快），使用者體驗就越好。 相反，頁面載入越慢（或使用者認為載入緩慢），體驗就越差。
由於訪客在開始向下滾動之前到達頁面時看到的所有內容都是首屏上方的內容，因此在加載頁面的其餘部分之前盡快加載首屏上方的內容是有意義的。
關鍵 CSS （也稱為「關鍵路徑 CSS」或「關鍵 CSS 渲染路徑」）是一種提取盡可能快速地向使用者渲染首屏內容所需的最低限度 CSS 的技術。
雖然查看首屏內容的用戶認為頁面加載速度很快，但 CSS 的其餘部分可以加載，並且用戶體驗不會受到影響。
圖像延遲載入、延遲 JavaScript 執行和關鍵 CSS 等技術都是優化瀏覽器將 HTML、CSS 和 JavaScript 轉換為螢幕上像素的步驟順序的方法。
此序列稱為關鍵渲染路徑 (CRP)，包括文件物件模型 (DOM)、CSS 物件模型 (CSSOM)、渲染樹和佈局。
優化關鍵渲染路徑可提高渲染效能。
關鍵 CSS 的優點
關鍵 CSS 可以透過以下方式提高網站效能：
- 更快的初始渲染
- 改善使用者體驗
- 更好的 SEO 性能
- 減少頁面重量
- 簡化維護
- 漸進增強
- 對核心網路生命體的正面影響（尤其是第一個內容繪製和速度指數）
- 較高的 PageSpeed Insights 分數
注意：滾動前頁面載入時首屏顯示的內容會有所不同，具體取決於用於查看網頁的裝置和螢幕尺寸。 因此，對於首屏內容，沒有統一定義的像素高度。
實作關鍵 CSS
因此，您已透過 PageSpeed Insights 工具執行您的網站，報告建議消除渲染阻塞資源。
怎麼辦？ 您如何實際落實這些建議？
那麼，您可以嘗試手動修復問題（繁瑣、耗時且不建議），使用 Web 開發工具（如果您有技術技能），或使用 Hummingbird 等 WordPress 外掛程式來自動識別、處理和解決任何問題。
我們建議使用插件方法。 這是完成工作的最快、最明智的選擇。
雖然關鍵 CSS 主要指首屏 CSS，但蜂鳥可以提取並內聯頁面上所有使用的 CSS，同時延遲/刪除其餘部分。
Hummingbird 不僅可以解決渲染阻塞和未使用的 CSS 問題以實現全頁優化，還可以透過使用關鍵 CSS（見下文）、JavaScript 資源的延遲 JavaScript 執行等內建功能消除渲染阻塞資源來處理首屏優化以及影響WordPress網站上Core Web Vitals 結果的其他區域。
如何使用 Hummingbird 的關鍵 CSS 功能優化 WordPress
注意：關鍵 CSS 是 Pro 功能，因此請確保您的網站上安裝了 Hummingbird Pro。
讓我們逐步了解如何從使用 Hummingbird 的新關鍵 CSS 功能中獲得最大收益。
首先，從執行效能測試開始。
請務必記下初始結果，以便可以比較之前和之後的結果。
接下來，導覽至 Hummingbird > 資產優化 > 額外優化並啟用關鍵 CSS。
啟用該功能後，您將看到載入關鍵 CSS 和處理未使用 CSS 的不同選項。
載入關鍵 CSS
此部分讓您可以選擇整頁 CSS 優化（預設）或首屏 CSS 優化。
我們建議為大多數網站選擇預設的整頁 CSS 優化，並選擇「使用者互動載入」選項，因為這將提供最佳結果，並解決消除渲染阻塞資源和減少未使用的CSS 審核的問題，同時保持所有網站的完整性。視覺元素。
全頁 CSS 優化內聯所有使用的 CSS 並延遲/刪除載入其餘部分。
如果預設選項無法提供理想的結果，則建議對具有複雜 CSS 負載的大型網站選擇「首屏 CSS 優化」方法。 此方法將內聯所有首屏 CSS 並非同步載入其餘部分。
免費電子書
您通往獲利的網路開發業務的分步路線圖。 從吸引更多客戶到瘋狂擴張。
免費電子書
順利規劃、建立並啟動您的下一個 WP 網站。 我們的清單使過程變得簡單且可重複。
處理未使用的 CSS
Hummingbird 為您提供了在使用者互動時載入未使用的 CSS 的選項，以修復任何渲染問題，或刪除未使用的選項，該選項會修剪未使用的 CSS，僅保留必要的內容並內聯載入。
此外，您可以切換特定貼文類型的功能。
雖然貼文類型切換可用於整頁 CSS 優化和首屏 CSS 優化方法，但只有整頁 CSS 方法可以處理未使用的 CSS。
這兩種最佳化方法還提供了一個進階選項，可以在頁面的<head>部分中手動新增自訂 CSS。
注意：如果您在早期版本的 Hummingbird 中使用了舊版CSS 首屏功能來手動提供關鍵路徑CSS，則當您將插件升級到最新版本並切換到使用新功能。
配置選項後，按一下「儲存變更」。 Hummingbird 會根據您的設定自動開始實作關鍵 CSS。
看到完成訊息後，造訪您的網站並確認前端的所有內容都會如預期顯示。
刷新頁面，讓快取再次建立，然後在 Hummingbird 中執行另一個效能測試，以便您可以比較之前和之後的結果。
重新產生關鍵 CSS
在網站上套用關鍵 CSS 後，「額外優化」畫面頂部將顯示「重新產生關鍵 CSS」按鈕。
按一下此按鈕清除快取、清除所有本機或託管資源，並自動重新產生網站或首頁所需的所有資源。
Hummingbird 的關鍵 CSS 與 WordPress 的所有內容相容
我們廣泛測試了 Hummingbird 的關鍵 CSS 功能，發現它與所有 WordPress 版本和主題、頁面建立器、字體、WooCommerce、學習管理系統 (LMS) 等相容。
但需要注意的是，在您的網站上安裝編碼不良的主題或包含具有無效代碼或無效字串的 CSS 的插件可能會導致問題並導致嚴重 CSS 錯誤訊息。
如果您在使用 Critical CSS 時遇到錯誤，請嘗試以下操作：
- 點擊“重新生成關鍵 CSS”按鈕，看看這是否可以解決問題。
- 如果您再次遇到相同的錯誤，我們建議更改主題（如果您的網站已上線，請使用臨時網站），並在新主題上執行 Critical CSS。 如果沒有問題，那麼問題很可能是主題。
- 如果您在安裝不同主題後遇到問題，我們建議您對外掛程式進行故障排除。
- 如果嘗試上述所有方法後錯誤仍然存在，請記下錯誤訊息，在您的網站上暫時停用關鍵 CSS，並聯絡我們的支援團隊尋求解決問題的協助。
不過，您可以放心，因為 Hummingbird 的關鍵 CSS 功能的設計重點是在提高效能的同時保持網站的視覺完整性。 該功能可以很好地處理錯誤，並且即使出現錯誤也很少會破壞網站。
有關使用關鍵 CSS 功能的更多信息，請參閱插件文件。
打開蜂鳥的所有優化功能以獲得最佳結果
如果從 WordPress 網站獲得最大速度和效能對您來說至關重要，那麼使用 Hummingbird 的 Critical CSS 絕對是您不應該忽視的功能。
為了獲得最佳效能和節省成本，我們建議使用具有頁面快取的 Critical CSS 以及該外掛程式提供的所有資產優化功能，包括 CDN 和延遲 JavaScript 執行。
在大多數情況下，結合 Hummingbird 的所有優化功能應該可以幫助您的網站達到 90+ 的 PageSpeed 分數，或者如果您的網站已經表現良好，則可以使其更接近完美的 100。
如前所述，Critical CSS 是 Hummingbird Pro 的功能，所有 WPMU DEV 成員都可以使用。
如果您目前正在使用我們的免費 Hummingbird 插件，請考慮成為會員，以經濟實惠且無風險的方式造訪我們的一體式 WordPress 平台。 它擁有啟動、運行和發展 Web 開發業務所需的一切。
如果您是代理商會員，您甚至可以以您自己的品牌貼上白標並轉售 Hummingbird（以及託管、網域、我們的整套 PRO 外掛程式等）。