Lighthouse 是用於改善網站品質的自動化工具。您只要提供網址，該網址就會提供一系列建議，說明如何改善網頁效能、提高網頁可存取性，以及遵循最佳做法等等。您可以從 Chrome 開發人員工具、Chrome 擴充功能，甚至是實用的「Node 模組」中執行這項指令，以便進行持續整合。
Lighthouse 目前提供許多改善頁面載入效能的提示，例如啟用文字壓縮或減少禁止轉譯的指令碼。Lighthouse 團隊會持續推出新的稽核功能，以便為您提供更實用的建議，協助您加快網站速度。本文是針對您可能不知道的有用效能稽核匯總內容，例如：
- 主要執行緒工作明細
- 預先載入金鑰要求
- JavaScript 啟動時間偏高
- 避免頁面重新導向
- 未使用的 JavaScript
- 對靜態資產使用效率不佳的快取政策
- 避免成本昂貴的來回行程
- 使用影片格式製作動畫內容
- 載入網站字型時，所有文字都會保持顯示狀態
- 解除 CSS 和 JavaScript
- 未使用的 CSS 規則
主要執行緒工作明細
如果您曾使用過開發人員工具中的效能面板，就會知道要進一步瞭解 CPU 作業時間花在載入頁面何處。很高興在此宣布，這項資訊現已能透過新的主要執行緒工作明細稽核，隨時輕鬆取得。
這項新的診斷功能會評估網頁載入期間發生的活動數量和類型，方便您用來處理與版面配置、指令碼評估、剖析和其他活動相關的載入效能問題。
預先載入金鑰要求
當瀏覽器擷取資源時，會在文件及其子資源中找到這些資源的參照。但有時可能會因為系統在頁面載入程序的較晚階段找到一些重要資源，所以這個結果有時可能並不理想。幸好，rel=preload 可讓開發人員提示符合規定的瀏覽器，系統應盡快擷取哪些資源。開發人員可透過全新的預先載入金鑰要求稽核，瞭解 rel=preload 較快載入哪些資源會有幫助。
使用 rel=preload 時，請務必測試及比較效能變更，因為這可能會影響載入效能，而您或許無法預期預期會有這樣的影響。舉例來說，預先載入大型圖片可能會延遲初始轉譯，但要權衡的是，預先載入的圖片會較早顯示在版面配置中。別忘了讓你滿意實驗結果！
JavaScript 啟動時間偏高
如果載入過多 JavaScript，瀏覽器在剖析、編譯及執行該頁面時，頁面可能會沒有回應。第三方指令碼和廣告是超量指令碼活動的特殊來源，可能會破壞效能較高的裝置。新的「JavaScript Boot-up Time is High」稽核會顯示網頁上每個指令碼的 CPU 作業時間，以及其網址：
執行這項稽核時，您也可以在網路面板中啟用第三方徽章，並篩選清單，找出第三方指令碼資源。有了這項稽核的資料，您就能更精準地找出頁面過多的 JavaScript 活動來源，進而找出將網頁從精簡變成延遲的情況。對於應用程式專屬的指令碼，您可以使用程式碼分割和樹狀結構等技巧來限制網站各頁面的 JavaScript 數量。
避免頁面重新導向
瀏覽器要求網址時，有時伺服器可以回應 300 層級狀態碼。瀏覽器會重新導向至其他網址。雖然重新導向是搜尋引擎最佳化和便利性的必要元素，但會增加要求的延遲時間。如果他們會重新導向至其他來源，就會發生額外的 DNS 查詢和連線/傳輸層安全標準 (TLS) 交涉時間。
這類重新導向不適合用於網站上的到達網頁。為協助縮短延遲時間並改善載入效能，Lighthouse 現已推出「避免網頁重新導向」稽核功能，讓您得知導覽觸發任何重新導向的時機。
請注意，這項稽核很難在 Lighthouse 開發人員工具中觸發，因為它會分析網頁網址列中的目前網址，藉此反映所有重新導向的解析度。您最建議會在 Node CLI 中看到這項稽核資訊。
未使用的 JavaScript
在大量使用 JavaScript 的應用程式中，無效程式碼可能會是一個嚴重的問題。雖然它不會因為從未叫用而產生執行費用，但會帶來其他不想要的影響。瀏覽器仍會下載、剖析及編譯無效程式碼。這會影響載入效能和 JavaScript 啟動時間。與開發人員工具的涵蓋範圍面板類似，「Unused JavaScript」稽核會顯示目前網頁下載的 JavaScript，但從未使用。
透過這項稽核，您可以找出應用程式中的無效程式碼並加以移除，改善載入效能並減少系統資源用量。專家級提示：您也可以使用 Chrome 開發人員工具中的程式碼涵蓋率面板找到這項資訊！
對靜態資產使用效率不佳的快取政策
雖然許多效能建議通常都著重於加快網站新手的速度，但也重要的是使用快取來改善回訪者的載入效能。「使用效率不佳的靜態資產政策」稽核會檢查網路資源的快取標頭，並通知您靜態資源的快取政策是否為子標準。
在這項稽核的協助下，您可以輕鬆找出並修正目前的快取政策問題。這樣可大幅提升回訪者的效能，他們也會感受到速度有多快！
避開昂貴的來回行程
瀏覽器從伺服器擷取資源時，可能需要花費大量時間執行 DNS 查詢並建立與伺服器的連線。rel=preconnect 可讓開發人員先與其他伺服器建立連線，遮蔽這種延遲的情況，在瀏覽器在合理情況下可能會發生前就使用該連線了。「避免成本多次往返任何來源」稽核可協助您發掘使用 rel=preconnect 的機會！
rel=preconnect 的建議來源清單。當跨來源資產的延遲時間減少時，使用者會察覺事物移動的速度更快。透過這項新的 Lighthouse 稽核功能，您可以學習使用 rel=preconnect 實現上述目標的新機會。
動畫內容使用影片格式
GIF 動畫非常大，如果不是數 MB 的資料，往往會耗用至少數百 KB。如果您關心載入效能，將這些 GIF 轉換為影片是最適當的做法。幸好，使用影片格式製作動畫內容稽核。
如果您的網站包含超過 100 KB 的 GIF，這項稽核會自動標記這些 GIF，並引導您將 GIF 轉換成影片以及如何嵌入這些 GIF。Imgur 等網站將 GIF 轉換為影片，大幅改善了載入效能。此外，如果網站採用的是計量付費頻寬的代管方案，光是可能就能節省的費用。
網站字型載入期間，所有文字仍會顯示
載入網頁的網頁字型時，瀏覽器通常會在字型載入之前顯示隱藏文字。這種現象，稱為「Flash of Invisible Text (FOIT)」(Flash 隱形文字)，雖然從設計的角度來看可能比較好，但這實際上卻有問題。因轉譯而無法顯示的文字必須等到轉譯並可見後，才能讀取。若是高延遲和/或高頻寬連線，代表並缺少使用者體驗的核心部分。可能導致網頁無法盡快如期顯示有意義的內容，導致出現效能顯著的效能問題。好的，「網頁字型載入期間所有文字保持可見」稽核可協助您在網站上找出修正此問題的機會！
如果 Lighthouse 在應用程式中發現導致文字轉譯延遲的網路字型，有幾個可能的解決方法。您可以使用 font-display CSS 屬性和/或字型載入 API，控製文字算繪方式。如要進一步瞭解，請考慮參閱「字型載入策略的完整指南」，這是 Zach Perateman 撰寫的出色指南，是最適合字型載入的一大重點。
統合的 CSS 和 JavaScript
既然網頁效能一直是值得關注的事項，我們也建議採用「壓縮」這項技術。可大幅縮減文字型資源的大小，進而有助於載入效能。不過，您很容易忽視這項最佳化作業，特別是在建構程序無法為您處理這項作業的情況下。「Minify CSS」和「Minify JavaScript」稽核功能會在目前頁面上編譯未壓縮的資源清單。接著，您可以手動壓縮這些檔案，或是擴增建構系統來代您採取行動。
未使用的 CSS 規則
因為網站如果過於冗長，重構就是必須開始建構。這類入侵來源有一個未使用的 CSS 規則，不僅網站運作不再需要，但依然會佔用頻寬。為了方便起見，未使用的 CSS 規則稽核會顯示網頁上哪些 CSS 資源包含未使用的 CSS。
如果 Lighthouse 在網頁上發現未使用的 CSS，可以透過幾種方式移除 CSS。 UnCSS 是一種公用程式，可自動為您執行這項作業 (但必須謹慎使用)。還有一種手動方法需要使用開發人員工具中的程式碼涵蓋率面板。不過請注意，某個網頁上可能不會使用的 CSS。另一種做法是將 CSS 分割為多個範本專用檔案，只在必要時載入。無論您決定採用什麼方法，Lighthouse 都會隨時通知您 CSS 供應商營運速度是否快慢。
試試 Lighthouse 功能！
如果您對這些全新稽核功能感到期待，請更新 Lighthouse 並開始試用！
- Lighthouse Chrome 擴充功能應會自動更新，但您可以使用
chrome://extensions手動更新。 - 在開發人員工具中，您可以透過稽核面板執行 Lighthouse。Chrome 大約每 6 週會更新一次，因此可能無法使用一些較新的稽核項目。如果您想要使用最新的稽核項目，可以下載 Chrome Canary 來執行最新的 Chrome 程式碼。
- 針對節點使用者：執行
npm update lighthouse；如果您在全域安裝 Lighthouse，則執行npm update lighthouse -g。
特別感謝 Kayce Basques、Patrick Hulce、Addy Osmani 和 Vinamrata Singal 提供寶貴的意見回饋，這些意見都大幅改善了本文的品質。