Lighthouse:提升網站速度

Sofia Emelianova
Sofia Emelianova

總覽

使用 Lighthouse 面板,對網站進行全面審查。並透過「Lighthouse」面板產生報表,取得自家網站的下列深入分析資料:

  • 成效
  • 無障礙設定
  • 最佳做法
  • 搜尋引擎最佳化 (SEO)

...還有許多其他指標。

以下教學課程可協助您開始在 Chrome 開發人員工具中使用 Lighthouse

如要進一步瞭解 Lighthouse 可改善網站品質的其他方式,請參閱 Lighthouse 說明文件。

教學課程目標

本教學課程將介紹如何使用 Chrome 開發人員工具,找出加快網站載入速度的方法。

請繼續閱讀,或觀看這份教學課程的影片版本:

必要條件

您應具備基本的網站開發經驗,這類似於 這部 Introduction to Web Development 課程

您不需要瞭解負載效能。

簡介

我是 Tony,東尼在貓社會中非常有名。他打造了 網站,讓粉絲知道他的最愛是什麼 也就是食物他的粉絲很喜歡這個網站,但 Tony 不斷聽到網站載入速度太慢的抱怨。Tony 請你協助他加快網站速度。

Tony 貓。

步驟 1:稽核網站

決定改善網站載入效能時,請務必先思考 稽核。這項稽核有兩個重要功能:

  • 會建立基準來協助您評估後續的變化。
  • 這項工具會提供實用訣竅,說明哪些變更最能帶來影響。

設定

首先,您需要為 Tony 的網站設定新的作業環境,以便日後進行變更:

  1. 在 Glitch 上重混網站的專案。系統會在新分頁中開啟新專案。 這個分頁將稱為「編輯器」分頁

    點選「重混」後的原始來源和編輯器分頁。

    專案名稱會從 tony 變更為隨機產生的名稱。您已取得自己的程式碼可編輯副本。稍後,您會變更此程式碼。

  2. 在編輯器分頁的底部,依序點選「預覽」>「在新視窗中預覽」。示範內容會在新分頁中開啟。這個分頁將稱為「示範」分頁。網站可能需要一段時間才會載入。

    「Demo」分頁。

  3. 在示範旁邊開啟開發人員工具

    開發人員工具和試用版

,瞭解如何調查及移除這項存取權。

建立基準

基準是指網站在提升效能之前的成效。

  1. 開啟「Lighthouse」面板。可能位於 更多面板後方。

    Lighthouse 面板。

  2. 請將 Lighthouse 報表的配置設定與螢幕截圖中的設定相符。以下是 不同選項:

    • 清除儲存空間。勾選這個核取方塊即可在每次稽核前,清除與該頁面相關的所有儲存空間。如要稽核新訪客的網站訪客體驗,請將這項設定保持開啟。如想保留回訪體驗,請停用這項設定。
    • 啟用 JS 取樣。這個選項預設為關閉。開啟後,這項功能會在效能追蹤記錄中加入詳細的 JavaScript 呼叫堆疊,但可能會減慢報表產生速度。如要查看追蹤記錄,請依序點選 > [Tools] (工具) 選單 >。產生「Lighthouse」報表後,查看未節流的追蹤記錄沒有 (左側) 和 (右側) JS 取樣的效能追蹤記錄。
    • 模擬節流 (預設) 。這個選項會模擬在行動裝置上瀏覽網頁的情況。名稱是「模擬」因為 Lighthouse 在稽核過程中並未真的節流。而是會推測網頁在行動裝置環境下載入網頁所需的時間。另一方面,「開發人員工具節流 (進階)」設定實際上會節流您的 CPU 和網路,需要較長的稽核程序才能有所取捨。
    • 依序前往「模式」> 「導覽 (預設)」。這個模式會分析單一網頁載入作業,這正是本教學課程所需的內容。詳情請參閱三種模式
    • 裝置 > 行動裝置。行動選項會變更使用者代理程式字串並模擬行動裝置 檢視區域電腦版選項基本上只是停用行動版變更。
    • 類別 > 效能。啟用單一類別可讓 Lighthouse 只根據相應的稽核組合產生報告。如果想查看這些類別提供的最佳化建議類型,請保持啟用。停用不相關的類別,可稍微加快稽核程序。
  3. 按一下「分析網頁載入作業」。10 到 30 秒後,「Lighthouse」面板會顯示網站成效的報告。

    關於網站效能的 Lighthouse 報告。

