Google PageSpeed Insights 網站速度分析工具！優化教學

（原貓熊先生網站已關閉，原文章已移至本文。）

PageSpeed Insights 是由 Google 官方釋出的網站速度優化工具，可以給你非常多網站速度優化建議、速度最佳化建議，以及會給你的網站一些評分，例如 LCP (最大內容繪製)、FID (首次輸入延遲時間) 跟 CLS (累計版面配置位移)，通通會顯示在 Google PageSpeed Insights 裡面的網站速度檢測頁面當中。

PageSpeed 的中文又可以叫做「網頁速度」，網頁速度也是 SEO 優化中的一環，因為網頁速度也是兩百多條 SEO 排名要素之一，過慢的網站速度會使你的關鍵字排名受到影響。當你想要檢查自己網站上的網頁速度，就可以使用 Google 官方的 PageSpeed Insights 網站速度檢測工具，你也會得到非常多的實用建議。

如果你還不知道 PageSpeed Insights 怎麼用，以及當你用 PageSpeed Insights 跑出許多速度指標或是速度優化建議時，應該怎麼去優化那些項目，本篇文章會有完整教學。

內容目錄

PageSpeed Insights 是什麼？

PageSpeed Insights 是 Google 所提供的網站速度檢測工具，你可以透過這項工具得到非常多的網頁速度優化建議。

點擊下方網址，前往「Page speed」。

Page speed 網頁速度檢測工具

接著直接輸入你要檢測的網頁。PageSpeed Insights 會跑出各項數據，包括 LCP、CLS…等等，然後下方有最佳化建議，你可以從 PageSpeed Insights 建議的那些優化項目開始著手。

PageSpeed Insights 重要指標有哪些？

PageSpeed Insights 網站速度檢測頁面中，有三個重要的指標，分別是：LCP (最大內容繪製)、FID (首次輸入延遲時間) 跟 CLS (累計版面配置位移)。

你在 PageSpeed Insights 的網頁速度檢測結果當中，可以看到這幾個項目的速度。

根據 Google 官方提供的資料「網站使用體驗核心指標報告」整理如下。

LCP (最大內容繪製)：從使用者要求網址時開始，轉譯可視區域中最大可見內容元素所需的時間。最大元素通常是圖片或影片，也可能是區塊層級大型文字元素。
FID (首次輸入延遲時間)：自使用者首次與網頁互動起算 (例如點選連結、輕觸按鈕等)，到瀏覽器回應該互動所需的時間。這項測量作業是針對使用者首次點選的互動式元素進行。對於需要使用者主動操作的網頁來說，這個時間點非常重要，因為網頁在此之後才會變為互動式網頁。
CLS (累計版面配置位移)：CLS 能針對使用者開啟網頁期間，加總計算每一次非預期版面配置位移的評分。分數評分範圍為 0 到任何正數，其中 0 表示沒有任何位移，而數字越大表示網頁上發生的位移越多。這項指標的重要性在於，如果網頁元素在使用者嘗試與網頁互動時移動了位置，會對使用者體驗造成負面影響。

關於 LCP、FID 和 CLS 的網頁使用體驗好壞，你可以參考如下表。

Google Search Console 會透過 LCP、FID 和 CLS 這三個指標來標記你的網址狀態。

簡單的說，你的網址在這三個指標裡面，只要有一個為「速度低落」，該網址就會被標記為「不良」。都沒有「速度低落」但是有一個「需要改善」，那就會被標記為「需要改善」。三個都是「速度良好」那該網址就會被標記為「良好」。

Google PageSpeed Insights 網頁速度優化建議

Google PageSpeed Insights 除了會給你上面幾個速度指標之外，還會給你不少網站速度優化建議，這些優化項目的建議都非常寶貴。

下面針對幾種常見的 PageSpeed Insights 給的網站速度優化建議進行說明。

1.排除禁止轉譯的資源

這個優化建議是指，你的網頁上有些靜態檔過多（例如 Javascript / CSS），因此妨礙了首次顯示畫面的時間。建議先載入重要的內嵌 JavaScript/CSS，並延後載入不重要的 JavaScript/CSS樣式。

這裡有個建議可以採納，將所有 Javascript 檔案放在</body>標籤的前面就好，不要放在<head></head>區塊裡面。至於 CSS 則都放在<head></head>區塊裡面，這樣可以保證網頁畫面顯示時已讀取CSS，就不會出現醜陋的網頁，同時因為 Javascript 檔案最後讀取，所以可以讓網頁畫面快點顯示。