本頁面由 Cloud Translation API 翻譯而成。

Lighthouse：提升網站速度

Kayce Basques

Sofia Emelianova

總覽

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

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

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

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

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

教學課程目標

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

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

必要條件

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

您不需要瞭解負載效能。

簡介

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

步驟 1：稽核網站

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

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

設定

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

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

專案名稱會從 tony 變更為隨機產生的名稱。您已取得自己的程式碼可編輯副本。稍後，您會變更此程式碼。
在編輯器分頁的底部，依序點選「預覽」>「在新視窗中預覽」。示範內容會在新分頁中開啟。這個分頁將稱為「示範」分頁。網站可能需要一段時間才會載入。
在示範旁邊開啟開發人員工具。

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

建立基準

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

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

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

處理報表錯誤

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

含有錯誤的報表。

瞭解報表資訊

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

整體成效分數。

指標

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

「指標」專區。

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

螢幕截圖

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

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

商機

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

「商機」部分。

點按商機即可瞭解詳情。

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

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

診斷

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

診斷專區。

通過稽核

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

「通過的稽核」專區。

步驟 2：實驗

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

啟用文字壓縮

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

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

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

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

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

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

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

按一下「bundle.js」bundle.js並開啟「Headers」bundle.js分頁。
在「Response Headers」區段中搜尋 content-encoding 標頭。您應該會看到這表示 bundle.js 並未壓縮。資源「已壓縮」時，這個標頭是通常設為 gzip、deflate 或 br。如需相關說明，請參閱指令輕鬆分配獎金

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

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

...
const fs = require('fs');
const compression = require('compression');

app.use(compression());
app.use(express.static('build'));
...

請務必將 app.use(compression()) 放在 app.use(express.static('build')) 前方。

注意：一般來說，您需要透過 npm i -S compression 等工具安裝 compression 套件，但系統已為您完成此步驟。
等待 Glitch 部署新版網站。左下角顯示開心的表情符號代表部署成功。

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

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

「Size」資料欄現在應該會顯示兩個不同的文字資源值 (例如 bundle.js)。bundle.js 的 269 KB 上限值是透過網路傳送的檔案大小，而 1.4 MB 的下限值是未壓縮的檔案大小。
bundle.js 的「Response Headers」部分現在應包含 content-encoding: gzip 標頭。

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

開啟「Lighthouse」面板，然後在頂端的動作列中按一下「Perform an audit...」。
沿用先前的設定，然後按一下「分析網頁載入」。

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

實際應用的文字壓縮

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

調整圖片大小

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

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

在報表中，按一下「使用合適的圖片大小」，查看應調整大小的圖片。但這 4 張圖片似乎比必要尺寸多。
返回編輯器分頁，開啟 src/model.js。
以 const dir = 'small' 取代 const dir = 'big'。這個目錄包含已調整大小的相同圖片副本。
再次稽核網頁，瞭解這項變更對載入效能的影響。

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

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

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

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

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

排除會妨礙顯示的資源

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

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

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

按一下「排除禁止轉譯資源」即可查看封鎖的資源： lodash.js和jquery.js。
根據您的作業系統，按下下列指令來開啟指令選單：
- Mac：Command + Shift + P 鍵
- 在 Windows、Linux 或 ChromeOS 上，按下 Control + Shift + P 鍵
開始輸入 Coverage，然後選取「顯示涵蓋範圍」。

「涵蓋率」分頁會在側欄中開啟。
按一下「重新整理」。「涵蓋率」分頁概略說明 bundle.js、jquery.js 和 lodash.js 中在網頁載入時會執行多少程式碼。

這張螢幕截圖顯示大約 74% 和 30% 的 jQuery 和 Lodash 檔案不會分別使用。
按一下 jquery.js 資料列。開發人員工具會在「Sources」面板中開啟檔案。一行程式碼狀態就會是綠色長條程式碼行旁邊顯示紅色列代表程式碼未執行，因此載入網頁時絕對不需要。
稍微捲動 jQuery 程式碼。有些行會「執行中」其實只是留言。透過能夠移除註解的壓縮器執行這個程式碼，是另一種降低。

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

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

按一下「網路」分頁標籤，然後再次開啟「指令選單」。
開始輸入 blocking，然後選取「Show Request Blocking」。「要求封鎖」分頁隨即開啟。
按一下「新增模式」圖示，在文字方塊中輸入 /libs/*，然後按下 Enter 鍵確認操作。
重新載入網頁。jQuery 和 Lodash 要求以紅色標示，表示已遭到封鎖。網頁仍會載入並互動，因此看起來根本不需要！
按一下「移除所有模式」以刪除 /libs/* 的封鎖模式。

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

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

返回編輯器分頁，開啟 template.html。

刪除對應的 <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>

等待網站重新建構並重新部署。
透過「Lighthouse」面板再次稽核頁面。整體分數應該又會有所提升。

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

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

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

減少主執行緒的工作量

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

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

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

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

行動裝置的硬體限制通常比筆電或電腦還多，因此您可以透過這些設定，體驗使用效能較低的裝置載入網頁的情形。
按一下「重新整理」。開發人員工具會重新載入頁面，然後以視覺化方式呈現載入頁面需要完成的所有操作。這個視覺化圖表稱為「追蹤記錄」trace。

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

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

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

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

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

React 中有許多 User Timing 評估資料，看來 Tony 的應用程式使用的是 React 的開發模式。切換到 React 的生產模式應該能輕鬆享有一些簡單的效能。
再按一下「時機」即可收合該部分。
瀏覽「主要」部分。這個部分會依時間順序顯示主要執行緒活動的記錄。由左至右。Y 軸 (由上至下) 顯示事件發生的原因。

在這個範例中，Evaluate Script 事件會導致 (anonymous) 函式執行，進而導致 __webpack__require__ 執行，接著導致 ./src/index.jsx 執行，依此類推。
向下捲動至「Main」(主要) 部分底部。使用架構時多數上方的活動是架構所致，而架構通常掌控權您應用程式造成的活動通常會顯示在底部。

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

注意：雖然框架的呼叫通常不受控，但有時您可能會以導致框架執行效率不佳的方式建構應用程式。調整應用程式結構以有效率地使用架構，可減少主執行緒的工作量。因此，您需要深入瞭解架構的運作方式，並瞭解如何在自己的程式碼中做出哪些變更，才能提高這個架構的使用效率。
開啟底部的「Bottom-Up」分頁。這個分頁會分析耗時最長的活動，如果「Bottom-Up」部分沒有顯示任何資料，請按一下「Main-Up」部分的標籤。

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

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