處理報表錯誤

如果 Lighthouse 報表顯示錯誤訊息,請嘗試執行「示範」分頁 無痕式視窗中未開啟其他分頁。這可確保您在清除狀態下執行 Chrome。Chrome 擴充功能尤其強大 幹擾稽核程序

含有錯誤的報表。

瞭解報表資訊

報表上方的數字是網站的整體成效分數,之後, 這個數字應該會上升。分數越高表示成效越佳。

整體成效分數。

指標

向下捲動至「指標」部分,然後按一下「展開檢視畫面」。如要閱讀指標的說明文件,請按一下「瞭解詳情...」

「指標」專區。

本節提供網站效能的量化評估資料。 每項指標都能讓您深入瞭解成效不同面向。例如:First Contentful Paint 指出內容首次顯示在螢幕上的時間,這是使用者作業應用程式 對網頁載入的感知度,「互動存留時間」則代表網頁載入的時間點 似乎已就緒,可處理使用者互動。

螢幕截圖

接下來是一系列螢幕截圖,顯示網頁載入時的樣貌。

載入期間網頁的螢幕截圖。

商機

接下來的「商機」部分將提供改善這個網頁載入速度的具體訣竅 才需進行

「商機」部分。

點按商機即可瞭解詳情。

進一步瞭解文字壓縮機會。

按一下「瞭解詳情...」查看說明文件,瞭解商機的重要性,並明確 提供修正建議。

診斷

「診斷」專區會進一步瞭解影響網頁品質的因素 載入時間。

診斷專區。

通過稽核

「已通過的稽核項目」部分會顯示網站的正確做法。按一下即可展開該部分。

「通過的稽核」專區。

步驟 2:實驗

Lighthouse 報表的「商機」部分會針對如何改善網頁的 才需進行在本節中,您將對程式碼集實作建議變更,並稽核 ,以評估對網站速度的影響。

啟用文字壓縮

您的報告指出,啟用文字壓縮是大幅改善 評估網頁的成效

文字壓縮是指把文字檔案大小縮小 (或壓縮) 再傳送到 更是如此傳送資料夾以縮減資料夾大小之前,您可以對資料夾進行壓縮。

啟用壓縮功能之前,可以先透過以下兩種方法手動檢查 都會經過壓縮

開啟「網路」面板,並勾選 「設定」> 使用大型要求資料列

「Network」面板中的「Size」欄,顯示大型要求列。

每個「大小」儲存格都會顯示兩個值。最上層的值是已下載資源的大小。底部值是未壓縮資源的大小。如果這兩個值相同, 資源透過網路傳送時不會經過壓縮。在這個範例中, bundle.js 的頂端和底部值皆為 1.4 MB

您也可以檢查資源的 HTTP 標頭,以檢查是否有壓縮:

  1. 按一下「bundle.js」bundle.js並開啟「Headers」bundle.js分頁。

    「標頭」分頁。

  2. 在「Response Headers」區段中搜尋 content-encoding 標頭。您應該會看到 這表示 bundle.js 並未壓縮。資源「已壓縮」時,這個標頭是 通常設為 gzipdeflatebr。如需相關說明,請參閱指令 輕鬆分配獎金

不要再提供說明。現在就來做點調整!加入幾個字,即可啟用文字壓縮功能 程式碼行:

  1. 在編輯器分頁中開啟 server.js,然後新增下列兩行 (醒目顯示的) 行:

    ...
    const fs = require('fs');
    const compression = require('compression');
    
    app.use(compression());
    app.use(express.static('build'));
    ...
    
  2. 請務必將 app.use(compression()) 放在 app.use(express.static('build')) 前方。

    正在編輯 server.js。

  3. 等待 Glitch 部署新版網站。左下角顯示開心的表情符號代表部署成功。

