優化第三方腳本以提高網絡性能

通過通過DevTools或Lighthouse識別其目的並刪除非必需的腳本，審核和優先考慮第三方腳本。 2。使用異步，延遲或延遲非關鍵腳本根據用戶交互，以提高負載性能。 3。使用標籤管理器，例如通過使用條件觸發器最小化標籤，並在後備方面加載GTM，從而明智地使用Google Tag Manager。 4。利用資源提示，例如關鍵第三方域的預連續連接和DNS-prefetch，以加快連接，而不會阻止渲染。 5。監視第三方腳本對TBT，LCP和CLS等核心網絡生命的影響，並使用SpeedCurve或Caliber（例如Cum Curve或Caliber）設置性能預算。 6.當允許減少開銷並改善緩存時，請考慮自我託管或代理第三方腳本，同時保持謹慎的兼容性。優化第三方腳本需要智能加載策略，持續審核和測量，以保持站點速度和用戶體驗而無需犧牲功能。

在現代網絡開發中，第三方腳本（例如分析，廣告，聊天小部件和社交插件）幾乎是不可避免的。但是，如果不仔細管理，它們可能會嚴重傷害您網站的性能。關鍵是在不犧牲速度，用戶體驗或核心網絡生命的情況下使用它們。這是有效優化第三方腳本的方法。

1。審核並確定您實際需要的東西

在優化之前，請確切了解您的網站上正在運行哪些第三方腳本。

• 使用瀏覽器DevTools（網絡選項卡）或燈塔或WebPagetest之類的工具來標識所有第三方請求。
• 對它們進行分類：分析，營銷，客戶支持，廣告等。
• 問：每個腳本是否必不可少？它直接支持業務目標嗎？
• 刪除任何過時的，多餘的或低價值的。

提示：僅僅因為幾個月前添加了腳本並不意味著它仍然需要。定期審核（每季度或兩年一次）有助於控制膨脹。

2。推遲或延遲非關鍵腳本

許多第三方腳本不需要立即加載。延遲它們可以大大提高負載性能。

• 在腳本標籤上使用async或defer屬性：
  • async ：並行加載腳本並儘快執行（適用於分析等獨立腳本）。
  • defer ：並行加載，但要等到HTML解析完成（更適合與DOM相互作用的腳本）。
• 基於用戶行為的懶負載非必需腳本：
  • 僅在用戶滾動或在聊天按鈕附近徘徊後加載聊天小部件。
  • 將廣告腳本延遲到可見主內容後。

例子：

 <！ - 加載後加載分析 - >
<script>
  window.addeventlistener（&#39;load&#39;，（）=> {
    const script = document.createelement（&#39;script&#39;）;
    script.src =&#39;https://third-party.com/widget.js&#39;;
    document.body.body.appendchild（腳本）;
  }）;
</script>

3。明智地使用標籤經理（但不要濫用）

諸如Google Tag Manager（GTM）之類的工具使管理第三方腳本的管理更加容易，但是如果被濫用，它們可能會成為性能陷阱。

• 優點：集中控制，更輕鬆的更新，有條件的觸發器。
• 缺點： GTM本身是第三方腳本；通過它加載太多標籤可以延遲執行。

最佳實踐：

• 最小化每個頁面上啟動的標籤數量。
• 使用觸發條件（例如，僅在結帳頁面上加載Facebook像素）。
• 考慮異步加載GTM並使用超時後備。

4。利用資源提示和策略性預付

幫助瀏覽器準備第三方資源，而無需阻止渲染。

• preconnect告訴瀏覽器建立與第三方域的早期連接：

   <link rel =“ proponnect” href =“ https://analytics.example.com”>

• dns-prefetch早日解決DNS（比預先連接輕）：

   <link rel =“ dns-prefetch” href =“ https://ads.thirdparty.com”>

  僅將其用於關鍵的第三方。太多會浪費資源。

  ---

  5。監控影響並設定績效預算

  您無法改善未衡量的東西。

  • 跟踪第三方腳本如何影響：
    • 總阻塞時間（TBT）
    • 最大的內容塗料（LCP）
    • 累積佈局偏移（CLS）
  • 設定績效預算：例如，“第三方腳本不得超過100毫秒的阻止時間。”
  • 使用真實的用戶監視（朗姆酒）工具，查看腳本在現實情況下的行為方式。

  SpeedCurve或Caliber等工具可以幫助您可視化第三方影響。

  ---

  6.在可能的情況下考慮自我託管或代理

  一些第三方腳本可以通過您自己的領域進行自主或代理。

  • 減少DNS和頂部連接。
  • 避免跨原生蛋白處罰。
  • 允許捆綁或提供更好的緩存策略。

  注意：並非所有供應商都允許這樣做，如果您不同步版本，則更新可能會中斷。

  ---

  優化第三方腳本並不是要完全消除它們 - 這是關於智能加載，連續監視和無情的優先級。即使是小型更改，例如推遲聊天小部件或添加preconnect ，也可以刮掉數百毫秒的加載時間。

  基本上：減少加載，以後加載，並始終測量。

  以上是優化第三方腳本以提高網絡性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！