使用 Headless WordPress 實現更好的核心 Web Vitals

已發表: 2022-05-05

長期以來,創建出色的用戶體驗 (UX) 一直是成功的網絡戰略的關鍵要素,但隨著用戶對數字體驗的期望達到新的高度,用戶體驗變得比以往任何時候都更加重要。

快速的數字加速導致對快速、無縫體驗的需求不斷增長,這些體驗可以在任何設備上快速加載並做出良好響應,而今天的數字受眾對任何不足之處都沒有耐心。

在此背景下,Google 推出了 Core Web Vitals,這是一組以用戶為中心的性能指標,可讓網站所有者和建設者更好地了解他們正在創建的數字體驗,並明確關注最終用戶。

Core Web Vitals 是以用戶為中心的性能指標,可讓您更好地了解您創建的數字體驗,並明確關注最終用戶

Core Web Vitals 也已成為 Google 搜索算法中的排名因素,這意味著更快的網站和更好的用戶體驗不僅受益於更高的用戶參與度,而且現在在搜索結果中也受到青睞。

這讓人們明白最終用戶在您構建的所有體驗中的重要性,並且它具有現實世界的底線含義:具有強大核心 Web Vitals 的網站以更高的速度將訪問者轉化為客戶。

雖然有許多方法可以優化以獲得更好的整體用戶體驗,但無頭或解耦網站架構為構建與 Core Web Vitals 一致的高性能網站和應用程序提供了一條清晰的路徑,並為當今的數字消費者提供無縫的全渠道體驗要求。

體驗無頭操作的力量——今天就註冊一個免費的 Atlas 沙盒帳戶!

在這篇文章中,我們將解釋為什麼 Headless WordPress 是通過強大的 Core Web Vitals 為您和您的客戶提供卓越用戶體驗的最佳技術堆棧。 以下是我們將介紹的內容:

目錄
1.什麼是 Core Web Vitals?
2.無頭 WordPress 的興起
3. Atlas:完整的無頭 WordPress 解決方案
4.使用 Atlas 拆除 Core Web Vitals 要求
5.使用 Faust.js 和 Atlas 設置、構建和部署您的站點
6.使用 Headless WordPress 激發您的創造力

什麼是核心網絡生命力?

Core Web Vitals 是 Google 的 Web Vitals 計劃中包含的頁面體驗信號的一個子集,它為“在網絡上提供出色的用戶體驗必不可少”的質量信號提供統一的指導。 從本質上講,這些指標有助於確保您的網站提供訪問者正在尋找的內容:可預測、響應迅速且快速的內容。

Core Web Vitals 列表預計會隨著時間的推移而發展,但目前的列表集中在三個主要領域:頁面加載速度、交互性和視覺穩定性,通過這三個指標的鏡頭:

Google 的核心 Web Vitals 列表
  • 最大含量塗料 (LCP):測量加載性能。 為了提供良好的用戶體驗,LCP 應在頁面首次開始加載後的 2.5 秒內發生。
  • 首次輸入延遲 (FID):衡量交互性——站點元素對點擊或觸摸的響應速度。 為了提供良好的用戶體驗,頁面的 FID 應該小於 100 毫秒。
  • Cumulative Layout Shift (CLS):測量視覺穩定性——如果站點元素在沒有被點擊或觸摸的情況下發生了變化。 為了提供良好的用戶體驗,頁面應保持小於 0.1 的 CLS。

如上所述,Core Web Vitals 現在是 Google 搜索算法中的一個排名因素,這意味著速度更快、用戶體驗更好的網站在搜索結果中受到青睞。 這並不是微不足道的,因為具有強大核心 Web Vitals 的網站將訪問者轉化為客戶的速度要高於具有較差 UX 的網站——因為它們提供了引人入勝的用戶體驗,並且這樣做會獲得更高的知名度!

網站所有者和建設者應該注意並可以開始使用 Google 的許多 Web 開發人員工具(包括 PageSpeed Insights、Lighthouse 或 Chrome 用戶體驗報告)來衡量 Core Web Vitals(如果他們還沒有的話),這些工具會收集匿名的真實用戶測量結果每個 Core Web Vitals 指標(以及更多)的數據。

