SEO：Lighthouse 介紹 | Next.js

如我們在前一節所見，核心網頁指標 (Core Web Vitals) 透過載入效能 (Largest Contentful Paint)、互動性 (First Input Delay) 和視覺穩定性 (Cumulative Layout Shift) 來關注使用者體驗的各個面向。

在本課程中，我們將重點介紹如何透過名為 Lighthouse 的模擬環境來測量核心網頁指標。

注意：本課程我們將使用 Chrome Dev Tools。不過，執行 Lighthouse 有多種方式。

Lighthouse 的工作原理是對提供的 URL 執行一系列稽核。根據這些稽核，它會生成一份關於頁面表現的報告。如果有需要改進的地方，報告會提供改進的建議。

讓我們來看兩個 Lighthouse 報告的範例，比較核心網頁指標健康與不健康的網站之間的差異。

為了了解 Lighthouse 的運作方式，我們將使用我們的首頁作為範例。

這將開始執行報告，過程應該少於 60 秒。

注意：在無痕視窗中執行報告非常重要，因為第三方插件會影響你的報告結果。

此外，廣告攔截器可能會阻止腳本載入，從而導致稽核不完整。建議設定一個乾淨的使用者情境 (persona) 來測量效能。

以下是一個報告範例：

為了本教學的目的，我們創建了一個沒有任何優化的應用程式。

這是一個基本的未優化應用程式，允許訪客做兩件事：搜尋國家以獲取其人口資料，以及點擊按鈕閱讀彈出模態框。這個應用程式旨在模擬在大型應用程式上工作的現實情況，其中無法避免使用第三方函式庫。

npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"

為了從 Lighthouse 獲得準確的報告，你的應用程式應該始終使用生產環境建置進行測試。要執行生產環境建置，請切換至專案目錄：

cd nextjs-lighthouse

執行 next build 來建置你的應用程式，並執行 next start 以生產模式 (production mode) 啟動伺服器。

npm run build && npm run start

讓我們使用 Chrome DevTools 執行 Lighthouse 報告。報告完成後，我們將開始優化網站並改進核心網頁指標。

Lighthouse 介紹