2021年,站長們都該知道,Google針對網頁體驗將會更重視包含 LCP、FID和 CLS三項指標的 CWV。CWV和網站的速度有著莫大的關聯,但 WordPress如果使用了較多的外掛和複雜的佈景主題時,即便採用了快取外掛,可能仍會在速度上有所受限,PageSpeed Insights顯示的分數可能也會讓你很灰心,WP Meteor則會透過另一種方式來協助你達到更棒的分數與實際體驗!
一、CWV指標是什麼
CWV是由 Google所提出用來評估網頁體驗的核心指標 Core Web Vitals,其中包含的項目有
LCP:Largest Contentful Paint 最大內容繪製,LCP指的是網頁上可視區域的主要內容從讀取到顯示給訪客看到所花的時間
FID:First Input Delay 首次輸入延遲時間,FID用來計算訪客第一次和網頁產生互動的延遲時間,測試訪客與網頁互動時是否馬上回應
CLS:Cumulative Layout Shift 累計版面配置轉移,CLS用來評估網頁元素非預期的跳動,版面跳動越多對體驗越差
除了以上三項,還有 TTI和 TBT也是非常重要的指標,現在你也能在 Google PageSpeed Insights看到這些數據:
TTI:Time To Interactive 互動準備時間,這是指網頁進入完整可互動狀態前所花費的時間
TBT:Total Blocking Time 總封鎖時間,當工作長度超過 50 毫秒時,從 FCP (First Contentful Paint) 到互動準備時間的時間範圍總計
將以上的指標最佳化,提供訪客最快速網頁體驗,將會是今年(往後也一直都是)Google重視,而你可以努力的 SEO目標之一。
二、我的案例
這是我的另外一個 WordPress網站,使用的是 Astra佈景主題(相當輕量的主題),啟用了 10個外掛,快取外掛使用的是 LiteSpeed Cache並使用了 memcached,且無 CDN;伺服器則是在日本東京。
在已經使用了 LiteSpeed Cache各項快取以及 CSS壓縮、JavaScript壓縮等等最佳化功能後,PageSpeed Insights給出的分數是行動版:10分、電腦版 57分。透過 WP Meteor,行動版進步為 63分、電腦版則達到 83分,很神奇吧!
三、使用 WP Meteor
開始前,請先到 PageSpeed Insights測試你的網站評分並記錄下來。
WP Meteor也是屬於網頁最佳化的外掛,作者已經表明和 Autoptimize、WP Rocket、WP Total Cache、WP Super Cache、LiteSpeed Cache、Elementor 、Google AMP 以及 AMP for WP等外掛「相容」。
目前列舉不相容的外掛只有 Nitropack。
WP Meteor不會在你的資料庫和伺服器硬碟空間留下資料,所以你可以先測試看看是否滿意,如果不滿意只要停用移除就好;作者也非常友善,如果你發現 WP Meteor造成某些問題或與某些外掛不相容,回報給他會盡力解決或列出相容性。這個外掛還很新,所以更新速度也非常快喔。
1.在你的 WordPress網站後台按一下「外掛」>上方的「安裝外掛」>輸入「WP Meteor」按下「立即安裝」&「啟用」
2.清理你的網站快取後,確認網站瀏覽都一如往常,就可以重新前往 PageSpeed Insights網站再次評估分數。是不是也飆起來呢?
如果想要暫時測試沒有 WP Meteor加持的頁面,你可以不必停用外掛,只要在網址後方加上 ?wpmeteordisable 就可以測試原始的頁面囉。
四、WP Meteor的原理是什麼?
WP Meteor透過延遲讀取語法的方式來加速網頁渲染。如果使用者沒有和網頁進行互動,那麼 WP Meteor就會延遲語法,直到使用者觸發後才開始執行。
目前 WP Meteor提供兩種設定(設定>WP Meteor),分別為延遲 1秒或延遲 2秒。
延遲 1秒
優點:
顯著提升頁面速度
訪客網頁體驗和原先幾乎沒有差別
缺點:
網頁速度的指標可能會是浮動的
訪客在網站上的停留時間少於 1秒者,可能不會被分析工具紀錄
任何低於 1秒的元素都不會提高網頁速度。
延遲 2秒
優點:
最大程度的改善你的分數
缺點:
網頁中無須捲動即可瀏覽的區域,可能有動畫延遲
訪客在網站上的停留時間少於 2秒者,可能不會被分析工具紀錄
任何超過 2秒的元素都不會改善分數。
不論是哪一種延遲方案,WP Meteor都能提供訪客比現在更快看到完成渲染的網頁。
如果你在 WordPress的加速上也做到了瓶頸,試試看 WP Meteor的解決方案,也許又會為你的網頁專案開啟新天地!