五種延遲加載圖像以提高網站性能的方法

于圖像是網絡上最受歡迎的內容類型之一，網站上的頁面加載時間很容易成為一個問題。

即使經過適當優(yōu)化，圖像的重量也會相當大。這可能會對訪問者在訪問您網站上的內容之前必須等待的時間產生負面影響。很有可能，他們會變得不耐煩并在其他地方導航，除非您想出一個不影響速度感知的圖像加載解決方案。

在本文中，您將了解五種延遲加載圖像的方法，您可以將這些方法添加到您的Web優(yōu)化工具包中，以改善您網站上的用戶體驗。

什么是延遲加載？

延遲加載圖片意味著在網站上異步加載圖片——也就是說，在首屏內容完全加載之后，或者甚至有條件地，只有當它們出現(xiàn)在瀏覽器的視口中時。這意味著如果用戶不一直向下滾動，放置在頁面底部的圖像甚至不會被加載。

許多網站都使用這種方法，但在圖片較多的網站上尤為明顯。嘗試瀏覽您最喜歡的在線獵場以獲取高分辨率照片，您很快就會意識到該網站如何只加載有限數(shù)量的圖像。當您向下滾動頁面時，您會看到占位符圖像快速填充真實圖像以供預覽。例如，注意Unsplash.com上的加載器：將頁面的該部分滾動到視圖中會觸發(fā)用全分辨率照片替換占位符：

為什么要關心延遲加載圖像？

您應該考慮為您的網站延遲加載圖像至少有幾個很好的理由：

如果您的網站使用JavaScript來顯示內容或向用戶提供某種功能，那么快速加載 DOM 就變得至關重要。腳本通常要等到 DOM 完全加載后才開始運行。在擁有大量圖像的網站上，延遲加載（或異步加載圖像）可能會影響用戶停留或離開您的網站。
由于大多數(shù)延遲加載解決方案僅在用戶滾動到圖像在視口內可見的位置時才加載圖像，因此如果用戶從未到達該點，則永遠不會加載這些圖像。這意味著帶寬的大量節(jié)省，大多數(shù)用戶，尤其是那些使用移動設備和慢速連接訪問Web的用戶，都會感謝您。

好吧，延遲加載圖像有助于提高網站性能，但最好的方法是什么？

沒有完美的方法。

如果您熟悉JavaScript，那么實現(xiàn)您自己的延遲加載解決方案應該不是問題。沒有什么比自己編寫代碼更能控制你的了。

或者，您可以瀏覽Web以尋找可行的方法并開始試驗它們。我就是這樣做的，并遇到了這五種有趣的技術。

#1 原生延遲加載

圖像和iframe的原生延遲加載非常酷。沒有什么比下面的標記更直接了：

如您所見，沒有 JavaScript，沒有動態(tài)交換src屬性值，只是普通的舊 HTML。

該loading屬性為我們提供了延遲屏幕外圖像和iframe的選項，直到用戶滾動到他們在頁面上的位置。loading可以采用以下三個值中的任何一個：

lazy: 非常適合延遲加載
eager: 指示瀏覽器立即加載指定的內容
auto：保留延遲加載或不延遲加載到瀏覽器的選項。

這種方法沒有競爭對手：它的開銷為零，干凈簡單。然而，盡管在撰寫本文時，大多數(shù)主要瀏覽器都對loading屬性有很好的支持，但并非所有瀏覽器都支持。

有關延遲加載圖像的這項出色功能（包括瀏覽器支持變通方法）的深入文章，請不要錯過 Addy Osmani 的“網絡原生圖像延遲加載”！。

#2 使用 Intersection Observer API 延遲加載

Intersection Observer API 是一個現(xiàn)代化的界面，你可以利用的延遲加載圖片和其他內容。Intersection Observer API 提供了一種異步觀察目標元素與祖先元素或頂級文檔視口的交集變化的方法。

換句話說，被異步觀察的是一個元素與另一個元素的交集。