使用先前學習到的工作流程,手動檢查壓縮功能是否正常運作:

  1. 返回「Demo」分頁並重新載入網頁。

    「Size」資料欄現在應該會顯示兩個不同的文字資源值 (例如 bundle.js)。bundle.js269 KB 上限值是透過網路傳送的檔案大小,而 1.4 MB 的下限值是未壓縮的檔案大小。

    「大小」欄現在會顯示文字資源的兩個不同的值。

  2. bundle.js 的「Response Headers」部分現在應包含 content-encoding: gzip 標頭。

    「Response Headers」部分現在包含內容編碼標頭。

再次在網頁上執行 Lighthouse 報表,評估文字壓縮對頁面載入的影響 成效:

  1. 開啟「Lighthouse」面板,然後在頂端的動作列中按一下 加入訂單「Perform an audit...」

    「執行稽核」按鈕。

  2. 沿用先前的設定,然後按一下「分析網頁載入」

    啟用文字壓縮後的 Lighthouse 報告。

太厲害了!看起來像是進度。您的整體效能分數應該會提高,表示網站的速度變快了。

實際應用的文字壓縮

大多數伺服器其實都做類似的簡單的修正來啟用壓縮功能!搜尋看看 設定您要用來壓縮文字的伺服器。

調整圖片大小

新報表指出,正確調整圖片大小是另一個重大商機。

調整圖片尺寸可縮減圖片的檔案大小,進而加快載入時間。如果使用者在寬度為 500 像素的行動裝置螢幕上查看圖片,傳送寬度為 1500 像素的圖片就毫無意義。最好是傳送 500 像素寬的圖片。

  1. 在報表中,按一下「使用合適的圖片大小」,查看應調整大小的圖片。但這 4 張圖片似乎比必要尺寸多。

    「適當大小的圖片」相關詳情商機

  2. 返回編輯器分頁,開啟 src/model.js

  3. const dir = 'small' 取代 const dir = 'big'。 這個目錄包含已調整大小的相同圖片副本。

  4. 再次稽核網頁,瞭解這項變更對載入效能的影響。

    調整圖片大小後的 Lighthouse 報告。

這項變更似乎只影響整體成效分數,不過 看起來不會清楚顯示的分數代表節省使用者的網路數據用量。總計 舊相片的大小約為 6.1 MB,現在約只有 633 KB。 您可以在「網路」面板底部的狀態列中查看這項資訊。

調整圖片大小前後傳輸的資料量。

在真實世界中調整圖片大小

如果是小型應用程式,只要按照以下方式執行一次大小調整,應該就足夠了。但對於大型應用程式,這顯然無法擴充。以下是管理大型應用程式中圖片的一些策略:

  • 在建構過程中調整圖片大小。
  • 在建構過程中建立每個圖片的多種尺寸,然後在程式碼中使用 srcset。 瀏覽器會在執行階段選擇最適合執行裝置的尺寸。 請參閱相對大小的圖片
  • 使用 Image CDN,讓圖片能在提出要求時動態調整大小。
  • 請至少將每張圖片最佳化。這通常可以節省大量費用。最佳化是指 透過特殊程式執行圖片,此程式能縮減圖片檔的大小。如需更多提示,請參閱「Essential Image Optimization」。

排除會妨礙顯示的資源

最新一份報告指出,淘汰禁止轉譯資源是大好機會,

禁止轉譯資源是外部 JavaScript 或 CSS 檔案,瀏覽器必須下載 才能顯示網頁目標是只執行核心 CSS 和 JavaScript 正確顯示網頁所需的程式碼。

第一項工作是找出不需在網頁載入時執行的程式碼。

  1. 按一下「排除禁止轉譯資源」即可查看封鎖的資源: lodash.jsjquery.js

    進一步瞭解「減少禁止轉譯資源」商機。

  2. 根據您的作業系統,按下下列指令來開啟指令選單

    • Mac:Command + Shift + P
    • 在 Windows、Linux 或 ChromeOS 上,按下 Control + Shift + P
  3. 開始輸入 Coverage,然後選取「顯示涵蓋範圍」

    從 Lighthouse 面板開啟指令選單。

    「涵蓋率」分頁會在側欄中開啟。

    「涵蓋範圍」分頁。

  4. 按一下「重新整理」。「涵蓋率」分頁概略說明 bundle.jsjquery.jslodash.js 中在網頁載入時會執行多少程式碼。

    涵蓋範圍報表。

    這張螢幕截圖顯示大約 74% 和 30% 的 jQuery 和 Lodash 檔案不會分別使用。

  5. 按一下 jquery.js 資料列。開發人員工具會在「Sources」面板中開啟檔案。一行程式碼 狀態就會是綠色長條程式碼行旁邊顯示紅色列代表程式碼未執行, 因此載入網頁時絕對不需要。

    在「來源」面板中檢視 jQuery 檔案。

  6. 稍微捲動 jQuery 程式碼。有些行會「執行中」其實只是 留言。透過能夠移除註解的壓縮器執行這個程式碼,是另一種降低 。

