<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
延遲載入第三方資源
如果內嵌的第三方資源建構不良，可能會大幅減緩網頁載入速度。如果這些資源不是必要的，或位於折頁下方 (也就是使用者必須捲動畫面才能查看)，延遲載入是改善網頁速度和繪製指標的好方法。這樣一來，使用者就能更快取得主頁面內容，享有更優質的體驗。
延遲載入位於需捲動位置的內容。
一種有效的方法是在主要網頁內容載入後，延後載入第三方內容。廣告是採用這種做法的理想選擇。
廣告是許多網站的重要收入來源，但使用者是為了內容而來。透過延遲載入廣告並加快主要內容的放送速度，您就能提高廣告的整體可視率百分比。舉例來說，MediaVine 改用延遲載入廣告後，網頁載入速度提升了 200%。Google Ad Manager 說明文件說明如何延遲載入廣告。
您也可以設定只在使用者首次捲動至網頁該部分時，才載入第三方內容。
Intersection Observer 是一種瀏覽器 API，可有效偵測元素進入或離開瀏覽器檢視區的時間，您可以使用此 API 實作這項技術。lazysizes 是一種常見的 JavaScript 程式庫，可用於延後載入圖片和 iframes。支援 YouTube 嵌入和小工具。Intersection Observer 也提供選用支援。
使用 loading 屬性來延後載入圖片和 iframe，是 JavaScript 技巧的絕佳替代方案，而且最近在 Chrome 76 中也已推出！
最佳化第三方指令碼的放送方式
以下是一些建議的策略，可協助您改善第三方指令碼的使用方式。
第三方 CDN 代管服務
第三方供應商通常會為其代管的 JavaScript 檔案提供網址，通常是位於內容傳遞網路 (CDN) 中。這種方法的好處是，您可以快速開始使用 (只要複製及貼上網址即可)，而且沒有維護成本。第三方供應商會處理伺服器設定和指令碼更新。
但由於這些檔案與其他資源不在相同來源，因此從公開 CDN 載入檔案會產生網路費用。瀏覽器需要執行 DNS 查詢、建立新的 HTTP 連線，並在安全來源上與供應商的伺服器執行 SSL 握手。
使用第三方伺服器的檔案時，您幾乎無法控制快取。依賴他人快取策略，可能會導致不必要的情況下，從網路重新擷取指令碼。
自行代管第三方指令碼
自行代管第三方指令碼可讓您進一步控管指令碼的載入程序。自行代管可讓您：
縮短 DNS 查詢和往返時間。
改善 HTTP 快取標頭。
善用 HTTP/2 或較新的 HTTP/3。
舉例來說，Casper 透過自行代管 A/B 測試指令碼，成功縮短 1.7 秒的載入時間。
不過，自行代管有一個重大缺點：指令碼可能會過時，且不會在 API 變更或安全性修復時自動更新。
使用服務工作者將第三方伺服器的指令碼快取
您可以使用服務工作者來快取第三方伺服器的程式碼，做為自助代管的替代方案。這樣一來，您就能進一步控管快取，同時保留第三方 CDN 的優點。
您可以控制從網路重新擷取指令碼的頻率，並建立載入策略，在使用者到達網頁上的關鍵互動前，限制對非必要第三方資源的要求。有了 preconnect，您就能及早建立連線，並協助降低網路成本。
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2019-08-14 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2019-08-14 (世界標準時間)。"],[],[],null,[]]
