如果第三方指令碼拖慢您的載入速度 此時有兩種方法可以改善效能：
- 如果無法替網站帶來明確價值，請將它移除。
- 最佳化載入程序。
本文說明如何最佳化第三方指令碼的載入程序 可用下列技術：
- 在
<script>標記上使用async或defer屬性 - 正在與必要來源建立早期連線
- 延遲載入
- 最佳化提供第三方指令碼的方式
使用 async 或 defer
因為同步指令碼延遲 DOM 建構和轉譯時，建議您一律載入第三方指令碼 ，除非指令碼在網頁轉譯前執行。
async 和 defer 屬性會告訴瀏覽器可以進行剖析
在背景載入指令碼時利用 HTML，然後執行指令碼
並在載入後立即顯示該元件這樣一來，指令碼下載就不會阻斷 DOM 建構或網頁
也就是讓使用者在所有指令碼完成之前都能看到網頁。
載入中。
<script async src="script.js">
<script defer src="script.js">
async 和 defer 屬性的差別在於瀏覽器
就會執行指令碼
async
含有 async 屬性的指令碼會在之後第一個商機執行
下載完成後
load 事件。也就是說
async 指令碼可能會按照
這些程式碼會出現在 HTML 中這也意味著，如果參與者
並在剖析器運作期間完成下載。
async 的指令碼仍可封鎖
HTML 剖析。defer
含有 defer 屬性的指令碼會在 HTML 剖析完畢後執行
完成，但在此之前
DOMContentLoaded
活動。defer 可確保指令碼會按照 HTML 和
就不會封鎖剖析器
defer 的指令碼會等待執行直到
瀏覽器就會剖析 HTML 檔案。- 如果需要在載入時提早執行指令碼，請使用
async上傳資料集之後，您可以運用 AutoML 自動完成部分資料準備工作 - 使用
defer處理較不重要的資源，例如下方的影片播放器 摺疊位置
使用這些屬性可大幅加快網頁載入速度。例如： Telegraph 延遲所有指令碼 包括廣告和數據分析，並縮短廣告載入時間平均 四秒鐘
及早與必要來源建立連線
想節省 100 至 500 毫秒的時間， 和早建立關係 重要的第三方來源
兩種 <link> 類型：
preconnect 和 dns-prefetch 可為你提供下列協助：
preconnect
<link rel="preconnect"> 會告訴瀏覽器網頁要建立
且希望程序馬上啟動
。當瀏覽器向已預先連結的來源要求資源時，
就會立即開始下載。
<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch
<link rel="dns-prefetch> 會處理一小部分的內容
<link rel="preconnect"> 控制代碼。建立連線需要 DNS
查詢和 TCP 握手以及用於安全來源的 TLS 交涉。
dns-prefetch 會指示瀏覽器在明確呼叫特定網域的 DNS 之前，只解析該網域的 DNS。
preconnect 提示僅適用於最重要的連線。適用對象
較不重要的第三方網域，請使用 <link rel=dns-prefetch>。
<link rel="dns-prefetch" href="http://example.com">
「dns-prefetch」的瀏覽器支援
與 preconnect 支援團隊稍有不同
因此 dns-prefetch 可以做為不支援瀏覽器的備用方案
preconnect。請使用獨立的連結標記，安全地執行這項作業：
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
延遲載入第三方資源
嵌入的第三方資源只要符合以下條件，就可能大幅拖慢網頁載入速度 或是建造。如果這些變數沒有影響，或位於需捲動位置 (也就是說，如果使用者必須捲動畫面才能看到)，延遲載入是很實用的做法 加快網頁速度及繪製指標如此一來，使用者就能取得主要網頁內容 並且提供更優異的使用體驗
其中一個有效的做法是在主頁面結束後延遲載入第三方內容 內容載入。採取這種做法時，廣告就是不錯的選擇。
對許多網站來說，廣告是重要的收入來源 內容。延遲載入廣告並加快放送主要內容的速度 提高廣告的整體可視度百分比例如 MediaVine 已切換至延遲載入廣告 網頁載入速度加快 200%Google Ad Manager 會提供 瞭解如何延遲載入廣告。
您也可以設定只在使用者首次捲動至 該網頁的相應部分
十字路口觀察者
是瀏覽器 API，可有效偵測元素何時進入或離開
來實作這項技巧。
lazysizes 是熱門的 JavaScript 程式庫
用於延遲載入圖片和 iframes。
支援 YouTube 嵌入式
小工具。
並提供選用支援
「Intersection Observer」簡介
針對延遲載入圖片和 iframe 使用 loading 屬性
是 JavaScript 技術的完美替代選擇，最近這項功能已成為
適用於 Chrome 76！
改善第三方指令碼的放送方式
以下提供一些建議策略，協助您充分運用 第三方指令碼
第三方 CDN 代管
第三方供應商常常提供 JavaScript 檔案網址。 主機，通常位於內容傳遞網路 (CDN)。 這個方式的好處在於您馬上就能上手 複製並貼上網址，不必支付維護費用。 第三方廠商會負責處理伺服器設定和指令碼更新。
但因為資源的來源與其他資源不同 從公用 CDN 載入檔案會產生網路費用。瀏覽器 會執行 DNS 查詢、建立新的 HTTP 連線 和供應商的伺服器執行 SSL 握手。
使用第三方伺服器中的檔案時，您通常不太能控管 快取功能。依賴他人的快取策略可能會導致指令碼 過度頻繁地從網路重新擷取。
自行託管的第三方指令碼
自行託管第三方指令碼 指令碼的載入程序。自行託管具有以下優點：
舉例來說，Casper 管理的帳戶為 1.7 秒 自行託管 A/B 測試指令碼，縮短載入時間。
不過，自行代管會有一大缺點：指令碼可能會過期， 系統不會自動更新 API 或安全性修補程式。
使用 Service Worker 快取第三方伺服器的指令碼
您可以使用服務工作站來快取第三方伺服器的指令碼 做為自行託管的替代方案讓您能進一步控管快取 同時保有第三方 CDN 的優點
您可以控制從網路重新擷取指令碼的頻率，
制定載入策略，針對非必要的要求
第三方資源，直到使用者在網頁上發生重要互動為止。
使用 preconnect，及早與他人交流，並提供協助
降低網路成本