第三方 JavaScript 成效

瞭解第三方 JavaScript 對效能的影響，以及如何避免網站速度變慢。

Milica Mihajlija

第三方 JavaScript 通常是指內嵌於您網站中的指令碼，如下所示：

• 不是你撰寫的內容
• 透過第三方伺服器提供

網站會將這些指令碼用於多種用途，包括：

• 社群媒體分享按鈕
• 影片播放器內嵌
• Chat 服務
• 廣告 iframe
• 數據分析和指標指令碼
• 實驗的 A/B 測試指令碼
• 輔助程式庫 (例如日期格式、動畫和功能程式庫)

第三方指令碼雖然提供了強大的功能，但該片段並不詳盡。這類指標也會影響隱私權、安全性和網頁行為，因此可能會對效能造成特別問題。

效能

大量 JavaScript 可能會導致效能降低。但第三方 JavaScript 通常不在您的控管範圍內，因此可能會產生其他問題。

網路

設定連線需要時間，而且傳送過多要求至多個伺服器會造成速度變慢。安全連線所需的時間較長，其中可能涉及 DNS 查詢、重新導向，以及多次往返處理使用者要求的最終伺服器。

第三方指令碼經常會對網路造成負擔，例如：

• 觸發其他網路要求
• 提取尚未最佳化的圖片和影片
• HTTP 快取不足，會強制頻繁擷取網路資源
• 資源的伺服器壓縮不足
• 由不同第三方嵌入項目提取的多個架構和程式庫執行個體

轉譯

第三方 JavaScript 的載入方式非常重要。如果在關鍵轉譯路徑中同步設定，將延遲系統剖析文件的其他部分。

重要字詞： 重要轉譯路徑包含瀏覽器顯示第一個畫面內容所需的所有資源。

如果第三方發生伺服器問題而無法提供資源，則轉譯作業會遭到封鎖，直到要求逾時為止 (可能的間隔為 10 到 80 秒)。您可以透過 WebPageTest 單點故障測試測試並模擬這個問題。

注意： A/B 測試指令碼通常也可能會導致轉譯作業延遲。指令碼多半會一直阻斷內容顯示，直到處理完畢為止，即使是非同步 A/B 測試指令碼也是如此。

處理方式

使用第三方 JavaScript 通常不可避免，但您可以採取以下做法，將不良影響降到最低：

• 選擇第三方資源時，建議選用可傳送最少程式碼，但仍提供您所需功能的資源。
• 為第三方內容使用成效預算，以便控管費用。
• 請勿使用兩家供應商提供的相同功能。你可能不需要兩個代碼管理工具或兩個數據分析平台。
• 定期稽核並清除多餘的第三方指令碼。

要瞭解如何稽核第三方內容並有效載入，以提升效能和使用者體驗，請參閱其他文章「善用第三方資源」。