整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
于圖像是網(wǎng)絡(luò)上最受歡迎的內(nèi)容類型之一，網(wǎng)站上的頁(yè)面加載時(shí)間很容易成為一個(gè)問(wèn)題。
即使經(jīng)過(guò)適當(dāng)優(yōu)化，圖像的重量也會(huì)相當(dāng)大。這可能會(huì)對(duì)訪問(wèn)者在訪問(wèn)您網(wǎng)站上的內(nèi)容之前必須等待的時(shí)間產(chǎn)生負(fù)面影響。很有可能，他們會(huì)變得不耐煩并在其他地方導(dǎo)航，除非您想出一個(gè)不影響速度感知的圖像加載解決方案。
在本文中，您將了解五種延遲加載圖像的方法，您可以將這些方法添加到您的Web優(yōu)化工具包中，以改善您網(wǎng)站上的用戶體驗(yàn)。
延遲加載圖片意味著在網(wǎng)站上異步加載圖片——也就是說(shuō)，在首屏內(nèi)容完全加載之后，或者甚至有條件地，只有當(dāng)它們出現(xiàn)在瀏覽器的視口中時(shí)。這意味著如果用戶不一直向下滾動(dòng)，放置在頁(yè)面底部的圖像甚至不會(huì)被加載。
許多網(wǎng)站都使用這種方法，但在圖片較多的網(wǎng)站上尤為明顯。嘗試瀏覽您最喜歡的在線獵場(chǎng)以獲取高分辨率照片，您很快就會(huì)意識(shí)到該網(wǎng)站如何只加載有限數(shù)量的圖像。當(dāng)您向下滾動(dòng)頁(yè)面時(shí)，您會(huì)看到占位符圖像快速填充真實(shí)圖像以供預(yù)覽。例如，注意Unsplash.com上的加載器：將頁(yè)面的該部分滾動(dòng)到視圖中會(huì)觸發(fā)用全分辨率照片替換占位符：
您應(yīng)該考慮為您的網(wǎng)站延遲加載圖像至少有幾個(gè)很好的理由：
好吧，延遲加載圖像有助于提高網(wǎng)站性能，但最好的方法是什么？
沒(méi)有完美的方法。
如果您熟悉JavaScript，那么實(shí)現(xiàn)您自己的延遲加載解決方案應(yīng)該不是問(wèn)題。沒(méi)有什么比自己編寫代碼更能控制你的了。
或者，您可以瀏覽Web以尋找可行的方法并開(kāi)始試驗(yàn)它們。我就是這樣做的，并遇到了這五種有趣的技術(shù)。
圖像和iframe的原生延遲加載非常酷。沒(méi)有什么比下面的標(biāo)記更直接了：
<img src="myimage.jpg" loading="lazy" alt="..." /> <iframe src="content.html" loading="lazy"></iframe>
如您所見(jiàn)，沒(méi)有 JavaScript，沒(méi)有動(dòng)態(tài)交換src屬性值，只是普通的舊 HTML。
該loading屬性為我們提供了延遲屏幕外圖像和iframe的選項(xiàng)，直到用戶滾動(dòng)到他們?cè)陧?yè)面上的位置。loading可以采用以下三個(gè)值中的任何一個(gè)：
這種方法沒(méi)有競(jìng)爭(zhēng)對(duì)手：它的開(kāi)銷為零，干凈簡(jiǎn)單。然而，盡管在撰寫本文時(shí)，大多數(shù)主要瀏覽器都對(duì)loading屬性有很好的支持，但并非所有瀏覽器都支持。
有關(guān)延遲加載圖像的這項(xiàng)出色功能（包括瀏覽器支持變通方法）的深入文章，請(qǐng)不要錯(cuò)過(guò) Addy Osmani 的“網(wǎng)絡(luò)原生圖像延遲加載”！。
Intersection Observer API 是一個(gè)現(xiàn)代化的界面，你可以利用的延遲加載圖片和其他內(nèi)容。Intersection Observer API 提供了一種異步觀察目標(biāo)元素與祖先元素或頂級(jí)文檔視口的交集變化的方法。
換句話說(shuō)，被異步觀察的是一個(gè)元素與另一個(gè)元素的交集。
Denys Mishunov 有一個(gè)關(guān)于 Intersection Observer 和使用它的延遲加載圖像的很棒的教程。這是他的解決方案的樣子。
假設(shè)您想延遲加載圖片庫(kù)。每個(gè)圖像的標(biāo)記如下所示：
<img data-src="image.jpg" alt="test image">
請(qǐng)注意圖像的路徑如何包含在data-src屬性中，而不是src屬性中。原因是使用src意味著圖像會(huì)立即加載，這不是您想要的。
在 CSS 中，您為每個(gè)圖像賦予一個(gè)min-height值，例如100px. 這為每個(gè)圖像占位符（沒(méi)有 src 屬性的 img 元素）提供了一個(gè)垂直維度：
img { min-height: 100px; /* more styles here */ }
然后在JavaScript文檔中創(chuàng)建一個(gè)config對(duì)象并將其注冊(cè)到一個(gè)intersectionObserver實(shí)例中：
// 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實(shí)例中：
const imgs = document.querySelectorAll('[data-src]'); imgs.forEach(img => { observer.observe(img); });
該解決方案的優(yōu)點(diǎn)：實(shí)施起來(lái)輕而易舉，有效，并且可以在intersectionObserver計(jì)算方面進(jìn)行繁重的工作。
另一方面，盡管最新版本的大多數(shù)瀏覽器都支持 Intersection Observer API，但并非所有瀏覽器都一致支持。幸運(yùn)的是，有一個(gè)polyfill可用。
實(shí)現(xiàn)圖像延遲加載的一種快速簡(jiǎn)便的替代方法是讓 JS 庫(kù)為您完成大部分工作。
Lozad 是一個(gè)高性能、輕量級(jí)和可配置的純JavaScript惰性加載器，沒(méi)有依賴項(xiàng)。您可以使用它來(lái)延遲加載圖像、視頻、iframe 等，并且它使用 Intersection Observer API。
你可以在 npm/Yarn 中包含 Lozad 并使用你選擇的模塊打包器導(dǎo)入它：
npm install --save lozad yarn add lozad
import lozad from 'lozad';
或者，您可以簡(jiǎn)單地使用 CDN 下載庫(kù)并將其添加到 HTML 頁(yè)面底部的< script>標(biāo)簽中：
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"> </script>
接下來(lái)，對(duì)于基本實(shí)現(xiàn)，將類lozad添加到標(biāo)記中的資產(chǎn)：
<img class="lozad" data-src="img.jpg">
最后，在你的 JS 文檔中實(shí)例化 Lozad：
const observer = lozad(); observer.observe();
您將在Lozad GitHub 存儲(chǔ)庫(kù)上找到有關(guān)如何使用該庫(kù)的所有詳細(xì)信息。
如果您不想深入研究 Intersection Observer API 的工作原理，或者您只是在尋找適用于各種內(nèi)容類型的快速實(shí)現(xiàn)，那么 Lozad 是一個(gè)不錯(cuò)的選擇。
只是，請(qǐng)注意瀏覽器支持，并最終將此庫(kù)與 Intersection Observer API 的 polyfill 集成。
如果您是Medium讀者，您肯定已經(jīng)注意到該網(wǎng)站如何在帖子中加載主圖片。
您首先看到的是圖像的模糊、低分辨率副本，而其高分辨率版本正在延遲加載。
您可以通過(guò)多種方式延遲加載具有這種有趣模糊效果的圖像。
我們最喜歡的技術(shù)是 Craig Buckler。這是此解決方案的所有優(yōu)點(diǎn)：
Yall 是一個(gè)功能豐富的延遲加載腳本，用于圖像、視頻和 iframe。更具體地說(shuō)，它使用 Intersection Observer API，并在必要時(shí)巧妙地使用傳統(tǒng)的事件處理程序技術(shù)。
在您的文檔中包含 Yall 時(shí)，您需要按如下方式對(duì)其進(jìn)行初始化：
<script src="yall.min.js"></script> <script> document.addEventListener("DOMContentLoaded", yall); </script>
接下來(lái)，要延遲加載一個(gè)簡(jiǎn)單的img元素，您只需在標(biāo)記中執(zhí)行以下操作：
<img class="lazy" src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">
請(qǐng)注意以下事項(xiàng)：
Yall 的好處包括：
你有五種延遲加載圖像的方法，您可以開(kāi)始在您的項(xiàng)目中進(jìn)行試驗(yàn)和測(cè)試。
SS加載確實(shí)有可能阻塞頁(yè)面加載，但這并非絕對(duì)，具體取決于CSS的加載方式、應(yīng)用位置以及瀏覽器的渲染機(jī)制。在了解CSS加載如何影響頁(yè)面加載之前，我們先要明白瀏覽器渲染頁(yè)面的基本流程。
瀏覽器在加載網(wǎng)頁(yè)時(shí)，會(huì)按照從上到下的順序解析HTML文檔。當(dāng)瀏覽器遇到`<link>`標(biāo)簽引用外部CSS文件時(shí)，它會(huì)停止HTML的解析，轉(zhuǎn)而加載并應(yīng)用這個(gè)CSS文件。這個(gè)過(guò)程被稱為CSS阻塞。因此，如果這個(gè)CSS文件很大或者加載速度很慢，用戶可能會(huì)看到一個(gè)空白頁(yè)面，直到CSS文件完全加載并應(yīng)用。
然而，有幾種方法可以避免或減輕CSS加載對(duì)頁(yè)面加載的阻塞：
此外，值得注意的是，現(xiàn)代瀏覽器通常具有一些優(yōu)化機(jī)制，如并行下載、緩存等，這些都可以幫助減少CSS加載對(duì)頁(yè)面加載的影響。
總的來(lái)說(shuō)，CSS加載確實(shí)有可能阻塞頁(yè)面加載，但通過(guò)一些優(yōu)化策略和技術(shù)，我們可以減輕或避免這種阻塞。選擇哪種策略取決于你的具體需求和約束。
ello，各位小伙伴，今天廣州藍(lán)景跟大家分享前端技術(shù)干貨，頁(yè)面加載速度問(wèn)題。
首先我們都討厭加載緩慢的頁(yè)面！
要知道加載時(shí)間每增加1秒（0-5秒之間），網(wǎng)站轉(zhuǎn)化率就會(huì)平均下降4.42%。頁(yè)面加載時(shí)間的前五秒對(duì)轉(zhuǎn)化率的影響最大。
幸運(yùn)的是，我們可以通過(guò)優(yōu)化HTML和CSS文件來(lái)提高網(wǎng)站的頁(yè)面加載速度，而無(wú)需花費(fèi)昂貴的服務(wù)器資源！
注：本文將僅關(guān)注如何使用HTML和CSS文件來(lái)提高頁(yè)面加載速度。
延遲加載
延遲加載是一種縮短關(guān)鍵渲染路徑長(zhǎng)度的策略，從而減少頁(yè)面加載時(shí)間。
a） 拆分CSS文件
盡量拆分CSS文件，避免完整CSS在所有尺寸的屏幕上執(zhí)行。
<!-- 加載和解析整個(gè)sytles.css文件會(huì)阻塞主瀏覽器渲染 -->
<link rel="stylesheet" href="styles.css" />對(duì)于打印媒體，可以使用：
<!-- 加載和解析print.css時(shí)不會(huì)阻塞渲染，只會(huì)在打印模式加載該樣式 -->
<link rel="stylesheet" href="print.css" media="print" />對(duì)于移動(dòng)設(shè)備屏幕，可以使用：
<!-- 只會(huì)在移動(dòng)設(shè)備這樣的小屏幕下才會(huì)加載和解析該樣式 -->
<link
rel="stylesheet"
href="mobile.css"
media="screen and (max-width: 480px)" />對(duì)于平板電腦屏幕，可以使用：
<!-- 不會(huì)在大屏幕上加載和解析該樣式 -->
<link
rel="stylesheet"
href="tablet.css"
media="screen and (max-width: 1080px)" />對(duì)于移動(dòng)屏幕橫屏或豎屏，也可以使用不同的CSS文件：
<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />通過(guò)將CSS分離成多個(gè)文件，主文件（在本例中為styles.css）變得小多了，從而減少了渲染被阻塞的時(shí)間，大大提高了頁(yè)面加載速度。
b） CSS的font-display屬性
font-display屬性應(yīng)用于@font-face規(guī)則，定義瀏覽器如何加載和顯示字體文件，從而允許在字體加載或加載失敗時(shí)以回退字體顯示文本。這可以通過(guò)使文本可見(jiàn)取代空白屏幕來(lái)提高性能，但代價(jià)是閃爍無(wú)樣式的文本。
@font-face {
font-family: "nunito", sans-serif;
font-weight: 400;
font-style: normal;
font-display: fallback;
}c） HTML文件中的圖片懶加載
使用loading="lazy"，以便僅在需要時(shí)加載圖像。這將大大降低頁(yè)面加載速度。
<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />2. 選擇正確的圖片格式
.webp格式的圖片被推薦作為網(wǎng)絡(luò)的圖片格式標(biāo)準(zhǔn)。
WebP無(wú)損圖片在尺寸方面比PNG小26%。WebP有損圖片比同等SSIM質(zhì)量指數(shù)下的同類JPEG圖片小25-34%。動(dòng)畫WebP圖片支持有損、無(wú)損和透明，與GIF和APNG相比，可以提供更小的尺寸。
下圖是WebP與PNG圖片格式對(duì)比：
下圖是WebP與JPEG圖片格式對(duì)比：
所有這些測(cè)試都可以證明，即使是有損壓縮，webp圖片的壓縮率也更高，因此大大減少了頁(yè)面加載時(shí)間！
你還可以嘗試另一種圖片格式.avif，在少數(shù)情況下比.webp更好，但由于該格式比較新（2019年發(fā)布），因此還沒(méi)有多少瀏覽器支持.avif格式！
使用<picture>元素
a） 可用于針對(duì)不同的media條件裁剪或修改圖片（例如，在較小的顯示器上加載大圖片的縮略版本）。
b）在不支持webp格式的情況下提供替代圖片格式。
c）通過(guò)為查看器加載最合適的圖片來(lái)節(jié)省帶寬并加快頁(yè)面加載時(shí)間。
如果為高DPI顯示器提供更高分辨率的圖像版本，請(qǐng)改用<img>元素上的srcset。這允許瀏覽器在數(shù)據(jù)保存模式下選擇低分辨率版本，并且你不必編寫顯式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ù)加載，如果在加載之前未定義其尺寸，則可能會(huì)導(dǎo)致重排到頁(yè)面內(nèi)容。例如，文本因加載圖像而被推下頁(yè)面。因此，設(shè)置width和高h(yuǎn)eight屬性至關(guān)重要，以便瀏覽器可以在布局中為它們保留空間。
對(duì)于任何background-image，設(shè)置background-color值很重要，以便在下載圖像之前，覆蓋的內(nèi)容保持可讀。
4. 壓縮HTML和CSS文件
壓縮指的是從代碼中刪除所有不必要的字符以減小尺寸。刪除的是不需要的空格字符，如空格、換行符、制表符等以及注釋。
使用壓縮工具，如CodeBeautify，CSS Minifier等來(lái)縮小HTML和CSS文件。有助于為網(wǎng)站提供更快的頁(yè)面加載速度。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
