預載入（Preload）是一種強大的優化技術，可以顯著改進關鍵效能指標，例如Core Web Vitals。前面我們介紹過關於預取DNS查詢甚至預連線到域的文章。預載入是這些概念的一個更強大的擴充套件，因為它使您能夠提前下載整個資源。
在這篇文章中，我們來看看：
- 預載入資源提示如何工作
- 關於何時使用（以及何時不使用）的指南
- 在您自己的網站上實施預載入提示時要遵循的最佳實踐清單。
預載入資源提示的工作原理
預載入是一種資源提示，它告訴瀏覽器在瀏覽器確定它需要發出請求之前請求內容。這可以提高效能，因為當瀏覽器確實意識到它需要請求一個已經預載入的資源時，它已經在那裡了。
讓我們從一個簡化的示例開始，如瀑布圖所示：
瀏覽器首先下載引用樣式表style.css的HTML文件。在樣式表中，我們指定應該使用的自定義字型，如下所示：
這是後期發現資源的完美示例。此瀏覽器在完成下載和解析style.css之前不知道它需要請求robots.woff。我們可以通過檢視瀑布中的Initiator列來確認這一點，它告訴我們是什麼檔案導致瀏覽器發出請求。HTML文件有一個Other的啟動器， 因為我們在位址列中輸入了它。style.css的發起者是HTML文件，因為瀏覽器在HTML中找到了<link>標籤。啟動器robots.woff是CSS檔案，因為瀏覽器在HTML中使用的CSS檔案中找到了樣式的@font-face 宣告。
我們可以通過在HTML檔案的<head>中新增預載入資源提示來優化這一點：
<link href="resources/roboto.woff" as="font" crossorigin="anonymous" />
這指示瀏覽器主動下載roboto.woff，並建立這個瀑布：
有很多事情需要注意：
- 瀏覽器現在與style.css並行下載robots.woff。
- robots.woff的發起者是HTML檔案而不是CSS。
- 所有主要效能指標都更快，並且我們減少了關鍵渲染路徑的長度。
現實世界的例子
這非常適合演示——現在讓我們看看使用預載入資源提示的實際好處。
Addy Osmani分享了Tinder如何提高其漸進式Web應用程式 (PWA) 的效能。作為PWA，Tinder擁有大型JavaScript包，可以動態載入到其他JavaScript包中。由於這些附加包是由執行的指令碼動態載入的，因此瀏覽器在JavaScript程式碼執行之前無法發現它們。我在下面的Addy部落格文章中註釋了一個螢幕截圖：
您可以看到主要供應商捆綁包如何載入3個額外的JavaScript檔案。通過預載入這些附加指令碼，Tinder：
- 載入時間減少1秒
- 將他們的第一個繪製指標降低了大約50%
Ivan Akulov對流行的網路應用Notion做了一些有趣的效能分析。Notion需要相同的基本API呼叫才能執行，並且這些API呼叫發生在主包載入之後。 預載入這些API呼叫將頁面呈現指標提高了10%。
在Splunk，我們也有第一手經驗。2020年初，我們與一家主要媒體客戶合作，該客戶擁有大量用於各種第三方域的 JavaScript。通過分析他們的站點並實施諸如預連線和預載入之類的資源提示，我們將互動時間縮短了4.9秒，即37%。
何時使用預載入資源提示
在上面的案例研究中，您會注意到一個模式：
與所有資源提示一樣，預載入允許您利用您對應用程式的瞭解來優化資源的交付，這比瀏覽器本身無法做到的更好。
具體來說，您可以告訴瀏覽器在請求資源之前請求它。告訴瀏覽器下載它自己會發現的東西是很浪費的。例如，如果您在HTML的<head>頂部附近有style.css，則沒有理由使用預載入資源提示。瀏覽器已經會發現它。
預載入是 後期發現資源的理想選擇。後期發現的資源是需要在瀏覽器訪問它們之前下載或執行一個或多個其他資源鏈的資源。例如：
- 在CSS檔案中引用的字型
- JavaScript動態載入的關鍵資源
- 僅在進行API呼叫後出現的影象或內容
不正確地使用預載入會損害效能
鑑於上述令人印象深刻的收穫，我知道您一定在想什麼：
如果預載入資源提示可以提高整體效能和使用者體驗，我為什麼不在頁面上預載入所有關鍵資源？
不幸的是，錯誤地使用預載入實際上會損害效能。為什麼？這很簡單：瀏覽器使用大量複雜的邏輯來決定需要下載什麼以及何時下載，因此頁面可以儘快呈現並響應訪問者。
使用預載入的站點本質上是要求覆蓋瀏覽器通常會執行的操作。如果出於三個原因不小心使用，這可能是不同效能問題的根源：
- 預載入資源提示是強制性的。 雖然其他型別的資源提示，如預連線或 DNS 預取提示，瀏覽器可以選擇遵循，但需要執行預載入提示。現代瀏覽器使用極其複雜的邏輯來下載關鍵資源。預載入——可能比任何其他型別的資源提示都多——對瀏覽器操作的干擾最大，必須小心使用。
- 預載入會耗盡資源。瀏覽器限制了它對單個域的併發請求數。預載入資源會“用完”您認為瀏覽器需要的請求槽和下載頻寬，而不是瀏覽器原本用於下載它知道它需要的資源的資源。
- 預載入發生在最關鍵的時刻。預載入通常發生在頁面載入開始附近，這是瀏覽器最關鍵的時間。它專注於下載關鍵渲染路徑上的資源，即開始渲染頁面所需的資源。太多或不必要的預載入會影響瀏覽器做正確的事情，從而降低效能。
現在讓我們看看一些常見的錯誤。
過多的預載入提示
採用預載入提示的最常見錯誤之一是使用過多的提示。通常，網站預載入的資源不應超過3-4個。除此之外，您還試圖超越瀏覽器，這很少是一個好主意。原因如下：
首先，預載入最適用於對頁面也很重要的後期發現資源。擁有多個瀏覽器也不容易發現的關鍵資源通常是更大設計問題的徵兆。
例如，一個站點可能正在預載入六種字型。首屏內容是否需要所有六種字型？一個可變粗細字型檔案可以代替嗎？另一種選擇是通過 <style> 標記直接在HTML中包含font-face: 定義。使用這種方法，那些字型檔案不再是後期發現的資源。瀏覽器可以立即檢視需要六個字型檔案中的哪一個（如果有）並快速獲取它，而無需預載入提示。
避免過多預載入提示的第二個原因是技術債務。頁面的預載入越多，這些預載入中的一個越有可能無助於加速頁面的初始載入和互動性。每個都代表了更多的技術債務，以維護和確保預載入的資源對該頁面仍然至關重要。
預載入未使用的內容
另一個常見的錯誤是看到頁面甚至沒有使用的內容的預載入。當網站在其模板中使用公共標頭時，我經常會看到這種情況。開發人員可能正在優化他們的主頁或關鍵登入頁面，併為關鍵字型或 JavaScript 檔案包含 <link rel=”preload”>。他們錯誤地將其放在公共標題中，即使這些資源沒有在網站的其他地方使用。
幸運的是，現代瀏覽器會在控制檯中顯示警告：
在所有關鍵頁面上查詢這些警告可能很乏味。相反，一個好的代理是檢視站點的CSS和JavaScript覆蓋率分析。如果一個站點正在載入大量未使用的CSS或JS，這通常意味著站點所有者正在為整個站點使用大型、粗粒度的通用包，而不是為其特定模板使用較小的目標包。因此，任何預載入也可能過於粗略，並且在不需要時跨頁面進行預載入。
預載入非關鍵內容
另一個常見錯誤是預載入對首屏內容的呈現和互動性不重要的內容。通常，如果您有太多預載入，那是因為您正在預載入非關鍵內容。
- 你是在預載入影象嗎？除非它是英雄形象，而且那個英雄形象確實是後來發現的資源，否則可能沒有必要。
- 你在預載入JavaScript嗎？如果是這樣，提供CTA點選等互動性是否至關重要？為什麼 JavaScript 不能被延遲或非同步載入？
- 您是否正在預載入字型？它是被這個頁面使用的，還是這個預載入發生在一個通用的模板標題中並且字型沒有在任何地方使用？
- 你是在預載入視訊嗎？為什麼？預載入視訊幾乎總是一個壞主意，因為根據定義，它不是關鍵內容。考慮在 <video> 標籤上使用poster屬性。
一般來說，如果 <link rel=”preload” as=””> 屬性是除了樣式、指令碼或字型之外的東西，它通常是非關鍵的，需要額外的審查。
預載入不存在的內容
預載入忽略的最終表現是預載入導致404 – 永遠不會好。關鍵渲染路徑中的404錯誤。但是，預載入內容的404是最差的。你篡奪了瀏覽器的正常行為，延遲了瀏覽器知道它需要的資源，全部用於下載無效內容。
預載入並不總是正確的工作提示
Preload 與其他資源提示的不同之處在於您指定了完整的URL。通常，您不能依賴該URL保持不變，或者無法知道完整的URL將是什麼。例如：
- 如果頁面正在載入來自其他部門的JavaScript庫，則它下載的其他JavaScript庫可能會發生變化。使用 preload 會建立依賴項，您需要在這些依賴項中與載入來自附加JavaScript的URL的更改保持同步。
- 如果您使用評論，您可能不知道載入了哪些使用者頭像影象，但您知道它們都來自www.gravatar.com。
- 如果您使用的是廣告交易平臺，您可能不知道廣告競價的路徑，但您知道您會向ads.pubmatic.com發出請求
這些是使用預連線或DNS預取的絕佳機會。請記住：使用提前完成較少工作的資源提示比使用預載入和出錯的效能要好得多。
預載入審計的最佳實踐
正如我們所展示的，使用預載入資源提示有很多好處，但如果使用不當，也會出現許多損害效能的陷阱。這意味著稽覈頁面如何使用資源提示以確保您遵循所有最佳實踐非常重要。
首先，確定頁面當前正在使用的所有預載入資源提示。您將需要在基本HTML頁面中查詢 <link rel=”preload”> 標記，以及Link: HTTP標頭，其中也可以包含資源提示。還要記住，包含資源提示的連結標頭可以出現在基於HTML頁面之外的其他響應中！
獲得預載入列表後，問自己以下問題：
- 該資源是後期發現的資源還是瀏覽器已經發現了它？
- 預載入的資源對於首屏內容的初始繪圖或互動性是否至關重要？如果沒有，請將其刪除。
- 您是否預載入超過3-4個資源？如果是這樣，您是否測試過這些預載入是否能提高效能指標？
- 預載入的資源是不是字型、CSS或JavaScript檔案？如果是這樣，它可能對頁面並不重要，很可能應該被刪除。
- 該頁面是否使用了此預載入資源？如果沒有，請將其刪除。
- 此預載入資源是否返回4xx或5xx錯誤？如果是這樣，請將其刪除
- 資源提示是否包含在其他頁面使用的公共標題中？該資源是否用於所有這些頁面？如果沒有，請僅在需要它的頁面上包含預載入提示。
與所有效能優化一樣，您應該始終在之前和之後進行測量，以確保更改實際上提高了效能。是的，理論上，預載入提示應該加快速度。但是現代網頁非常複雜，包含數百種資源，而現代瀏覽器更加複雜，無法快速處理這些資源以提供最佳體驗。信任但要驗證。
評論留言