什麼是延遲載入以及它如何改善用戶體驗？

如果大多數網站所有者忽略了網站的一個方面，那就是頁面載入時間。 您花費大量時間和金錢為我們的網站設計完美的設計，並添加不同類型的內容以保持訪客的參與。 但如果這還不足以將訪客轉化為用戶呢？

研究表明，網站載入時間每增加一秒，將訪客轉化為客戶的機會就會減少。 根據Portent 的說法，載入一秒鐘的轉換幾率為 40%，下一秒則降至 34%，三秒則降至 29%。 您可能想知道，“那麼解決方案是什麼？”

這就是延遲載入概念的用武之地。這是一種更快的載入網站的方式，而且不會犧牲內容的品質。

在本文中，我們將探討延遲載入、為什麼使用它以及它如何與其他方法比較。 讓我們開始吧！

目錄

• 什麼是延遲載入？
• 延遲載入的重要性
• 急切加載與延遲加載
• 延遲載入的工作原理
• 實施延遲載入

什麼是延遲載入？

延遲載入是一種節省時間的方法，僅載入您立即需要的網站部分。 此方法不是一次加載所有內容，這可能會很慢並且使用大量資源，而是一點一點地加載內容

不立即載入的圖像或影片通常具有佔位符元素，直到需要它們為止。 例如，延遲載入不會一次載入所有映像。 它僅加載您可以在螢幕上看到的內容。 除非您向下滾動，否則其餘部分不會加載

您無需等待所有內容加載完畢，而是可以立即查看螢幕上已有的內容。

專家提示：檢查延遲載入在各種瀏覽器和裝置上的工作情況。這是為了確保不存在任何相容性問題。

延遲載入的重要性

我們已經知道延遲載入可以幫助您提高轉換率。 但這並不是它的唯一好處。 以下是您應該在網站上實施延遲載入的一些其他原因。

優化效能

當有人造訪您的網站時，延遲載入會減少資料傳輸。 對於使用網速較慢且數據流量較小的行動裝置的人來說，這一點至關重要。

減少頻寬和伺服器負載

延遲載入可以節省資料並減少伺服器工作。 這可以透過在不需要時停止加載內容來降低網站所有者和用戶的成本。

改善搜尋引擎優化

像Google這樣的搜尋引擎非常重視快速加載的網站，以至於它成為了官方排名因素。 使用延遲載入技術，您可以提高頁面載入速度，降低跳出率，並使您的網站獲得更高的排名。

什麼是預加載？

預載與延遲載入完全相反。 它最初會立即載入所有必要的資源，包括媒體檔案、腳本和樣式。 這意味著所有必要的頁面元素都可以立即使用。 因此，當用戶滾動或互動時，不會產生額外的載入。

預先載入是過去使用的常規方法，至今許多網站仍在使用它。

儘管它很容易實現，但由於多種因素，急切加載已經變得不那麼重要了，包括：

增加網頁大小

現代網站使用更多的富媒體和互動部分。 這意味著平均網頁比以前大得多。 因此，急切載入可能會導致初始頁面載入時間更長。 特別是對於網路連線速度較慢的使用者。

對性能的負面影響

較長的頁面載入時間可能會損害重要的網站效能指標，例如首次內容繪製 (FCP)和最大內容繪製 (LCP)。 這些都是 SEO 和使用者體驗的關鍵。

行動用戶的崛起

隨著行動瀏覽的大量使用，從一開始就以超快的速度載入內容變得至關重要。

急切加載與延遲加載

以下是急切載入和延遲載入的快速比較：

延遲載入和預先載入是兩種不同的資源載入方法，各有優缺點。 然而，從當今的技術角度來看，延遲載入因其效率、效能優勢和更好的使用者體驗而被認為是大多數現代網站的首選技術。

延遲載入的工作原理

現在您已經知道為什麼延遲載入可以確保兩者之間獲得更好的結果，讓我們看看它是如何實現這一點的。

使用者導航和互動：延遲載入取決於使用者如何使用網頁。它通常在用戶滾動或移動滑鼠時啟動。 當他們滾動時，瀏覽器會猜測他們可以看到的區域需要新內容。 然後它開始載入這些資源。 延遲載入也可以從其他操作開始，例如點擊按鈕或將滑鼠懸停在項目上。

影像的技術實作：延遲載入對於不同類型的內容有不同的工作方式。對於非常常見的圖像，您通常會先顯示低品質的佔位符或簡單的載入圖示。 當使用者捲動到真實影像附近時，就會載入清晰、高品質的影像。 這樣，用戶就不必等待他們還看不到的圖像。

應用不同的網路資源：延遲載入是一種靈活的方法，可以用於各種元素，而不僅僅是映像。它同樣適用於影片、iframe，甚至需要大量腳本的元素。 僅在需要時載入這些元素意味著您可以大大提高頁面的載入速度並有效地管理您的資源。 這對於高清視訊等重資源尤其重要。

實施延遲載入

在這一部分中，我們將向您展示在網站上實施延遲載入的不同方法。

方法一——手動實現延遲加載

實現延遲載入的手動方式並不適合所有人。 它很複雜，您至少應該具有中級編碼知識。

為此，您將主要使用 HTML 和 JavaScript。 在開始之前，請確保您有權訪問 WordPress 網站的主題文件，並且有信心編輯 HTML 和 JavaScript。

以下是幫助您完成整個過程的詳細指南：

第 1 步：備份您的網站

在對主題檔案進行任何變更之前，請務必備份您的 WordPress 網站，以避免在出錯時遺失資料。

步驟2 ：編輯主題的functions.php文件

