第三方 JavaScript 成效

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

Milica Mihajlija
Milica Mihajlija

第三方 JavaScript 通常是指嵌入網站的以下程式碼:

  • 不是由您撰寫
  • 由第三方伺服器提供

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

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

第三方指令碼可提供強大的功能,但這並非全部。也會影響隱私權、安全性和網頁行為,對成效也可能造成特別嚴重的影響。

成效

任何大量的 JavaScript 都可能降低效能。但由於第三方 JavaScript 通常不在您的控制範圍內,因此可能會帶來其他問題。

網路

設定連線需要時間,如果向多個伺服器傳送過多要求,就會導致速度變慢。安全連線的時間可能更長,因為這類連線可能涉及 DNS 查詢、重新導向,以及與處理使用者要求的最終伺服器進行多次來回連線。

第三方指令碼通常會增加網路開銷,例如:

  • 觸發其他網路要求
  • 提取未經最佳化的圖片和影片
  • HTTP 快取不足,導致系統必須頻繁擷取網路資源
  • 資源的伺服器壓縮不足
  • 由不同第三方內嵌項目所拉入的多個架構和程式庫例項

轉譯

第三方 JavaScript 的載入方式非常重要。如果在關鍵算繪路徑中同步完成,則會延遲剖析文件的其餘部分。

如果第三方發生伺服器問題,且無法提供資源,系統會在要求逾時前 (10 到 80 秒) 阻擋轉譯作業。您可以使用 WebPageTest 單點故障測試來測試及模擬這個問題。

因應做法

使用第三方 JavaScript 通常是不可避免的,但您可以採取一些措施來盡量減少不利影響:

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

如要瞭解如何稽核第三方內容並有效載入,以改善成效和使用者體驗,請參閱「最佳化第三方資源」一節的其他文章。