網站跑很慢？SEO、使用者體驗不好？如何改善你的網站？
除了優化UI/UX設計，網頁技術、結構、SEO部分都很重要！
網站三大核心指標（Core Web Vitals）：LCP、INP、CLS，是用來評估訪客在瀏覽網站時所獲得體驗的指標，包括網站的載入時間、互動性、視覺穩定性等。
像 Google 這樣的搜尋引擎，會將核心網站指標納入排名考量。一起來了解如何用免費平台Google PageSpeed測試你的網站健康度，改善訪客的瀏覽體驗！
本文章節
核心網站指標的定義與重要性
如何改善最大內容繪製時間（Largest Contentful Paint, LCP）
如何改善下一次繪製的互動延遲（Interaction to Next Paint, INP）
如何改善累積版面位移（Cumulative Layout Shift, CLS）
網站效能測量工具：Google PageSpeed
常見問題（FAQs）
Google 模擬與真實訪客體驗的不同
手機與桌上型電腦的分數差異
為什麼每次測試分數都不同？
核心網站指標與 SEO 的關聯性
「網站核心指標」是什麼？如何改善優化使用者體驗？
網站核心指標（Core Web Vitals）是 Google 決定 SEO 排名時考慮的三大表現因素。這些指標，是根據訪客的實際使用數據進行測量，並結合模擬環境下的實驗測量數據，共同形成網站頁面的總體效能評分，主要體現在使用者體驗上最直觀的部分：
「網頁讀取、瀏覽的速度；內容載入、點擊互動的體驗感」，並提供改善建議。
三大指標：
最大內容繪製時間（Largest Contentful Paint, LCP）
衡量網站中最大內容元素（不包括背景圖片）在瀏覽器視窗中完成載入的時間，這是網站載入速度的指標。
下一次繪製的互動延遲（Interaction to Next Paint, INP）
評估網站對所有點擊、觸碰及鍵盤互動的回應速度，最終的 INP 值是整體過程中所觀察到的最長互動時間。
累積版面位移（Cumulative Layout Shift, CLS）
測量頁面元素因移動或重新排列所導致的版面不穩定情況。
如何改善 最大內容繪製時間LCP？
文字型 LCP 元素
優先縮短載入時間。建議使用系統字體（即電腦內建的標準字體）。
如果需要使用自訂字體，推薦採用 WOFF2 格式以達到最佳效能。
圖片型 LCP 元素
上傳 JPG 或 WebP 格式的圖片。JPG 格式的圖片通常比 PNG 格式小，能減少高達 10 倍的檔案大小，載入速度更快。
動畫LCP元素
選擇影片而不是 GIF 作為動畫內容。新的影片編碼格式有助減低檔案大小，品質也更佳。
簡化網頁設計
將圖片集、影片、商店小工具等較大的元素放置於「頁面下摺」，也就是是指在頁面未滾動時看不到的部分。
避免為 LCP 元素加入大量動畫，因為動畫（例如淡入效果）會等到整個網站載入完成後才啟動。
如何改善 下一次繪製的互動延遲INP？
第三方指令碼
會降低網站速度，請盡量避免使用。第三方指令碼是指託管於網域，但與透過Lighthouse 稽核的網址網域不同的任何指令碼（例如追蹤代碼、廣告腳本等）。 Lighthouse 會在網頁載入時，計算每個第三方指令碼封鎖主執行緒的時間長度。
應用程式外掛
減少每頁的應用程式和小工具數量。過多的應用程式會增加頁面複雜性，影響效能。
如何改善 累積版面位移CLS？
穩定頁面佈局
調整網站的 DOM（文件物件模型, Document Object Model）順序，確保網站上的元件順序與網站設計的結構分層中，二者順序相同。
文件物件模型（Document Object Model, DOM）是 HTML、XML 和 SVG 文件的程式介面。提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。 本質上，它將網頁與腳本或程式語言連結在一起。
優化廣告位置
避免將橫幅廣告放置於頁面頂部，建議將其放於頁面下摺（例如 Google AdSense 廣告），以減少對版面穩定性的影響。
如何知道網站是否健康？網站效能測量工具：PageSpeed
Chrome 推出Lighthouse前端稽核功能，也就是網站效能測量工具「PageSpeed」， 提供「核心網站指標評估」評估功能，進入網站平台就能免費測試：輸入想要稽核的網站 URL。
點擊「分析」。
執行後會跑出報表，顯示網站各個項目的結果與分析。
「Performance」就是指網站的效能，也可以找到SEO（網頁搜尋引擎最佳化）的評比。
參考下方「診斷效能問題」來改善優化網站。
使用Wix、Wordpress架站，可以直接從內建的模擬器串接Lighthouse進行測試。
常見問題（FAQs）
為什麼 Google 的模擬不同於真實訪客體驗？一般來說，測量工具是基於過去 30 天的網站真實訪客體驗，得出結果。
Google 的做法，是使用非常基本的網路和裝置，在實驗室條件下檢查網站的平均指標，因此這樣的「估計值」與實際網站訪客體驗會存在些許落差。
為什麼分數在桌機和行動裝置上不同？行動裝置的 PageSpeed 分數通常較低，這是因為行動裝置的處理器速度較慢，調整文字和圖片大小耗時較久。
另外，實驗環境也是影響因素之一：由於 Google 的行動版測試是模擬 3G 連線進行，而非訪客瀏覽網站時常用的 4G、5G或 Wifi 連線。
為什麼每次測試的分數都不同？這可能源自多個因素，測試時的本地網路狀態、處理器負載的情況、網站首頁是否變更等等，但一般而言，每次測試的誤差值並不明顯。
PageSpeed 分數會否影響 SEO 排名？網站速度的確是影響 SEO 排名的因素之一。
不過，如前述，PageSpeed是以實驗室測試為依據，做為參考基準來優化改善網站即可；真實使用者瀏覽時收集的資料，才是真正用來監測比對SEO的數據。
Bình luận