通過這本免費的電子書了解更多關於衡量核心網絡生命力的信息!

雖然與網站性能相關的因素對於 Google 的算法來說並不新鮮(移動響應能力和安全瀏覽 (HTTPS) 多年來一直是排名因素)但引入 Core Web Vitals 作為排名因素擴大了 Google 對性能的關注,並提供了代表不同方面的指標的用戶體驗。

簡而言之,用戶體驗已經佔據了中心位置,使用 Core Web Vitals 作為您網站的基準是為您的網站用戶提供始終如一的出色體驗的好方法。 也就是說,衡量 Core Web Vitals 只是方程式的一部分。


無頭 WordPress 的興起

隨著對數字體驗的期望不斷增長以及對高性能網站的需求變得越來越重要,人們也正在採用新的框架和解決方案來正面應對這些挑戰。

Headless WordPress 就是一個很好的例子,因為越來越多的網站所有者和建設者希望將他們最喜歡的前端框架與世界上最受歡迎的 CMS 結合起來。

無頭架構通過解耦網站的前端和後端並使用 API 在它們之間提供數據來實現這一點。

對於 WordPress,這允許內容創建者繼續依賴他們最喜歡的開源 CMS,而開發人員可以利用 Next.js 等工具和他們選擇的現代前端框架來構建令人難以置信的網站和應用程序。

想嘗試無頭無風險?

立即註冊一個免費的 Atlas 評估帳戶!

在當今快節奏的數字市場中,無頭模式無疑得到了廣泛採用,尤其是在企業層面,大型企業正在通過打破內容創建者和 Web 開發人員之間長期存在的傳統孤島來重新發現他們的敏捷性。

封閉式的內容管理方法很快就過時了,因為它不僅會減慢上市時間並削弱投資回報率,而且通常會導致用戶體驗不太理想。

隨著內容創建者面臨更緊迫的最後期限並轉向多合一 CMS 解決方案,他們並不總是為最終用戶構建優化的體驗。 事實上,在 WordPress 上構建的網站中,只有不到 30% 的網站擁有最佳的 Core Web Vitals 分數,隨著對其他競爭對手平台的評估,這個數字會越來越低。

在 WP Engine 平台上構建的網站立即得到提升——超過 40% 達到了健康的 Core Web Vitals 閾值——但隨著網站所有者和建設者尋找新的方法來構建更好的用戶體驗,無頭架構繼續成為實現使用內容創建者和開發者都喜歡的工具交付高性能網站。

事實上,無頭網站通常會直接壓低 Core Web Vitals 分數,超過 50% 的無頭(前端)框架經常達到健康的 Core Web Vitals 分數。

同時,在沒有 CMS 的情況下使用前端框架構建數字體驗可能會限制內容創建者——Headless WordPress 為所有人解決的挑戰。


Atlas:完整的無頭 WordPress 解決方案

Atlas 是 WordPress 的完整無頭解決方案,專為實現無頭性能峰值而設計,同時滿足開發人員和內容創建者的需求。

Atlas 為現代開發人員想要的一切提供支持:多個服務器端環境、來自 GitHub 分支的自動部署、靜態和動態無頭架構、您選擇的 JavaScript 框架(React、Angular、Vue.js 或任何其他)以及100% 可編寫腳本的命令行工具。

同時,Atlas 將首選開發人員體驗與 WordPress 和 WP Engine 的技術領先地位相結合,讓每個人都感到高興——從您的開發人員和內容創建者到您的最終用戶。

從性能的角度來看,Atlas 具有變革性。 由於 WP Engine 已經是地球上管理速度最快的 WordPress 平台,因此將 Atlas 和 Node.js 添加到堆棧中會以指數方式提高速度,執行頁面的速度比傳統 WordPress 快 10 倍。

最終結果? 開發人員和內容創建者能夠通過始終高於基準的 Core Web Vitals 聯合力量並創建個性化的前端體驗。


使用 Atlas 拆除 Core Web Vitals 要求

