- PageSpeed Insights
AI 翻译的文章。
durumis AI 总结的文章
- 透過使用網站效能衡量工具(PageSpeed Insights、Lighthouse)來改善網站效能,有助於提升搜尋引擎排名,而 Web Core Vitals 指標非常重要。
- 為了改善 CLS、LCP、FCP、FID 等指標,可以應用 UI 骨架載入、圖像最佳化、移除阻擋渲染的元素、網頁字體最佳化、JavaScript 非同步處理等方法。
- 除了介紹各項指標的改善方法之外,我們還會介紹各種提升網站效能的技術(例如 gzip 壓縮、Web Worker 等),並計畫在未來深入探討相關內容。
透過 Google 提供的網站
可以輕鬆測量網站效能。
https://pagespeed.web.dev/
輸入網址進行測量,或安裝 Chrome 擴充功能 Lighthouse 進行測量。
改善指標有什麼好處?
可以更容易在搜尋引擎中曝光。SEO 常使用伺服器端渲染,
如果上述效能指標較低,則其效果將會大幅下降。
如何改善?
web.dev 網站詳細說明了如何改善每個指標。
特別是 3 個指標佔據了很大一部分分數。(Web Core Vitals)
記錄嘗試改善指標的過程。
如何在本地測量?
export default () => { if (process.client && 'PerformanceObserver' in window) { let cumulativeLayoutShiftScore = 0; let largestContentfulPaint = 0; let firstInputDelay = 0; let firstContentfulPaint = 0;
// CLS const clsObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (!entry.hadRecentInput) { cumulativeLayoutShiftScore += entry.value; } }); }); // LCP const lcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; largestContentfulPaint = lastEntry.startTime; }); // FID const fidObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstInputDelay = firstEntry.processingStart - firstEntry.startTime; }); // FCP const fcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstContentfulPaint = firstEntry.startTime; }); clsObserver.observe({ type: 'layout-shift', buffered: true }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); fidObserver.observe({ type: 'first-input', buffered: true }); fcpObserver.observe({ type: 'paint', buffered: true }); window.addEventListener('onload', () => { console.log('Final CLS Score:', cumulativeLayoutShiftScore); console.log('LCP:', largestContentfulPaint); console.log('FID:', firstInputDelay); console.log('FCP:', firstContentfulPaint); }); } };
插入上述程式碼。如果是 Nuxt,則放入 plugins 中並檢查 console log。
累積佈局偏移 (CLS)
測量渲染過程中佈局變化的程度。
例如,假設有一個頁面透過 API 響應接收圖片網址,並渲染 400x400 的圖片,
某些佈局的位置會因圖片渲染而偏移 400px。
這會導致使用者體驗不佳,因為這是使用者預期之外的移動,而且瀏覽器在渲染畫面時
也會間接受到負面影響。
有兩種簡單的改善方法。
1. 套用 UI 骨架
- 大多數網站都會根據圖片大小或元件大小適當繪製骨架。在開發畫面時,請考慮這一點。在 Vue 中,可以使用 v-if 和 v-else 為每個元素繪製骨架。
2. 預留高度
- 如果骨架包含太多樣式,則維護會變得複雜,甚至可能產生反效果。僅僅為將要渲染的元素設置 min-height 即可有效。
- 在響應式網站等圖片大小根據裝置而不同的情況下,很難固定高度。這種情況下,可以使用最小裝置為基準,或使用 vh 或 vw。
3. 在圖片元素中明確指定寬度和高度
- 可以如下所示在圖片元素中添加寬度和高度。
即使實際圖片大小不是 400x400,也會讓瀏覽器知道圖片的預期大小。
4. 使用 font-display: swap 避免網頁字體導致佈局變化
- 顯示替代字體以防止佈局偏移。
最大內容物繪製 (LCP)
畫面中佔最大部分的元素渲染所需的時間。通常是圖片,直觀地來說,只要加快載入速度即可。
1. 縮小圖片大小。
- 檢查渲染大小是否與圖片大小不成比例。
- 使用 webp 等擴展名優化圖片渲染。如果使用有損壓縮,webp 的檔案大小比 JPEG 小約 30%,如果使用無損壓縮,則比 png 小約 20%。
- 也可以考慮根據捲軸位置載入的延遲載入。
2. 利用快取或 CDN。
3. 移除渲染阻擋元素。
- 大多數測量指標都會受到影響,因此務必移除。瀏覽器在渲染畫面時,會先取得 head 標籤中的 script,然後再進行渲染,因此請檢查 head 標籤內的 script(通常是外部 script)是否需要優先渲染。可以使用 async 和 defer 標籤輕鬆管理相關問題。
* 關於 head 內的 script 屬性,日後會撰寫其他文章。
4. 最小化套件大小。
- 與圖片渲染速度緩慢無關,如果從伺服器傳輸速度緩慢,則需要改善。
如果使用 nginx 等 Proxy 伺服器,則可以使用 gzip 壓縮。
* 關於 nginx 設定,日後會撰寫另一篇文章。
首個內容物繪製 (FCP)
表示頁面上第一個內容渲染的時間點。
1. 同樣移除渲染阻擋元素。
2. 最小化 HTML 大小。
- 如果不加節制地使用 div 標籤包覆,則會產生大量巢狀樹狀結構,並導致檔案大小增加。
3. 外部網頁字體可能是問題所在。積極使用 font-display: swap;讓基本字體優先渲染。
首個輸入延遲 (FID)
表示使用者在頁面上進行第一次輸入(點擊、捲動等)時,瀏覽器處理該輸入所需的時間。有時點擊按鈕後會出現當機的情況,但實際上並非當機,而是可能正在等待 API 響應。
1. 善用非同步,避免 JavaScript 主執行緒被繁重的作業綁定。
2. 使用 Web Worker 執行其他作業,與主執行緒分開。
* 關於 Web Worker,日後會撰寫其他文章。
字數限制,到此結束。