使用這些 WordPress 開發技術通過所有 CWV 和 PageSpeed Insights 測試

2021 年，在總部位於英國的全棧數字代理機構 StrategiQ，我們的目標是開始開發我們開發和啟動的每個網站，以超越 Google 的核心 Web Vitals (CWV) 和 PageSpeed Insights (PSI) 性能報告。

Core Web Vitals 顯示您的網站如何以各種方式運行。 這包括在頁面上加載第一個內容的速度（First and Largest Contentful Paint）、用戶在與其交互之前必須等待多長時間的速度（交互時間）和佈局轉換（累積佈局轉換） .

測試您的 CWV 非常簡單——只需前往 https://pagespeed.web.dev/ 並輸入您的地址。 頂部區域顯示過去 28 天的最新真實世界數據，而下部區域（移動和桌面得分 100 分）是實驗室生成的數據。

為什麼這很重要？ 好吧，因為谷歌是這麼說的。

2018 年 7 月，谷歌宣布速度是網站在搜索結果中出現的一個因素，尤其是在移動設備上。 來源。

2020 年，他們還宣布，用戶體驗指標（構成 Core Web Vitals / CVW）現在用於對網站進行排名。 來源。

這很簡單：一個網站運行得越快越好，它的排名可能就越高。

因此，StrategiQ 的開發團隊決定輪到我們幫助 SEO 部門了。 搜索引擎優化專家可以盡可能地努力工作，但一個表現糟糕的網站弊大於利。 但是，通過 CWV 和 PSI 的站點將確保他們的出色工作擁有出色的跳板。

值得注意的是，CWV 和 PSI 是出了名的難以通過。 絕大多數網站都沒有，即使是世界上許多最知名的網站。 想想 YouTube、BBC，甚至 WP Engine 自己都很難在移動設備和桌面設備上獲得通行證（對不起，伙計們）。

那麼我們做了什麼來確保我們看到那些令人愉快的綠色甜甜圈呢？

我們剝離了所有東西，並致力於一個簡單的口頭禪：

盡可能快地加載盡可能少。

雖然我不會深入細節，但我將通過我們的主要方法來盡可能簡化我們定制的 WordPress 主題。

首先，讓我們談談硬件。 如果不先討論 WP Engine，我們就無法繼續。 毫無疑問，它們是最好的 WordPress 特定託管供應商之一，如果不是的話。 我們對令人印象深刻的支持、正常運行時間、每次安裝的環境、備份以及 SSL 證書和域管理的便捷性以及許多其他功能感到高興。 此外，它們的緩存和嚴格的速度優化可確保站點在服務器級別上盡可能快地運行。

以高性能服務器為核心，我們知道現在由我們來決定讓網站盡可能快地運行。

像大多數代理商一樣，我們有自己的手工製作的基本模板，我們將其用作所有定製網站的起點。 我們創建的每個網站都是在內部設計和編碼的——而不是預先構建的主題。

我們的基本模板包含我們的速度優化方法，以及許多我們發現自己在每個項目中都需要的巧妙功能和可重用組件。 從長遠來看，擁有這個起點可以節省我們的時間，並確保每個站點都能在開發人員所需的很少開銷的情況下發揮最佳性能。

我知道你在想什麼——找到好東西！

我不會費心列出您在每篇博客文章中看到的通常無聊的內容，例如“延遲加載圖像”。 但是，如果您不這樣做，那確實是必須的——我們有一個圖像功能，可以打印出我們延遲加載的帶有 srcset 和尺寸標籤的圖像（稱為響應式圖像）。

讓我們開始吧。

方法一：分塊和入隊

這種情況經常發生：一個項目只有一個 css 文件和一個 js 文件，它們最終會膨脹到一個小星球的大小。 接下來是什麼？ 谷歌問你“為什麼你在這個頁面上加載樣式和 JavaScript 沒有被使用？”。 為什麼？ 為什麼？！

這是一個有效的觀點。 當每個頁面只需要一小部分時，為什麼要為整個網站加載大量的 css 和 javascript？

我們所有的網站都是完全用古騰堡積木建造的。 這意味著對於每個塊，您都可以利用排隊 css 和 js 文件的強大功能。

對於每個塊，我們僅為該文件創建一個單獨的 css 和 js 文件（如果需要）。 然後將它們縮小（有關更多信息，請參閱下一點）並逐塊排隊。

結果？ 我們只加載每個頁面上實際存在的內容。

方法2：使用gulp之類的任務運行器來合併和縮小你的資產

生成的所有資產都由 gulp 函數縮小（其他可用，例如 grunt）。 值得注意的是，在許多個月前，Google 會更喜歡串聯而不是縮小（一個大請求比 5 個小請求更可取），但是自從 HTTP/2（一次多路復用多個請求）的興起以來，這不再是一個問題。

同樣，我們這樣做是為了使文件盡可能小。 所以現在我們不僅只加載頁面上的資產，而且它們的大小也很小。

方法3：停止渲染阻塞資產

我們確保所有這些排隊的資產都在頁面底部，因此不會出現渲染阻塞。

我們甚至將 WordPress 附帶的 jQuery 出列，並將新版本（沒有安全漏洞的版本）入列，也在頁面底部。

但是我聽到你說的 FOUC（無樣式內容的 Flash）呢？

方法4：折疊css之上

當頁面最初加載時沒有任何樣式，因為樣式表位於頁面底部，所以會出現 Flash of Unstyled Content。 加載樣式表後，應用樣式，站點閃爍，最終看起來正確。

為了解決這個問題，我們拆分了上述折疊樣式並將其作為內聯 <style> 標記添加到頭部。 它不是渲染阻塞資產，我們也沒有 FOUC。

方法5：WP火箭

最後一塊拼圖是一流的性能插件 WP Rocket。 它與 WP Engine 工程師一起構建，是其託管平台上唯一允許的緩存插件。

結果？

好吧，分數不言自明。

SportsAidEastern 是一個支持英國運動員的慈善機構。 根據 PSI 的說法，我們為他們開發的網站在移動設備上的得分高達 97/100，在桌面設備上得分高達 100/100。

Calligo 提供變革性的數據服務，其網站評分甚至優於 SportsAid； 在移動設備上接近完美的 99/100，在桌面設備上達到 100/100。

結論

希望這是從所有其他相同的“相同的”“如何加快您的 WordPress”網站發布的新鮮空氣，如果您正在努力獲得通行證，那麼也許我們已經強調了你可以試試。

StrategiQ 是戰略第一的營銷機構。 通過發現有價值的市場洞察、揭示擊敗競爭對手的機會、定義和提供有效的營銷策略，我們的團隊通過諮詢、創意、營銷和技術幫助雄心勃勃的品牌超越其目標。
無論您需要戰略、建議、資源還是專業知識，都請邁出第一步。 告訴我們您自己，我們會看看如何提供幫助。