• 存取您的 WordPress 網站的檔案（使用主機控制面板中的 FTP 用戶端或檔案管理器）。
• 導航到/wp-content/themes/your-theme/並找到functions.php檔案。
• 開啟functions.php進行編輯。

步驟 3 ：新增延遲載入腳本

在functions.php中，新增一個函數來將JavaScript檔案排入佇列以進行延遲載入。 這是一個基本範例：

函數 add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

此程式碼假設您的主題目錄中的js資料夾中有一個名為lazy-load.js的 JavaScript 檔案。

第 4 步：建立 JavaScript 文件

• 在主題目錄的js資料夾中建立一個名為lazy-load.js的新檔案。
• 新增 JavaScript 來處理延遲載入。 這是使用IntersectionObserver 的基本範例：

document.addEventListener(“DOMContentLoaded”, function() {

讓lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if (視窗中的「IntersectionObserver」) {

讓lazyImageObserver = new IntersectionObserver（函數（條目，觀察者）{

條目.forEach（函數（條目）{

if (entry.isIntersecting) {

讓lazyImage = Entry.target;

懶惰影像.src = 懶惰影像.資料集.src;

lazyImage.classList.remove(“lazy”);

lazyImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach(函數(lazyImage) {

觀察（lazyImage）；

});

}

});

第 5 步：在 WordPress 中更新圖片標籤

修改圖像標籤以支援延遲載入。 在 PHP 模板中或直接在貼文/頁面中，變更圖片標籤，如下所示：

<img class=”lazy” src=”placeholder-image.jpg” data-src=”original-image.jpg” alt=”圖像描述”>

將placeholder-image.jpg替換為低解析度圖片或載入圖形，將original-image.jpg取代為實際圖片 URL。

專家提示：對延遲載入的影像使用響應式佔位符，以確保佈局保持穩定。

第 6 步：測試您的更改

• 如果您安裝了快取插件，請確保清除網站的快取。
• 然後，轉到您的網站並向下滾動到圖像應該延遲加載的部分。
• 花點時間看看滾動時圖像是否加載順利。

筆記

• 確保始終先在開發環境中進行測試，然後再在實際網站上進行測試。
• 執行此操作時請考慮建立子主題。 主題的更新可能會覆蓋您的變更。
• 對於影片或 iframe 等其他內容類型，可以使用類似的方法，其中src屬性替換為data-src屬性，並在視窗中透過 JavaScript 載入。

該技術是合併延遲載入的簡單方法。 如果您有更複雜的網站或特定要求，您可能想要探索更強大的解決方案或外掛程式。

方法2 – 使用WordPress外掛實現延遲加載

這是兩種方法中最簡單的一種，因為您可以使用 WordPress 外掛程式來安全地啟用延遲載入。 多個外掛程式可讓您執行此操作，但我們將在本範例中使用WP-Optimize 。 WP-Optimize 是一款功能強大的 WordPress 插件，可協助您提高網站速度並改善使用者體驗。

它提供了一種簡單易用的方法來將圖像、iframe 和視訊設定為延遲載入。 其內建的延遲加載功能會自動延遲 Web 資源加載，直到它們可見，從而顯著加快頁面加載時間。 然而，這是 WP-Optimize 的高級功能。

若要啟用該功能：

• 從 WordPress 管理儀表板開啟WP-Optimize > 圖片標籤
• 開啟延遲載入圖像子選項卡
• 從這裡，您可以為圖像和視頻/Iframe 啟用延遲加載

如果您需要停用某些圖像、背景圖像、影片或 iframe 的延遲加載，只需從此處啟用它即可。 您也可以選擇跳過某些影像類別。

之前和之後

我們測試了範例網站在實施延遲載入之前和之後的速度。 據 GTMetrix 稱，該網站的速度已經相當快，首次內容繪製 (FCP)載入時間為1.5 秒。

啟用延遲載入後，FCP 變成 344 毫秒，這比我們之前的速度快得多。 結果可能會有所不同，具體取決於頁面上的內容量，但在大多數情況下，您的 FCP 分數將會提高。

準備好加快頁面載入時間了嗎？

所以，就是這樣！ 我們討論了什麼是延遲加載，以及延遲加載對於現代網站的重要作用。 透過等待載入內容直到您需要它們，它可以使頁面加載速度更快，節省網路數據，並使瀏覽更流暢，尤其是在數據有限的手機上。

我們也提供了一些關於如何在 WordPress 中使用延遲載入的有用建議。 我們涵蓋了從使用程式碼自行完成到使用 WP-Optimize 等外掛程式的所有內容。

嘗試向您的網站添加延遲加載，並告訴我們它如何影響您的效能。 有疑問嗎？ 歡迎在評論中提問。

經常問的問題

延遲載入是好是壞？

延遲載入通常被認為是一種很好的做法，因為它有幾個好處。 它僅在需要時載入內容，有助於縮短網頁載入時間並增強使用者體驗。

UI 中的延遲載入是什麼？

UI 中的延遲載入是指僅當影像和影片等視覺元素位於（或靠近）使用者視窗時才載入它們的做法。

延遲載入會影響SEO嗎？

如果正確實施，延遲載入可以透過縮短頁面載入時間和增強用戶體驗來對 SEO 產生積極影響，這兩者都是重要的排名因素。

你應該延遲加載所有圖像嗎？

雖然延遲加載螢幕外的圖像是有益的，但對於頁面加載時立即可見的圖像則沒有必要。 立即載入這些圖像可以防止其顯示出現任何延遲。

延遲載入有哪些問題？

延遲載入的一些問題包括使用者滾動時的內容載入延遲、如果未正確實現搜尋引擎索引的潛在問題，以及對 JavaScript 的依賴（可能並非所有瀏覽器都支援 JavaScript）。