Denys Mishunov 有一個關于 Intersection Observer 和使用它的延遲加載圖像的很棒的教程。這是他的解決方案的樣子。

假設您想延遲加載圖片庫。每個圖像的標記如下所示：

請注意圖像的路徑如何包含在data-src屬性中，而不是src屬性中。原因是使用src意味著圖像會立即加載，這不是您想要的。

在 CSS 中，您為每個圖像賦予一個min-height值，例如100px. 這為每個圖像占位符（沒有 src 屬性的 img 元素）提供了一個垂直維度：

img { min-height: 100px; /* more styles here */ }

然后在JavaScript文檔中創(chuàng)建一個config對象并將其注冊到一個intersectionObserver實例中：

// create config object: rootMargin and threshold // are two properties exposed by the interface const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; // register the config object with an instance // of intersectionObserver let observer = new intersectionObserver(function(entries, self) { // iterate over each entry entries.forEach(entry => { // process just the images that are intersecting. // isIntersecting is a property exposed by the interface if(entry.isIntersecting) { // custom function that copies the path to the img // from data-src to src ploadImage(entry.target); // the image is now in place, stop watching self.unobserve(entry.target); } }); }, config);

最后，您遍歷所有圖像并將它們添加到此iterationObserver實例中：

const imgs = document.querySelectorAll('[data-src]'); imgs.forEach(img => { observer.observe(img); });

該解決方案的優(yōu)點：實施起來輕而易舉，有效，并且可以在intersectionObserver計算方面進行繁重的工作。

另一方面，盡管最新版本的大多數(shù)瀏覽器都支持 Intersection Observer API，但并非所有瀏覽器都一致支持。幸運的是，有一個polyfill可用。

#3 Lozad.js

實現(xiàn)圖像延遲加載的一種快速簡便的替代方法是讓 JS 庫為您完成大部分工作。

Lozad 是一個高性能、輕量級和可配置的純JavaScript惰性加載器，沒有依賴項。您可以使用它來延遲加載圖像、視頻、iframe 等，并且它使用 Intersection Observer API。

你可以在 npm/Yarn 中包含 Lozad 并使用你選擇的模塊打包器導入它：

npm install --save lozad yarn add lozad

import lozad from 'lozad';

或者，您可以簡單地使用 CDN 下載庫并將其添加到 HTML 頁面底部的< script>標簽中：

接下來，對于基本實現(xiàn)，將類lozad添加到標記中的資產：

最后，在你的 JS 文檔中實例化 Lozad：

const observer = lozad(); observer.observe();

您將在Lozad GitHub 存儲庫上找到有關如何使用該庫的所有詳細信息。

如果您不想深入研究 Intersection Observer API 的工作原理，或者您只是在尋找適用于各種內容類型的快速實現(xiàn)，那么 Lozad 是一個不錯的選擇。

只是，請注意瀏覽器支持，并最終將此庫與 Intersection Observer API 的 polyfill 集成。

#4 圖像模糊效果的延遲加載

如果您是Medium讀者，您肯定已經注意到該網站如何在帖子中加載主圖片。

您首先看到的是圖像的模糊、低分辨率副本，而其高分辨率版本正在延遲加載。

您可以通過多種方式延遲加載具有這種有趣模糊效果的圖像。

我們最喜歡的技術是 Craig Buckler。這是此解決方案的所有優(yōu)點：

性能：只有 463 字節(jié)的 CSS 和 1,007 字節(jié)的縮小JavaScript代碼
支持視網膜屏幕
無依賴：不需要 jQuery 或其他庫和框架
逐步增強以抵消舊瀏覽器和失敗的 JavaScript

#5 Yall.js

Yall 是一個功能豐富的延遲加載腳本，用于圖像、視頻和 iframe。更具體地說，它使用 Intersection Observer API，并在必要時巧妙地使用傳統(tǒng)的事件處理程序技術。

在您的文檔中包含 Yall 時，您需要按如下方式對其進行初始化：

