什麼是延遲加載？ 一個清晰的概念
已發表: 2021-07-12關於什麼是延遲加載的清晰概念。 如何應用延遲加載技術提高網站加載速度。 有哪些推薦的圖像延遲加載插件等等？
延遲加載是一種僅在需要時才加載圖像、視頻和其他媒體文件的技術（在這種情況下，頁面向下滾動到圖像）。
延遲加載被谷歌推廣。 谷歌已經在他們擁有的大部分高流量網站上實施了它。
這實際上是為您的用戶提高網站性能的好方法。
這是實現資源動態加載比預加載更好的方法，因為它本質上是惰性的，並且只在需要時加載資產。
當您向下滾動頁面時，將加載媒體文件，尤其是圖像。 通過減少對 HTML、CSS 和 JavaScript 資源的請求數量，這顯著減少了初始頁面加載時間。
延遲加載圖像始終可以使用 3rd 方插件來實現，但如果您對 HTML/CSS 代碼感到滿意，那麼在您現有的網站上實現它實際上非常簡單。
為什麼要向我的網站添加延遲加載？
長期以來，並行加載頁面上的所有元素是最佳實踐。 但是今天，用戶連接受限和移動網絡速度快的情況非常普遍。
出於這個原因，最好先只加載您需要的資源，然後在需要時再加載其他資源。
延遲加載還可以減少瀏覽器在頁面加載時需要完成的工作量。 這最終意味著您將為用戶獲得更快的頁面加載。
您可以通過多種方式在您的網站上實現延遲加載。 像任何技術一樣，每種方法都有一些優點和缺點。
如何在 WordPress 網站中添加延遲加載？
您可以通過添加一些簡單的 CSS 和 JavaScript 代碼將延遲加載添加到任何網站。 您還需要一點 HTML 標記。
但在這篇文章中，我將只討論 WordPress 延遲加載插件，它們可以讓您在 WordPress 網站上享受延遲加載圖像的優勢。
如何使用插件添加延遲加載？
有許多可用的 WordPress 插件可以一鍵自動將延遲加載功能添加到您的網站。
如果您想增加整體網站加載時間，我會推薦 Permatters speed optimize 插件。 該插件將優化您的網站以獲得更好的用戶體驗和性能。 它還具有一些附加功能，例如延遲加載、gzip 壓縮等……
如果您想弄髒代碼或有一些高級要求，那麼我會推薦其他以下插件。
WP Rocket 是最受歡迎的 WordPress 緩存插件之一。 它也是最流行的延遲加載圖像插件。 它將幫助您降低加載速度並增加總瀏覽量。 你可以閱讀 WP Rocket Review。
您還可以使用 Light Speed Cache 插件，這是 WordPress 用戶中另一個流行的插件。 它使您能夠為您的網站使用高級緩存規則，這有助於改善頁面加載時間並減少帶寬使用。
此外，上述插件有助於加載 iFrame。 為此，我向您推薦這些插件。
延遲加載 vs 動態加載 vs JavaScript 預加載 vs Eager 延遲加載
這四個術語之間的最大區別在於用戶首次訪問您的網站時會發生什麼。
延遲加載：通過延遲加載，資源根據需要加載（顧名思義）。 這意味著根據用戶的操作，某些元素可能根本不會加載。
動態加載：使用動態加載，您必須預先加載所有內容——即使它不是必需的。 因此，根據您必鬚髮送的數據量，這可能會顯著增加頁面加載時間——即使其中一些內容從未被任何人查看過。
JavaScript 預加載：
JavaScript 預加載是圖像延遲加載過程的重要組成部分。 它通過提供 HTML（和 CSS，如果您使用基於樣式的解決方案）來促進瀏覽器緩存。
它使用 AJAX 為頁面上的每個圖像提供單獨的文件。 這允許瀏覽器在完全加載之前開始下載圖像，從而增加可以通過慢速網絡連接或慢速客戶端計算機加載的圖像數量。
Eager 延遲加載：這類似於延遲加載，您將根據需要加載資源。 不同之處在於，使用 eager 方法，您不必擔心現在是否可以看到某些內容。 如果它已經加載了，那就太好了——否則就在必要時加載它。
了解 SEO 的延遲加載
有些人擔心延遲加載圖像會對 SEO 訪問其內容的能力產生負面影響。
谷歌在抓取你的網站時在緩存資源方面做得很好，所以如果你加載元素的方式隨著時間的推移保持快速並且不會經常變化，我認為任何人都不應該擔心影響他們的搜索發動機等級。
延遲加載和 CDN
業內有一些有用的 CDN 可以幫助您分發圖像和媒體文件。 這些服務中的大多數通過為您實現延遲加載功能來提供出色的用戶體驗。
Cloudflare CDN 是我想在其他 CDN 服務中強調的一項。
Cloudflare 是一個內容交付網絡，為其所有帳戶用戶提供免費和付費的 CDN。 它還通過實施頁面速度優化、HTTP/2 等一些高級策略來優化您的網站並提高安全性。 它還可以幫助您延遲加載網站圖像和媒體文件。
在桌面或移動設備中延遲加載：它如何影響 Google SEO？
延遲加載在桌面上已經存在了很長時間。 這是大多數主流瀏覽器都提供的功能，但也有一些功能（例如預加載和部分加載）並非對所有瀏覽器都可用。
但是，對於移動設備，延遲加載是您需要注意的事情。
將其視為 SEO 排名因素很重要，因為 Google 現在正在關注移動設備上的延遲加載圖像。
這裡的關鍵不僅僅是實現延遲加載，還要確保它以快速有效的方式加載資源。 如果沒有，您的搜索引擎排名可能會受到負面影響。
延遲加載不同大小的圖像
您應該關注延遲加載圖像的另一個原因是移動設備使用量的增加。
人們喜歡用手機瀏覽和搜索，但在點擊鏈接時它們的速度或準確度不高，因此擁有較大的圖像意味著人們可能會在完整圖像加載之前點擊離開。
因此，對於移動設備來說，擁有更小的圖像顯然會更好，即使這意味著需要加載更多的數據，但從長遠來看這是值得的，因為人們會點擊而不是完全離開你的網站。
延遲加載中使用了哪些框架？
有幾個選項可供您使用：
1. Picturefill（默認使用）
Picturefill 是一個為您的圖像提供延遲加載功能的腳本。 這個輕量級的 JavaScript 庫幾乎可以與所有主流瀏覽器一起使用，而且它也是響應式的。 因此，它會根據您使用的設備類型改變其行為。
2. LazyLoadJS（默認使用）
LazyLoadJS 是一個為您的圖像提供延遲加載功能的腳本，它非常輕量級並且適用於所有主要瀏覽器。 因此，您在使用時不必擔心任何問題。
它還具有多個隊列，以提高您網站的整體性能，並且非常易於使用——所有技能水平的開發人員都可以毫無問題地使用它。
3.LoadCSS（默認使用）
LoadCSS 是一個為您的樣式表提供延遲加載功能的腳本，這與其他僅處理圖像或視頻文件的庫不同。 這還將預加載 HTML 和 JavaScript。
4. SlimerJS（不可用）
SlimerJS 是一個為您的圖像提供延遲加載功能的腳本，它不使用任何 JavaScript 庫，但它確實有自己的 API，您可以使用它來配置圖像延遲加載的工作方式。
它也非常輕巧且快速，因此不會以任何方式影響您的網站性能。
延遲加載是否適用於背景圖像？
是的，它可以在背景圖像中使用。
結論
當涉及到 WordPress 和一般網站時，延遲加載是最未被充分利用的性能優化技術之一。
一旦你知道如何實現它就非常容易，但甚至沒有多少人知道它。 如果您想提高頁面加載速度，那麼我強烈建議您對圖像和媒體文件實施延遲加載。