隨者網路的發展,網站速度給使用者帶來的體驗逐漸重要,在國外也有相當多的研究表示,每增加1秒的讀取時間,網站的跳出率或是轉換率都會顯著下降。而Google也針對該現象,將網站速度列為SEO指標之一,因此網站速度則成為各位兵家必優化之地,如果你還不知道該從何入門,這邊將會是一個很好的敲門磚。
Google 3大網站速度指標
Core Web Vitals(核心網頁評估指標)是Google提出的一組衡量網頁使用者體驗的關鍵指標。它們由三個主要指標組成,以下針對這幾個指標分別說明
◼LCP(Largest Contentful Paint):
LCP代表是「加載頁面中最大的圖片、文字區塊渲染所需時間」,建議LCP需在頁面加載開始後2.5秒內完成才算是合格的成績。不難想像,如果網站出現內容的速度太慢,使用者可能會認為網站出問題,而降低繼續等待的耐心。
而找出「最大的圖片、文字區塊」,可以參照後續推薦的PageSpeed Insignts工具有更詳細的介紹。
◼CLS(Cumulative Layout Shift):
CLS代表是「衡量頁面元素/區塊,在加載過程中位移的程度」CLS的值介於0到1之間,較佳的CLS值應該接近於0。
利用文字說明可能比較難以理解,可以觀看以下web.dev提供的影片,相信你也曾經遇過相同的問題,而不小心點擊到其他去塊的內容。
來源:web.dev
◼FID(First Input Delay):
*Google在2023/05時表示,該項指標將在2024/03被INP取代*
FID代表是「用戶首次與網頁互動(例如點擊按鈕或連結)到網頁真正響應該互動的時間」,較佳的FID時間是在100毫秒內。
◼INP(Input Delay):
*Google在2023/05時表示,該項指標將在2024/03取代FID*
INP是衡量交互延遲的指標,它測量從用戶與網頁進行互動(例如點擊按鈕)到網頁對該互動作出響應的時間。較佳的INP時間應該在50毫秒內。
俗話說”LAG會使人暴躁”就是測量FID指標的重點,回應速度緩慢回讓使用者操作困難,甚至在某些狀況下還會因為重複點擊,導致資料重複輸出等問題產生。
4個網站測速工具推薦
PageSpeed Insignts
為了加強SEO競爭力,利用Google推出的測速工具也是非常合理的方法之一,而在PageSpeed Insignts上方輸入想要測速的頁面之後,Google將會提供你2分報表參考。
首先如下圖第1分報表,是過去28天內使用者的實際體驗,因此如果進入網站的使用者沒有超過一定的數量,將會因為資料蒐集不足的關係無法提供。

第二份報表則是Lighthouse提供的數據,會以固定的設備、網速等實驗性條件現時測試網站速度。因此在固定所有變因的狀態下,非常適合需要測試優化結果的場合。

而在Lighthouse提供的報表後方還有針對網站優化的建議,我們除了可以找到問題點之外,也可以利用該區塊,了解網站的運行程式、LCP圖片位置等資訊。

Google Search Console
Google Search Console也是我們了解網站速度的一項好工具,在「網站使用體驗核心指標」報表中可以快速的了解到那些頁面中,出現了上述提到的3大速度指標的問題。

當完成速度優化後記得點開問題,並且按下「驗證修正後的項目」,提醒Google需要再次驗證這些頁面是否存在相同的問題。
GTmetrix
GTmetrix提供了非常簡單明瞭的流程圖,讓你可以更加瞭解網站的讀取順序,以及每一個指標被計算的時間。對於剛開始接觸網站度優化的管理者,一邊對參照下方提供的建議,會是一個非常好的學習方法。

Layout Shift GIF Generator
利用其他測速工具時可能只會得到CLS的數據,然而卻不知道畫面的位移狀況,或是哪一個區塊設定錯誤造成。而這時則可以利用Layout Shift GIF Generatore視覺劃測試頁面的狀況,讓你找到問題點並加以修改。

如何改善網站速度
◼壓縮圖片
對於圖片相當多的網站,在不降低圖片的品質下,將圖片進行無損壓縮減少其檔案大小會是一個非常聰明的作法。大型圖片文件會占用更多的網路資源和載入時間,而壓縮圖片可以減少這些需求,並優化LCP(Largest Contentful Paint)、FCP(First Contentful Paint)關鍵指標。
◼更換主機商
網站主機的性能將會決定伺服器響應時間(TTFB)和整體加載速度。而在主機商的選擇基本不外乎”性能穩定”、”主機地點”、”短時間內可提供的頻寬”、”主機安全性”等方面。如果利用PageSpeed Insignts時發現TTFB超過0.8秒,則可能需要考慮優化主機的事宜。
◼請專業工程師修改
網站的緩慢很大的可能性在於網站原始碼的攏長、需要執行的程序太多而造成,而專業的工程師可以對網站代碼進行優化,這包括使用瀏覽器緩存、減少HTTP請求、最小化CSS和JavaScript文件、延遲載入非關鍵資源等手段。
然而請修改代碼會是一項非常浩大的工程,因此事前確認可以被優化的代碼/區塊,將會是重要的功課之一。
◼使用外掛
在內容管理系統(CMS)提供了速度優化的外掛程式,例如Wordpress的Converter for Media則可以快速協助減少圖片大小,而其他外掛也可能包含處理網頁快取、壓縮資源、合併Javascript和CSS表等。
但需要注意的是,使用外掛時應該謹慎選擇,確保它們與網站的其他元素兼容並且不會引起任何安全或功能問題。
Last Updated on 17 9 月, 2023 by 己見室