什麼是消極式載入？

什麼是消極式載入？

消極式載入是一種等到需要時再載入網頁某些部分（尤其是影像）的技術。瀏覽器不會一次載入所有內容（稱為「積極式」載入），而是在使用者以需要某資源的方式進行互動之前不請求該資源。如果實施得當，消極式載入可以加快頁面載入時間。

這種類型的載入被稱為「消極式載入」，因為它鼓勵網路瀏覽器拖延。當顯示消極式載入網頁時，瀏覽器本質上會說，「我將等到真正需要的時候再載入這些影像。」而當顯示一個積極式載入的網頁時，瀏覽器採取相反的態度：「我會馬上處理一切！」雖然拖延有時在現實世界中帶有負面含義，但在這種情況下，它通常更有效。

例如，一篇部落格文章可能在頁面頂部有一張影像，在底部附近有一張圖表。閱讀部落格文章的人可能會在幾分鐘內到達文本底部，因此瀏覽器會等到讀者捲動到該部分時再載入圖表。這樣，頁面一開始載入得更快，因為瀏覽器載入的是一張影像而不是兩張。

消極式載入影像如何運作？

使用者導覽通常是消極式載入影像的觸發點。特別是，當使用者在頁面上向下捲動時，這會告訴瀏覽器載入出現在那裡的影像。

網頁載入時，使用者看到的部分稱為「頭版畫面」，而使用者尚未看到的部分稱為「非頭版畫面」。*頭版畫面影像需要立即載入， 否則會影響使用者體驗。但是使用者在向下捲動之前不會看到非頭版畫面影像。因此，非頭版畫面影像可以使用消極式載入。

*「fold」（對折線）是什麼意思？ 「頭版畫面」和「非頭版畫面」起源於報紙版面。報紙通常水平對折，前半部分（對折線上方的區域）是讀者首先看到的。當該詞彙套用至 Web 配置時，「對折線」是使用者螢幕的底部。

如何實作影像的消極式載入

實現消極式載入的一種方法是在影像標籤中使用 HTML 屬性載入。新增 loading="lazy"，如以下範例所示，告訴瀏覽器等到使用者捲動靠近它時再載入影像：

<img src="example.com/image"alt="example image" width="100" height="100" loading="lazy">

Web 開發人員還可以使用程式設計框架來實作更複雜的消極式載入。Angular 通常用於此目的。JavaScript 庫 React 也支援消極式載入。

Cloudflare Mirage 是另一種實作消極式載入的方式。除了自動調整影像大小外，Mirage 還充當消極式載入器，僅按需載入影像。Cloudflare Mirage 功能適用於 Pro 和商業自助服務方案的 Cloudflare 客戶，以及企业方案客戶。

還有哪些其他頁面資源可以使用消極式載入？

• JavaScript：JavaScript 被稱為呈現阻礙資源——意味著瀏覽器在載入 JavaScript 代碼之前無法呈現頁面。JavaScript 代碼可以分成更小的模組，在需要時載入，從而減少需要執行 JavaScript 的頁面的載入時間（瞭解更多）。
• CSS：CSS 也是一種呈現阻礙資源。將 CSS 檔案拆分為僅在必要時載入的多個檔案有助於減少阻止瀏覽器呈現頁面其餘部分的時間。非阻礙 CSS 檔案應該有自己的連結，並新增一個 media 屬性來告訴瀏覽器何時載入它們（瞭解更多）。
• iframe：iframe 用於將來自外部源的內容內嵌到網頁中。iframe 標記可以針對影像包含與上面所述相同的 HTML loading 屬性。

消極式載入有哪些優勢？

更快的頁面載入：在其他條件相同的情況下，檔案較小的網頁載入速度更快。使用消極式載入，網頁開始時會小於其完整大小，因此載入速度更快。快速的 Web 效能有很多好處，包括更好的 SEO、更高的轉換率和更好的使用者體驗。

沒有不必要的內容：假設頁面載入了多個非頭版畫面影像，但使用者在向下捲動之前退出了頁面。在這種情況下，用於傳遞影像的頻寬以及瀏覽器請求和呈現影像所花費的時間基本上都被浪費了。相反，消極式載入確保這些影像僅在必要時載入。這節省了時間和處理能力，並且可以為網站擁有者節省資金，因為使用的頻寬更少。

消極式載入有哪些缺點？

使用者請求資源的速度可能比預期的快：例如，如果使用者快速向下捲動頁面，他們可能需要等待影像的載入。這可能對使用者體驗產生負面影響。

與伺服器的額外通訊：當使用者與頁面互動時，瀏覽器可能不得不向網站的伺服器傳送多個內容請求，而不是一次請求所有頁面內容。使用內容傳遞網路 (CDN) 可以最大限度地減少這種潛在的缺陷，因為影像由 CDN 快取，並且瀏覽器不必一直向來源伺服器傳送請求來擷取它們。

瀏覽器需要處理額外代碼：如果開發人員在網頁中新增幾行 JavaScript 來告訴瀏覽器如何消極式載入頁面資源，這會增加瀏覽器需要載入和處理的代碼量。如果效率低下，這種輕微的額外載入和處理時間可能會超過消極式載入所節省的時間。

什麼是積極式載入？

積極式載入是同時或盡快載入所有網頁資源。某些使用積極式載入的應用程式可能會顯示「正在載入」屏幕。複雜、代碼量大的 Web 應用程式（例如線上遊戲）可能更喜歡使用積極式載入。

開發人員還可以如何提高網頁的速度？

許多因素會影響 Web 效能，但以下三個步驟是加快網站速度的良好起點：

1. 使用 CDN：當網路內容被快取在 CDN 中時，無論是否使用消極式載入，與來源伺服器的通訊都被保持在最低限度。CDN 還能更快地將內容傳遞給使用者，因為它們通常比來源伺服器更接近使用者。
2. 最佳化影像：即使使用消極式載入，過大的影像也會影響效能。盡可能減少影像檔案大小有助於確保影像快速載入。
3. 縮製代碼：縮製是在不改變其功能的情況下從 CSS 和 JavaScript 代碼中移除所有不必要字元的過程。這包括移除空白字元、註釋和分號。縮製減少了代碼檔案的大小，提高了載入速度。

查看提高網頁效能的更多方法：提高網站速度的技巧