第三方 JavaScript 成效

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

Milica Mihajlija
Milica Mihajlija

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

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

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

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

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

效能

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

網路

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

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

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

轉譯

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

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

處理方式

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

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

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