找出速度緩慢的第三方 JavaScript

利用 Lighthouse 和 Chrome 開發人員工具提升效能偵察技巧。

Milica Mihajlija

開發人員通常無法控制網站載入的第三方指令碼。您必須先執行一些偵測工作，找出網站載入速度變慢的原因，才能針對第三方內容進行最佳化。🕵️

在這篇文章中，您將瞭解如何使用 Lighthouse 和 Chrome 開發人員工具，找出緩慢的第三方資源。這篇文章將逐一介紹越來越完善的技巧，最適合搭配運用。

如果只有 5 分鐘

Lighthouse 效能稽核可協助您發掘加快頁面載入速度的機會。較慢的第三方指令碼可能會出現在「減少 JavaScript 執行時間」和「避免嚴格的網路酬載」稽核之下的「診斷」部分。

如何執行稽核：

1. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
2. 按一下「Lighthouse」分頁標籤。
3. 按一下「行動裝置」。
4. 勾選「成效」核取方塊。(您可以清除「稽核」部分中的其他核取方塊)。
5. 按一下「Simulated Fast 3G, 4x CPU Crashdown」。
6. 勾選「清除儲存空間」核取方塊。
7. 按一下「執行稽核」。

第三方使用情形

Lighthouse 的「第三方使用」稽核功能會顯示網頁使用的第三方供應商清單。本總覽有助您進一步瞭解整體情況，並找出不必要的第三方程式碼。這項稽核功能已推出 Lighthouse 擴充功能，而 Chrome 第 77 版很快就會在開發人員工具中加入這項功能。

使用啟動產生器產生的第三方供應商名稱。任何與實際新創公司的類似之處，都只是巧合。

縮短 JavaScript 執行時間

Lighthouse 的「縮短 JavaScript 執行時間」稽核會醒目顯示需要較長時間剖析、編譯或評估的指令碼。勾選「顯示第三方資源」核取方塊，即可找出大量耗用 CPU 的第三方指令碼。

避免耗用大量網路酬載

Lighthouse 避免使用大量網路酬載稽核功能會找出可能會減慢網頁載入時間的網路要求 (包括來自第三方的要求)。當網路酬載超過 4,000 KB 時，稽核會失敗。

在 Chrome 開發人員工具中封鎖網路要求

Chrome 開發人員工具的網路要求封鎖功能可讓您查看網頁在無法使用特定指令碼、樣式表或其他資源時的行為。找出懷疑可能影響成效的第三方指令碼後，請封鎖對這些指令碼的要求，以評估載入時間的變化。

如何啟用要求封鎖功能： 1. 按下「Control + Shift + J 鍵」(在 Mac 上則是「Command + Option + J 鍵」) 開啟開發人員工具。 1. 按一下「網路」分頁標籤。 1. 在「網路」面板中的任何要求上按一下滑鼠右鍵。1. 選取「封鎖要求網址」。

開發人員工具導覽匣中會顯示「要求封鎖」分頁。您可以在該頁面管理已封鎖的要求。

如何評估第三方指令碼的影響：

1. 使用「網路」面板測量網頁載入時間。如要模擬實際狀況，請開啟網路節流和「CPU 節流功能」。(在連線速度較快和桌上型電腦硬體上，昂貴的腳本對手機造成的影響可能較不如預期)。
2. 封鎖您認為有問題的第三方指令碼網址或網域。
3. 重新載入網頁，重新評估在沒有封鎖第三方指令碼的情況下，需要多久時間才能載入。

雖然速度應該會提升，但有時候封鎖第三方指令碼可能沒有效果。在這種情況下，請減少封鎖的網址清單，直到隔離導致速度緩慢的網址為止。

請注意，進行三次以上的測量並查看中位數值可能會產生較穩定的結果。由於第三方內容有時會在每次載入網頁時擷取不同的資源，因此這種方法可讓你更準確地估算結果。開發人員工具現在支援「效能」面板中的多個錄製內容，讓操作流程更加簡便。