簡單來說,處理自己的程式碼時,「Coverage」分頁可協助您分析程式碼。 ,且只提供載入網頁所需的程式碼。

是否還需要 jquery.jslodash.js 檔案才能載入頁面?「要求封鎖」分頁可以 會顯示沒有可用的資源時會發生什麼情況

  1. 按一下「網路」分頁標籤,然後再次開啟「指令選單」
  2. 開始輸入 blocking,然後選取「Show Request Blocking」。「要求封鎖」分頁隨即開啟。

    「要求封鎖」分頁。

  3. 按一下「新增模式」圖示 加入訂單,在文字方塊中輸入 /libs/*,然後按下 Enter 鍵確認操作。

    新增模式,以封鎖對「libs」的任何要求目錄。

  4. 重新載入網頁。jQuery 和 Lodash 要求以紅色標示,表示已遭到封鎖。 網頁仍會載入並互動,因此看起來根本不需要!

    「Network」面板顯示要求已遭封鎖。

  5. 按一下 。「移除所有模式」以刪除 /libs/* 的封鎖模式。

一般來說,「請求封鎖」分頁可用於模擬網頁在無法使用任何指定資源時的行為。

接著,請從程式碼中移除這些檔案的參照,然後再次檢查網頁:

  1. 返回編輯器分頁,開啟 template.html
  2. 刪除對應的 <script> 標記:

    <head>
        ...
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/libs/lodash.js"></script>
        <script src="/libs/jquery.js"></script>
        <title>Tony's Favorite Foods</title>
    </head>
    
  3. 等待網站重新建構並重新部署。

  4. 透過「Lighthouse」面板再次稽核頁面。整體分數應該又會有所提升。

    移除禁止轉譯資源後產生的 Lighthouse 報告。

最佳化現實世界的關鍵轉譯路徑

「關鍵轉譯路徑」是指載入網頁時所需的程式碼。一般來說 可以在網頁載入期間只傳送重要程式碼,然後延遲載入,藉此加快網頁載入速度 其他東西

  • 您不太可能找到移除的指令碼,但經常會發現 許多指令碼不需在網頁載入期間請求,因此可以改為請求 以非同步方式載入物件請參閱使用非同步或延遲
  • 如果您採用的是架構,請檢查該架構是否已啟用實際工作環境模式。這個模式可能會使用以下功能 做為「樹狀晃動」,以消除阻斷重要轉譯的非必要程式碼。

減少主執行緒的工作量

最新報表的「商機」部分會列出一些可省下的費用,但如果您捲動頁面 在「診斷」部分後,發現最大的瓶頸似乎是主執行緒太多 活動。

瀏覽器在顯示頁面時,會執行大部分的作業 (例如剖析) 至主執行緒 並執行 HTML、CSS 和 JavaScript

您可以使用「Performance」(效能) 面板分析主執行緒在 載入網頁,並設法延後或移除不必要的作業

  1. 開啟「效能」>。「擷取設定」並將「網路」設為「慢 3G」,並將「CPU」設為「6 倍減速」

    「Performance」(效能) 面板中的設定 CPU 和網路節流

    行動裝置的硬體限制通常比筆電或電腦還多,因此您可以透過這些設定,體驗使用效能較低的裝置載入網頁的情形。

  2. 按一下「重新整理」。開發人員工具會重新載入頁面,然後以視覺化方式呈現載入頁面需要完成的所有操作。這個視覺化圖表稱為「追蹤記錄」trace

    「效能」面板的網頁載入追蹤記錄。

追蹤記錄會依時間順序顯示活動,從左至右。每秒 20 個百分位數 可讓您概略瞭解每秒影格數、CPU 活動和網路活動

追蹤記錄的「總覽」部分。

「總覽」部分顯示的黃色牆面表示 CPU 正忙於編寫指令碼活動。 這樣一來,您或許就能減少 JavaScript 工作量,進而加快網頁載入速度。

調查追蹤記錄,找出減少 JavaScript 工作的方法:

  1. 按一下「時機」部分將其展開。

    時間部分。

    React 中有許多 User Timing 評估資料,看來 Tony 的應用程式使用的是 React 的開發模式。切換到 React 的生產模式應該能輕鬆享有一些簡單的效能。

  2. 再按一下「時機」即可收合該部分。

  3. 瀏覽「主要」部分。這個部分會依時間順序顯示主要執行緒活動的記錄。 由左至右。Y 軸 (由上至下) 顯示事件發生的原因。

    「主要」部分。

    在這個範例中,Evaluate Script 事件會導致 (anonymous) 函式執行,進而導致 __webpack__require__ 執行,接著導致 ./src/index.jsx 執行,依此類推。

  4. 向下捲動至「Main」(主要) 部分底部。使用架構時 多數上方的活動是架構所致,而 架構通常 掌控權您應用程式造成的活動通常會顯示在底部。

    挖掘比特幣活動。

    在這個應用程式中,名為 App 的函式似乎造成大量呼叫 mineBitcoin 函式。聽起來阿尼可能使用粉絲的裝置來採集加密貨幣...

  5. 開啟底部的「Bottom-Up」分頁。這個分頁會分析耗時最長的活動,如果「Bottom-Up」部分沒有顯示任何資料,請按一下「Main-Up」部分的標籤。

    「由下而上」分頁。

    「由下而上」部分只會顯示您目前所進行的活動或活動群組資訊 舉例來說,如果您點選其中一個 mineBitcoin 活動,自下而上部分只會顯示該活動的資訊。

    「自我時間」欄會顯示直接在每個活動中花費的時間。在此案例中,大約 82% 的主執行緒時間花在 mineBitcoin 函式上。

確認使用正式環境模式及減少 JavaScript 活動的時間 有助於加快網頁載入速度從實際工作環境模式開始:

  1. 在「編輯器」分頁中開啟 webpack.config.js
  2. "mode":"development" 變更為 "mode":"production"
  3. 等待新的建構作業部署完畢。
  4. 再次稽核網頁。

    將 Webpack 設定為使用正式環境模式後產生的 Lighthouse 報告。

移除對 mineBitcoin 的呼叫,減少 JavaScript 活動:

  1. 在「編輯器」分頁中開啟 src/App.jsx
  2. constructor 中對 this.mineBitcoin(1500) 的呼叫執行註解排除。
  3. 等待新的建構作業部署完畢。
  4. 再次稽核網頁。

移除不必要的 JavaScript 工作後顯示的 Lighthouse 報告。

一如往常,還需要減少「Largest Contentful Paint」和「Cumulative Layout Shift」指標。

減少主執行緒的實際運作情況

一般來說,你可以透過「成效」面板瞭解網站活動的做法, 並尋找方法移除不必要的活動

如果您想使用類似 console.log() 的方法,可以使用 User Timing API 任意標記應用程式生命週期的某些階段,以便追蹤每個階段的時間長度 發展階段

摘要

  • 無論您何時著手改善網站的載入效能,請務必先進行稽核。本稽核有助於確立基準,並說明如何使用 改善成效
  • 每次變更一次,並在每次變更後稽核此頁面, 瞭解這類獨立的變更對效能有何影響。

後續步驟

在自己的網站上執行稽核!如果在解讀報表時需要協助,或想尋找改善載入效能的方法,請查看開發人員工具社群尋求協助的所有方法:

  • 請前往 developer.chrome.com 存放區回報這份文件的錯誤。
  • 如要回報開發人員工具的錯誤報告,請前往 Chromium 錯誤
  • 前往郵寄清單討論功能和異動內容,不要將郵寄清單用於: 與我們聯絡。請改用 Stack Overflow。
  • 前往 Stack Overflow 網站查看開發人員工具的一般使用說明。如要回報錯誤,請一律使用 Chromium 錯誤。
  • 請透過 @ChromeDevTools 透過推文與我們聯絡。