PageSpeed Insights是什麼?網站速度如何影響SEO排名?
Welly SEO 編輯部
2024-01-04更新
# SEO優化
# 技術SEO
Google PageSpeed Insights是什麼?PageSpeed SEO關係為何?本文除了帶你了解網站速度的重要性,並分享PageSpeed Insights使用教 學和5個Page Speed Tools,最後告訴你網頁速度優化方法。
PageSpeed是什麼?檢查網頁速度必學工具介紹!
每天努力產出優質的網站內容、圖片,你的網站排名還是不見起色嗎?
想要SEO排名提升,除了內容營銷(Content SEO)要做好,網站技術(Technical SEO)更是最根本需要解決與優化的問題。
然而想要快速知道網站技術的問題出在哪裡,光靠逐一排查的方式,一行一行檢查程式代碼是行不通的,這時候SEO營銷人員就可以透過各式檢查工具的輔助,快速且有效率地找到問題所在。
本文將介紹Google推出的網站速度工具-PageSpeed Insights。
(一)什麼是PageSpeed?介紹Google官方網頁速度檢查工具
在搜尋引擎上,多數人習慣使用「PageSpeed Website」、「Web PageSpeed」或「PageSpeed Test Google」進行關鍵字搜尋,那是因為PageSpeed Insights這項工具是針對**網站速度(Website Speed)**進行評估的檢測工具。
PageSpeed Insights在業界通常簡稱為PSI,而PageSpeed中文可以直稱為「網頁速度」。
PageSpeed Insights是Google官方團隊於2010年開發的SEO網站檢查工具,透過上面Google PageSpeed Score和報告,可以快速幫助網站管理員、營銷人員、工程師了解網站速度,以及需要優化的地方有哪些。
除此之外,為了配合Google演算法的更新,PSI於2018年11月改版,使得網站檢測功能更加全面、實用。
- PageSpeed Site:https://pagespeed.web.dev/
(二)PageSpeed Insights 速度如何評估?3+1核心指標一次看!
在PageSpeed Insights裡有許多不同的網站速度評分指標,也就是所謂的「Web Vitals」,透過Web Vitals搭配對應的權重算出來的分數,就是在PSI的總效能分數。
其中,在優化網站最重要的Web Vitals有3個,統稱為「Core Web Vitals」,也就是核心網站速度指標,包含LCP、FID、CLS,以下除了將介紹目前的3大核心指標,也會補充未來在2024年將取代FID的INP指標:
📌LCP(Largest Contentful Paint)
LCP中文為最大內容繪製,意思是根據頁面首次開始加載的時間點,來報告可視區域範圍內可見的最大圖片或文本完成渲染(render)的相對時間。
簡而言之,
LCP意思是「網頁主要內容經過加載成功顯示到網頁上的速度」。
📌FID(First Input Delay)
FID中文為首次輸入延遲時間,其定義為從用戶第1次與頁面互動,直到瀏覽器對其作出反應,並且實際能夠開始處理事件程序所經過的時間。
也就是說,
FID意思是網頁完成載入後,確切可以開始操作、進行互動的時間。
📌CLS(Cumulative Layout Shift)
CLS中文為累計版面配置位移,主要用於測量整個頁面生命週期內,發生的所有佈局意外偏移中最大的偏移分數,像是圖片位移等。
換言之,
CLS用於評估「網頁顯示的穩定度」。
⏱️補充:INP(Interaction to Next Paint)
INP指標中文為與下一個顯示的內容互動,通過觀察用戶訪問頁面的整個生命週期中,發生的所有點擊和鍵盤互動的延遲來評估頁面對用戶的整體反應能力,換句話說,就是針對你每次執行下一個內容互動的延遲進行評估。
web.dev官方資料表示:2024年3月INP將取代FID指標。
雖然FID和INP應用都是針對用戶與網站互動的指標,但其會被INP取代的主要原因是在FID本身定義上的2大局限性:
- 首次:雖然第1次互動很重要,但並不能保證用戶後續與網站的互動狀態皆如此。
- 延遲:FID僅輸入第1次的延遲時間,但通常一開始瀏覽器加載網站本來就會花比較多的時間。
由上述可知相較於FID,INP會紀錄用戶所有互動的延遲,因此可以提供更全面且完整的用戶體驗判斷標準。
📌Google網站評分判斷標準
不錯 | 仍須改善 | 不佳 | |
---|---|---|---|
LCP | 2.5秒以下 | 2.5 - 4.0秒 | 超過4秒 |
FID | 100毫秒以下 | 100毫秒 - 300毫秒 | 超過300毫秒 |
CLS | 0.1以下 | 0.1 - 0.25 | 超過0.25 |
INP | 200毫秒以下 | 200毫秒 - 500毫秒 | 超過500毫秒 |
PageSpeed SEO關係為何?網站速度好重要!
知道PageSpeed是什麼、如何運作之後,你可能心中會萌出1個疑問,「網站速度真的會影響SEO排名嗎?」
以下將整理Google PageSpeed SEO官方資料來為你解惑!
(一)Google證實:網站速度會影響SEO排名!
在SEO優化的網站技術中,一定會提到網站速度,會有這個說法絕對不是SEO公司或營銷人員在糊弄你。
早在2010年,Google內部就已經明確地對外發布「網站速度與效能將納入排名演算法中」,主要的原因就是用戶體驗。
試想今天你進到一個網站,卻等了超過10秒,網站載入都還沒出來,這時候的你想必已經果斷離開網站了,因此網站速度慢不但影響了用戶體驗,甚至提高了網站跳出率。
接著,Google陸續幾年都有不斷將網站速度的新指標加入影響排名的因素中:
- 行動裝置上的網頁載入速度:Google於2018年7月將行動裝置納入網站排名因素中,如手機、平板等裝置。(可參考Google官方文件 )
- 網頁體驗信號:在2021年5月Google正式宣佈除了Core Web Vitals,行動裝置相容性、HTTPS安全性、插頁式廣告指南都將納入網站排名因素之一。(可參考Google官方文件 )
(二)Google搜尋引擎爬取額度(Crawl Budget)與網站速度的關係
優化網站速度有助於SEO網站排名的背後邏輯,其實攸關了Google搜尋引擎爬取網站資料的額度。
所謂的**爬取額度(Crawl Budget)**可以想像成Google搜尋引擎對一個網站的工作量,因搜尋引擎在網路世界有成千上萬的網站與資料需要讀取,因此Google限制了它在爬取每一個網站的時間,以利維持效率與公平性,避免大型網站佔用了其他網站的爬取時間。
換言之,如果你的網站速度緩慢,將浪費搜尋引擎對網站的爬取額度,使其在網站爬取頁面時不順利,進而影響SEO排名。
(三)結論:網站速度快不是唯一SEO排名指標!
當然!網站速度並非唯一的SEO排名指標。
SEO搜尋引擎優化在**網站技術(Technical SEO)**上還有許多額外的指標,像是Sitemap、Breadcrumb麵包屑、robots.txt等;此外,在內容營銷(Content SEO)也必須執行關鍵字分析、內容撰寫等項目。
因此如果只專注在網站速度的秒數,其他SEO項目都沒有被維護的話,網站排名仍有可能不見起色。
✨想知道詳細的SEO優化方法與項目,建議你閱讀此篇文章:SEO是什麼 ?SEO教學全攻略:On Page SEO、Off Page SEO
PageSpeed Insight教學|1步驟快速查看你的網站速度
想要學會如何使用Google PageSpeed Insights,其實比你想像的還要簡單,跟著以下PageSpeed Insights步驟教學,快快幫你的網站做網站速度檢查吧!
(一)Google PageSpeed Insights使用教學
- STEP1:輸入你想要測試網站速度的網址URL。
- STEP2:等待數據報告產出。
- STEP3:點擊中間的「行動裝置」或「電腦」即可看到PageSpeed site Google報告。
(二)PageSpeed Insight API 介紹
根據Google官方資料,PageSpeed API會傳回Chrome使用者體驗報告中的實際資料,以及Lighthouse的實驗數據,並協助以下項目:
- 評估網頁效能
- 取得改善網頁效能、無障礙功能和搜尋引擎優化(SEO)的建議
- 了解如何將網頁轉換為漸進式網頁應用程式
此外,在Google官方的教學文件中也提供取得API金鑰的方法,並在取得金鑰後,將查詢參數 「key=yourAPIKey」附加至所有要求網址即可。
✨詳細的方法與資訊,建議詳閱Google官方文件:開始使用 PageSpeed Insights API
(三)Google Speed Insights 3大常見問題解惑!
1️⃣有PageSpeed Insight Chrome擴充程式嗎?
雖然PageSpeed Insights沒有瀏覽器的擴充程式,但可以使用Lighthouse擴充程式。
Lighthouse同為Google團隊研發出來的檢測工具,與PageSpeed Insights不同在於,PSI是檢測「網站」,而Lighthouse則是「擴充程式」的網站站檢測工具,下一段將詳細介紹Lighthouse。
2️⃣可以使用PageSpeed Insights Localhost嗎?
答案是:可以!
建議可以直接使用Lighthouse,並利用Google DevTools檢測數據。
3️⃣已經優化完網站了,為什麼PageSpeed Insights效能分數仍維持不變?
根據Google官方回覆,PSI的網站速度指標並不會隨著用戶即時優化網站而更新,因為Web Vitals是每天紀錄過去30天的資料與使用者體驗。
5大Page Speed Tools推薦與介紹:GTmetrix、Pingdom等
想要測試網站速度Test PageSpeed,除了Google PageSpeed網頁速度檢測工具之外,只要上網查「PageSpeed Tools、Website Speed Test Tools」就有許多實用的第三方PageSpeed Online Tools可以輔助使用。
以下分享5大網站速度測試工具:
(一)Google Lighthouse|Lighthouse vs PageSpeed
如上述常見問題的簡短介紹,Lighthouse PageSpeed都是Google團隊研發出來的工具,兩者的差異如下:
Lighthouse | PageSpeed Insights | |
---|---|---|
檢測報告方式 | PSI網站 | |
優點 | ||
適合用戶 |
此外,這兩者的數據在2018年被Google整合,解決了先前數據不一的狀況,因此想要使用擴充程式,或是在測試網站的用戶,建議安裝Lighthouse;如果想要快速、直覺地看網站速度報告的用戶,那麼直接使用線上的PageSpeed Insights即可。
(二)GTmetrix
GTmetrix是第三方網站效能分析工具,和PageSpeed的操作方式相同,只要貼上想要檢測的網址URL就可以進行網站檢查。
在網站報告的部分也會有基礎的Web Vitals,像是FCP、LCP、CLS等,並利用A、B、C區分效能表現,A為綠色表示網站效能佳,以此類推。
- GTmetrix入口:https://gtmetrix.com/
📍GTmetrix優點
- 不用登入即可免費使用3次
- 註冊登入後仍可免費使用
- 具體網站分析建議
- 具備Web Vitals指標
(三)Pingdom
Pingdom在操作上除了要貼上網址URL之外,還要選擇檢測地點,但因目前尚未有香港的檢測位置,因此建議選擇離香港較近的日本東京(Asia-Japan-Tokyo)地區 。
其主要的4大指標如下:
- Performance grade(檢測總分)
- Page Size(網頁大小)
- Load Time(加載網頁時間)
- Requests (請求HTTPS的次數)
雖然數據指標與報告內容和GTmetrix和PageSpeed相比較為精簡,但Pingdo的優化建議明確、好理解。
- Pingdom入口:https://tools.pingdom.com/
📍Pingdom優點
- 優化建議明確、好理解
- 操作容易
(四)WebPageTest
WebPageTest是一個線上免費的網站檢測工具,在操作上,必須先註冊登入後才可使用。
此外,除了貼上網址URL,WebPageTest還可以選擇地區、瀏覽器等,讓用戶可以更精準地檢查網站效能。
- WebPageTest入口:https://www.webpagetest.org/
📍WebPageTest優點
- 支援多種瀏覽器與地理位置
- 視覺化報告
(五)YSlow
YSlow是Yahoo團隊開發出來分析網站效能的工具,其主要用於Firefox的擴充程式。
此外,如果想要使用YSlow,用戶必須先安裝Firefox和Firebug,才能順利啟用。
然而YSlow隨著Yahoo搜尋引擎的沒落和Google網站工具的興起,已經不敷使用了,建議選擇上述推薦的工具進行操作。
PageSpeed Insight 優化方法分享:LCP、FID、CLS
在剛開始執行網站速度優化時,新手常常會關注在「提高效能分數」上,而忘記自己實際網站的目的與初衷。
其實在網站概念上,只要你的網站內容越多、承載越多頁面,勢必網站速度會相較於一頁式網站來得慢,這時如果要提升網站速度,就必須捨棄掉一些內容或是壓縮檔案等;這時候如果一昧地把內容刪除,反倒影響了網站的功能性。
因此網站營運人員或營銷人員必須拿捏網站功能性與速度數據的平衡,網站速度分析固然重要,但不能一昧追求提高效能分數,而忽略了用戶對於實際網站體驗的需求。
以下根據Core Web Vitals分享出現PageSpeed Insight Error時,有哪些PageSpeed優化方法:
(一)LCP優化方法
LCP主要和網站內容載入時間相關,以下提供4大LCP優化方向:
- 優化伺服器
- 優化JavaScript和CSS載入時間
- 優化和壓縮多媒體檔案
- 使用Server Side Rendering(後端渲染)開發網頁
(二)FID優化方法
FID主要和用戶互動有關,常見狀況像是網頁畫面已經成功顯示出來,但用戶點擊或是進行鍵盤輸入時,網頁毫無反應。
優化方法就是將需要執行較長時間的 程式切割成較小的任務,使網站可以階段性的載入,同時避免安裝過多的外掛及特效元件,降低發生上述互動阻礙的可能性,以降低JavaScript檔案的載入和執行時間。
(三)CLS優化方法
CLS主要是針對網頁排版位移的狀況做評估,常見狀況像是文字區塊的畫面已經顯示出來,可以讓用戶閱讀內容,但畫面看到一半卻被中間載入出來的圖片或廣告影響排版。
遇到類似的網站狀況時,主要的優化方法有2個:
- 預留圖片或廣告的區塊空間,避免影響版面配置位移
- 優先使用CSS Transform的動畫效果,避免使用容易引發版面位移的CSS Properties
(四)更多Web Vitals指標:FCP、TTI、TBT、TTFB
Web Vitals指標 | 定義 |
---|---|
FCP(First Contentful Paint) | 瀏覽器載入並顯示網頁中的第一個可見內容(如圖片、文字或背景)的時間。但相對之下,LCP更能反映用戶的實際感知。 |
TTI(Time to Interactivity) | TTI代表最後一個長時間執行的任務結束時間,與上一個任務至少相隔5秒的時間。 |
TBT(Total Blocking TIme) | 用作衡量頁面加載過程中主執行緒被阻塞,以致無法跟用戶交互作出回應的時間長度。 |
TTFB(Time to First Byte) | 瀏覽器從伺服器獲取第一個byte所需的時間,時間越短代表網頁載入速度越快。 |
在優化網站的過程中,PageSpeed Insights(PSI)是一個非常重要的工具,透過它分析網站的速度和效能,我們能夠了解並改進用戶體驗,進而吸引更多的網 站訪客。
以上就是PageSpeed的介紹,如果您想要了解更多SEO資訊,或者想要獲取免費的SEO網站檢測,都可以透過下方黃色按鈕與Welly團隊聯繫!