Google PageSpeed Insights 網站速度分析工具！優化教學 by 貓熊先生 2021 年 12 月 6 日 2021 年 12 月 6 日 4.2K Google PageSpeed Insights 網站速度分析與優化 PageSpeed Insights 是由 Google 官方釋出的網站速度優化工具，可以給你非常多網站速度優化建議、速度最佳化建議，以及會給你的網站一些評分，例如 LCP (最大內容繪製)、FID (首次輸入延遲時間) 跟 CLS (累計版面配置位移)，通通會顯示在 Google PageSpeed Insights 裡面的網站速度檢測頁面當中。 PageSpeed 的中文又可以叫做「網頁速度」，網頁速度 也是 SEO 優化中的一環，因為網頁速度也是兩百多條 SEO 排名要素之一，過慢的網站速度會使你的關鍵字排名受到影響。當你想要檢查自己網站上的網頁速度，就可以使用 Google 官方的 PageSpeed Insights 網站速度檢測工具，你也會得到非常多的實用建議。 如果你還不知道 PageSpeed Insights 怎麼用，以及當你用 PageSpeed Insights 跑出許多速度指標或是速度優化建議時，應該怎麼去優化那些項目，本篇文章會有完整教學。 內容目錄 TogglePageSpeed Insights 是什麼？PageSpeed Insights 重要指標有哪些？Google PageSpeed Insights 網頁速度優化建議1.排除禁止轉譯的資源2.減少無用的 CSS3.提供 next-gen 格式的圖片4.減少無用的 Javascript5.使用合適的圖片大小6.壓縮 CSS 檔案7.壓縮 Javascript 檔案PageSpeed Insights 診斷建議通過 PageSpeed Insights 網頁速度檢測的項目更多網頁速度優化技巧PageSpeed Insights 總整理 PageSpeed Insights 是什麼？ PageSpeed Insights 是 Google 所提供的網站速度檢測工具，你可以透過這項工具得到非常多的網頁速度優化建議。 點擊下方網址，前往「Page speed」。 Page speed 網頁速度檢測工具 接著直接輸入你要檢測的網頁。PageSpeed Insights 會跑出各項數據，包括 LCP、CLS…等等，然後下方有最佳化建議，你可以從 PageSpeed Insights 建議的那些優化項目開始著手。 Google 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 除了會給你上面幾個速度指標之外，還會給你不少網站速度優化建議，這些優化項目的建議都非常寶貴。 Google PageSpeed Insights 網頁速度優化建議 下面針對幾種常見的 PageSpeed Insights 給的網站速度優化建議進行說明。 1.排除禁止轉譯的資源 這個優化建議是指，你的網頁上有些靜態檔過多（例如 Javascript / CSS），因此妨礙了首次顯示畫面的時間。建議先載入重要的內嵌 JavaScript/CSS，並延後載入不重要的 JavaScript/CSS樣式。 這裡有個建議可以採納，將所有 Javascript 檔案放在</body>標籤的前面就好，不要放在<head></head>區塊裡面。至於 CSS 則都放在<head></head>區塊裡面，這樣可以保證網頁畫面顯示時已讀取CSS，就不會出現醜陋的網頁，同時因為 Javascript 檔案最後讀取，所以可以讓網頁畫面快點顯示。 2.減少無用的 CSS 這項網頁速度優化建議是指，有些外部載入的 CSS 檔案樣式，其實都沒用到，可以建議工程師將他們找出來並刪除。這種情況多半出現在你使用外部的 CSS 樣式，例如 Bootstrap / Font awesome …等等 3.提供 next-gen 格式的圖片 所謂 next-gen 格式的圖片就是指 WebP 和 AVIF 等圖片格式。這種格式的壓縮效果通常比 PNG 或 JPEG 要好，這代表下載速度更快，數據用量更少。 4.減少無用的 Javascript 跟無用的 css 一樣，有些外部載入的 Javascript 檔案包一樣也沒用到，建議可以請工程師檢查並移除。 5.使用合適的圖片大小 使用大小合適的圖片有助於節省行動數據用量並縮短載入時間。也就是網頁上圖片的大小要避免使用完整尺寸的圖片，因為這樣即便使用 width 跟 height 屬性來控制圖片顯示大小，檔案載入大小仍然不會變。因此要透過裁切圖片以及壓縮圖片的方式，來減少圖片檔案的大小。 6.壓縮 CSS 檔案 可以使用一些線上 CSS 壓縮檔案工具來進行壓縮，減少 CSS 這種靜態檔案的大小。 7.壓縮 Javascript 檔案 可以使用一些線上 Javascript 壓縮檔案工具來進行壓縮，減少 Javascript 這種靜態檔案的大小。 上面就是幾點 PageSpeed Insights 會給你的網頁速度優化項目與建議，通常不外乎就是針對靜態檔案做處理，包括圖片大小、CSS 檔案壓縮處理、Javascript 壓縮處理，以及使用 next-gen 格式的圖片來優化網站速度。 對於網頁速度優化有興趣的人，也可以參考下面這篇文章教學。 網頁速度 Page speed 如何優化？10 個網站速度優化項目！教學 PageSpeed Insights 診斷建議 除了上面的網頁速度優化建議之外，PageSpeed Insights 還提供了一些診斷建議給你參考。 PageSpeed Insights 診斷建議 點開每一個診斷建議之後， Google 都會給你一些優化的操作方向，相當貼心。這些 PageSpeed Insights 的診斷建議也可以用來優化你的網頁速度。 通過 PageSpeed Insights 網頁速度檢測的項目 最後你還會看到你的網頁已經通過 PageSpeed Insights 的優化測試檢測的項目，這代表你的網頁在這些項目已經做得相當不錯，可以繼續保持。 通過 PageSpeed Insights 網頁速度檢測的項目 更多網頁速度優化技巧 其實之前已經撰寫過一篇關於「網頁速度」優化的各種技巧，對於優化自己網站速度有興趣的人可以前往閱讀。另外，在 Google search console 其實也有網頁體驗指標可以檢視，建議也將下面這篇 Google search console 的文章看一下。 網頁速度 Page speed 如何優化？10 個網站速度優化項目！教學Google Search Console 教學：驗證安裝與完整教學指南 PageSpeed Insights 總整理 PageSpeed Insights 是 Google 官方推出的網頁速度檢測工具，是相當好用的網站速度優化工具，你可以透過這個工具得到大量的優化建議，SEO 人在進行 SEO 優化項目工作時，可以多加使用這個工具。 其他人正在看 網頁速度 Page speed 如何優化？10 個網站速度優化項目！教學 waterfaller 網頁速度與網站速度核心體驗檢測工具 Google PageSpeed Insightspage speedpagespeedPageSpeed Insights 相關文章 waterfaller 網頁速度與網站速度核心體驗檢測工具 網頁速度 Page speed 如何優化？10 個網站速度優化項目！教學