Atlas 的性能優勢確實具有變革性,雖然用戶會立即看到精美頁面的快速交付的不同,但更高的性能也將反映在您網站上更好的 Core Web Vitals 指標中。

Android Authority 是最大的致力於 Android 操作系統的獨立出版物,於 2019 年加入 WP Engine。隨著他們的網站不斷發展,Android Authority 的數字團隊開始評估 Headless WordPress,以確保他們為未來構建提供可擴展性選項和性能可以滿足他們不斷增長的需求。

在使用 Atlas 升級他們的網站後,Android Authority 看到了驚人的結果——包括 Core Web Vitals 在內的 Google Lighthouse 指標提高了 6 倍,並且在桌面和移動設備上的速度比任何競爭對手都快。

您也可以通過在 wpengine.com/atlas 上註冊一個免費的 Atlas 沙盒帳戶來親身體驗 Atlas。

沙盒帳戶將允許您的開發團隊深入使用 Atlas,它包括一個沙盒 WordPress 網站與我們的“無託管”配對,它允許您在不打開 WP 引擎帳戶的情況下構建和服務您的網站的前端。

您還可以找到範圍廣泛的教程和文檔以及其他開源工具,包括 Faust.js 和 Atlas Content Modeler(更多內容見下文)。 與往常一樣,如果您對訪問 Atlas 有任何疑問,可以隨時與我們的一位專家交談。


使用 Faust.js 和 Atlas 設置、構建和部署您的站點

開始使用 headless 的最快方法之一是使用 Faust.js,它是一個開源前端框架,它使 Headless WordPress 的數據獲取、頁面呈現和用戶身份驗證變得簡單。

Faust.js 專注於在使用 Headless WordPress 構建時提供最佳的開發人員體驗,同時保持 WordPress 發布體驗的熟悉度。

以下是 Faust.js 提供的一些功能:

  • 靜態站點生成器和服務器端渲染:Faust 構建在 Next.js 之上,允許您利用 Next.js 已經提供的 SSG 和 SSR
  • GraphQL :Faust 使用最先進的 GraphQL 客戶端,讓您無需提前了解 GraphQL 查詢即可查詢 WordPress WPGraphQL API。 當你第一次看到這個動作時,感覺就像魔術一樣,Faust 是第一個提供這種功能的框架。 永遠不要再考慮編寫 GraphQL 查詢!
  • 內容預覽:Faust 解決了 Headless WordPress 一致預覽的棘手挑戰。
  • 身份驗證:Faust 具有用於與 WordPress 後端進行身份驗證的內置機制,因此您可以輕鬆構建門控內容、電子商務體驗或發出其他經過身份驗證的請求。
  • React : Faust 使您能夠使用最流行的前端庫構建整個前端。
  • React hooks : Faust 是 WordPress API 的自然擴展,因為它使從 WordPress 獲取數據變得非常簡單。
  • 自定義帖子類型:由於 Faust 幫助您獲取數據的獨特方式,將自定義帖子類型添加到您的 WordPress 網站,然後在前端訪問它們是微不足道的。
  • 靈活性:雖然 Faust 在使用 Next.js 和 React 時效果最好,但如果您想使用其他工具,例如 Gatsby、Nuxt 和 SvelteKit,您可以這樣做!

單擊此處立即開始使用 Faust,或查看此分步網絡研討會,深入了解在構建新戰線時將使用的工具、語言、API、框架等- 結束 Next.js 之上的體驗並使用 Atlas 進行部署。


使用 Headless WordPress 激發您的創造力

隨著數字加速繼續推動對更快、更個性化、全渠道體驗的需求,Headless WordPress 為網站所有者、網站建設者和他們創建的數字體驗提供了廣泛且不斷增長的可能性列表。

隨著 Core Web Vitals 繼續在 Google 的搜索算法中發揮重要作用,使用 Atlas 正面滿足這些指標是一種可靠的方式,不僅可以滿足最高標準的頁面體驗,而且可以構建更好、更易於使用的網站為您的最終用戶。

立即註冊一個免費的 Atlas 沙盒帳戶,親身體驗 Headless WordPress!