接下來，要延遲加載一個簡單的img元素，您只需在標記中執(zhí)行以下操作：

請注意以下事項：

您將類添加到元素
src值是一個占位符圖像
要延遲加載的圖像的路徑在data-src屬性內

Yall 的好處包括：

Intersection Observer API 的出色性能
出色的瀏覽器支持（它可以追溯到 IE11）
不需要其他依賴項

結論

你有五種延遲加載圖像的方法，您可以開始在您的項目中進行試驗和測試。

SS加載確實有可能阻塞頁面加載，但這并非絕對，具體取決于CSS的加載方式、應用位置以及瀏覽器的渲染機制。在了解CSS加載如何影響頁面加載之前，我們先要明白瀏覽器渲染頁面的基本流程。

瀏覽器在加載網頁時，會按照從上到下的順序解析HTML文檔。當瀏覽器遇到`<link>`標簽引用外部CSS文件時，它會停止HTML的解析，轉而加載并應用這個CSS文件。這個過程被稱為CSS阻塞。因此，如果這個CSS文件很大或者加載速度很慢，用戶可能會看到一個空白頁面，直到CSS文件完全加載并應用。

然而，有幾種方法可以避免或減輕CSS加載對頁面加載的阻塞：

異步加載CSS：通過將CSS文件的加載設置為異步，可以確保HTML解析不會被阻塞。這可以通過在`<link>`標簽中添加`rel="async"`屬性來實現(xiàn)。這樣，瀏覽器會在后臺加載CSS文件，而不會停止HTML的解析。
內聯(lián)CSS：將CSS代碼直接寫在HTML文件中，而不是通過外部文件引用，可以避免網絡請求造成的延遲。但是，這會增加HTML文件的大小，可能導致其他性能問題。
使用CSS-in-JS庫：一些庫，如Styled Components或Emotion，允許你在JavaScript中編寫CSS。這種方法可以動態(tài)生成樣式，但也可能增加JavaScript的復雜性。
分割CSS：將CSS文件分割成多個小文件，每個文件只包含一部分樣式。這樣，即使某個文件加載較慢，也不會阻塞整個頁面的渲染。
利用媒體查詢：通過媒體查詢，你可以根據設備的特性（如屏幕大小、分辨率等）加載不同的CSS文件。這樣，用戶只會下載并應用他們真正需要的樣式。
預加載和預獲?。菏褂胉<link rel="preload">`和`<link rel="prefetch">`可以告訴瀏覽器提前加載CSS文件。雖然這并不能阻止CSS阻塞，但它可以確保文件在需要時立即可用。

此外，值得注意的是，現(xiàn)代瀏覽器通常具有一些優(yōu)化機制，如并行下載、緩存等，這些都可以幫助減少CSS加載對頁面加載的影響。

總的來說，CSS加載確實有可能阻塞頁面加載，但通過一些優(yōu)化策略和技術，我們可以減輕或避免這種阻塞。選擇哪種策略取決于你的具體需求和約束。

ello，各位小伙伴，今天廣州藍景跟大家分享前端技術干貨，頁面加載速度問題。

首先我們都討厭加載緩慢的頁面！

要知道加載時間每增加1秒（0-5秒之間），網站轉化率就會平均下降4.42%。頁面加載時間的前五秒對轉化率的影響最大。

幸運的是，我們可以通過優(yōu)化HTML和CSS文件來提高網站的頁面加載速度，而無需花費昂貴的服務器資源！

注：本文將僅關注如何使用HTML和CSS文件來提高頁面加載速度。

延遲加載

延遲加載是一種縮短關鍵渲染路徑長度的策略，從而減少頁面加載時間。

a）拆分CSS文件

盡量拆分CSS文件，避免完整CSS在所有尺寸的屏幕上執(zhí)行。

<!-- 加載和解析整個sytles.css文件會阻塞主瀏覽器渲染 -->
<link rel="stylesheet" href="styles.css" />

對于打印媒體，可以使用：

<!-- 加載和解析print.css時不會阻塞渲染，只會在打印模式加載該樣式 -->
<link rel="stylesheet" href="print.css" media="print" />

對于移動設備屏幕，可以使用：

<!-- 只會在移動設備這樣的小屏幕下才會加載和解析該樣式 -->
<link
rel="stylesheet"
href="mobile.css"
media="screen and (max-width: 480px)" />

對于平板電腦屏幕，可以使用：

<!-- 不會在大屏幕上加載和解析該樣式 -->
<link
rel="stylesheet"
href="tablet.css"
media="screen and (max-width: 1080px)" />

對于移動屏幕橫屏或豎屏，也可以使用不同的CSS文件：

<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />

通過將CSS分離成多個文件，主文件（在本例中為styles.css）變得小多了，從而減少了渲染被阻塞的時間，大大提高了頁面加載速度。

b） CSS的font-display屬性

font-display屬性應用于@font-face規(guī)則，定義瀏覽器如何加載和顯示字體文件，從而允許在字體加載或加載失敗時以回退字體顯示文本。這可以通過使文本可見取代空白屏幕來提高性能，但代價是閃爍無樣式的文本。

@font-face {
font-family: "nunito", sans-serif;
font-weight: 400;
font-style: normal;
font-display: fallback;
}

c） HTML文件中的圖片懶加載

使用loading="lazy"，以便僅在需要時加載圖像。這將大大降低頁面加載速度。

<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />

2. 選擇正確的圖片格式

.webp格式的圖片被推薦作為網絡的圖片格式標準。

WebP無損圖片在尺寸方面比PNG小26%。WebP有損圖片比同等SSIM質量指數(shù)下的同類JPEG圖片小25-34%。動畫WebP圖片支持有損、無損和透明，與GIF和APNG相比，可以提供更小的尺寸。

下圖是WebP與PNG圖片格式對比：

下圖是WebP與JPEG圖片格式對比：

所有這些測試都可以證明，即使是有損壓縮，webp圖片的壓縮率也更高，因此大大減少了頁面加載時間！

你還可以嘗試另一種圖片格式.avif，在少數(shù)情況下比.webp更好，但由于該格式比較新（2019年發(fā)布），因此還沒有多少瀏覽器支持.avif格式！

使用<picture>元素

a）可用于針對不同的media條件裁剪或修改圖片（例如，在較小的顯示器上加載大圖片的縮略版本）。

b）在不支持webp格式的情況下提供替代圖片格式。

c）通過為查看器加載最合適的圖片來節(jié)省帶寬并加快頁面加載時間。

如果為高DPI顯示器提供更高分辨率的圖像版本，請改用<img>元素上的srcset。這允許瀏覽器在數(shù)據保存模式下選擇低分辨率版本，并且你不必編寫顯式media條件。

<picture>
<source srcset="my-logo-wide.webp" type="image/webp" media="(min-width: 600px)" />
<source srcset="my-logo-wide.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
<source srcset="my-logo-narrow.webp" type="image/webp" />
<img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture>

3. 渲染圖像

由于圖像是異步加載的，并在第一次繪制后繼續(xù)加載，如果在加載之前未定義其尺寸，則可能會導致重排到頁面內容。例如，文本因加載圖像而被推下頁面。因此，設置width和高height屬性至關重要，以便瀏覽器可以在布局中為它們保留空間。

對于任何background-image，設置background-color值很重要，以便在下載圖像之前，覆蓋的內容保持可讀。

4. 壓縮HTML和CSS文件

壓縮指的是從代碼中刪除所有不必要的字符以減小尺寸。刪除的是不需要的空格字符，如空格、換行符、制表符等以及注釋。

使用壓縮工具，如CodeBeautify，CSS Minifier等來縮小HTML和CSS文件。有助于為網站提供更快的頁面加載速度。

在線咨詢

上一篇：信不信，我能在圓周率里找出你的銀行卡密碼！
下一篇：10 分鐘實現(xiàn) Java 發(fā)送郵件功能

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商