于图像是网络上最受欢迎的内容类型之一，网站上的页面加载时间很容易成为一个问题。

即使经过适当优化，图像的重量也会相当大。这可能会对访问者在访问您网站上的内容之前必须等待的时间产生负面影响。很有可能，他们会变得不耐烦并在其他地方导航，除非您想出一个不影响速度感知的图像加载解决方案。

在本文中，您将了解五种延迟加载图像的方法，您可以将这些方法添加到您的Web优化工具包中，以改善您网站上的用户体验。

什么是延迟加载？

延迟加载图片意味着在网站上异步加载图片——也就是说，在首屏内容完全加载之后，或者甚至有条件地，只有当它们出现在浏览器的视口中时。这意味着如果用户不一直向下滚动，放置在页面底部的图像甚至不会被加载。

许多网站都使用这种方法，但在图片较多的网站上尤为明显。尝试浏览您最喜欢的在线猎场以获取高分辨率照片，您很快就会意识到该网站如何只加载有限数量的图像。当您向下滚动页面时，您会看到占位符图像快速填充真实图像以供预览。例如，注意Unsplash.com上的加载器：将页面的该部分滚动到视图中会触发用全分辨率照片替换占位符：

为什么要关心延迟加载图像？

您应该考虑为您的网站延迟加载图像至少有几个很好的理由：

• 如果您的网站使用JavaScript来显示内容或向用户提供某种功能，那么快速加载 DOM 就变得至关重要。脚本通常要等到 DOM 完全加载后才开始运行。在拥有大量图像的网站上，延迟加载（或异步加载图像）可能会影响用户停留或离开您的网站。
• 由于大多数延迟加载解决方案仅在用户滚动到图像在视口内可见的位置时才加载图像，因此如果用户从未到达该点，则永远不会加载这些图像。这意味着带宽的大量节省，大多数用户，尤其是那些使用移动设备和慢速连接访问Web的用户，都会感谢您。

好吧，延迟加载图像有助于提高网站性能，但最好的方法是什么？

没有完美的方法。

如果您熟悉JavaScript，那么实现您自己的延迟加载解决方案应该不是问题。没有什么比自己编写代码更能控制你的了。

或者，您可以浏览Web以寻找可行的方法并开始试验它们。我就是这样做的，并遇到了这五种有趣的技术。

#1 原生延迟加载

图像和iframe的原生延迟加载非常酷。没有什么比下面的标记更直接了：

<img src="myimage.jpg" loading="lazy" alt="..." /> <iframe src="content.html" loading="lazy"></iframe>

如您所见，没有 JavaScript，没有动态交换src属性值，只是普通的旧 HTML。

该loading属性为我们提供了延迟屏幕外图像和iframe的选项，直到用户滚动到他们在页面上的位置。loading可以采用以下三个值中的任何一个：

• lazy: 非常适合延迟加载
• eager: 指示浏览器立即加载指定的内容
• auto：保留延迟加载或不延迟加载到浏览器的选项。

这种方法没有竞争对手：它的开销为零，干净简单。然而，尽管在撰写本文时，大多数主要浏览器都对loading属性有很好的支持，但并非所有浏览器都支持。

有关延迟加载图像的这项出色功能（包括浏览器支持变通方法）的深入文章，请不要错过 Addy Osmani 的“网络原生图像延迟加载”！。

#2 使用 Intersection Observer API 延迟加载

Intersection Observer API 是一个现代化的界面，你可以利用的延迟加载图片和其他内容。Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。

换句话说，被异步观察的是一个元素与另一个元素的交集。

Denys Mishunov 有一个关于 Intersection Observer 和使用它的延迟加载图像的很棒的教程。这是他的解决方案的样子。

假设您想延迟加载图片库。每个图像的标记如下所示：

<img data-src="image.jpg" alt="test image">

请注意图像的路径如何包含在data-src属性中，而不是src属性中。原因是使用src意味着图像会立即加载，这不是您想要的。

在 CSS 中，您为每个图像赋予一个min-height值，例如100px. 这为每个图像占位符（没有 src 属性的 img 元素）提供了一个垂直维度：

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

然后在JavaScript文档中创建一个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); });

该解决方案的优点：实施起来轻而易举，有效，并且可以在intersectionObserver计算方面进行繁重的工作。

另一方面，尽管最新版本的大多数浏览器都支持 Intersection Observer API，但并非所有浏览器都一致支持。幸运的是，有一个polyfill可用。

#3 Lozad.js

实现图像延迟加载的一种快速简便的替代方法是让 JS 库为您完成大部分工作。

Lozad 是一个高性能、轻量级和可配置的纯JavaScript惰性加载器，没有依赖项。您可以使用它来延迟加载图像、视频、iframe 等，并且它使用 Intersection Observer API。

你可以在 npm/Yarn 中包含 Lozad 并使用你选择的模块打包器导入它：

npm install --save lozad yarn add lozad

import lozad from 'lozad';

或者，您可以简单地使用 CDN 下载库并将其添加到 HTML 页面底部的< script>标签中：

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"> </script>

接下来，对于基本实现，将类lozad添加到标记中的资产：

<img class="lozad" data-src="img.jpg">

最后，在你的 JS 文档中实例化 Lozad：

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

您将在Lozad GitHub 存储库上找到有关如何使用该库的所有详细信息。

如果您不想深入研究 Intersection Observer API 的工作原理，或者您只是在寻找适用于各种内容类型的快速实现，那么 Lozad 是一个不错的选择。

只是，请注意浏览器支持，并最终将此库与 Intersection Observer API 的 polyfill 集成。

#4 图像模糊效果的延迟加载

如果您是Medium读者，您肯定已经注意到该网站如何在帖子中加载主图片。

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

您可以通过多种方式延迟加载具有这种有趣模糊效果的图像。

我们最喜欢的技术是 Craig Buckler。这是此解决方案的所有优点：

• 性能：只有 463 字节的 CSS 和 1,007 字节的缩小JavaScript代码
• 支持视网膜屏幕
• 无依赖：不需要 jQuery 或其他库和框架
• 逐步增强以抵消旧浏览器和失败的 JavaScript

#5 Yall.js

Yall 是一个功能丰富的延迟加载脚本，用于图像、视频和 iframe。更具体地说，它使用 Intersection Observer API，并在必要时巧妙地使用传统的事件处理程序技术。

在您的文档中包含 Yall 时，您需要按如下方式对其进行初始化：

<script src="yall.min.js"></script> <script> document.addEventListener("DOMContentLoaded", yall); </script>

接下来，要延迟加载一个简单的img元素，您只需在标记中执行以下操作：

<img class="lazy" src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">

请注意以下事项：

• 您将类添加到元素
• src值是一个占位符图像
• 要延迟加载的图像的路径在data-src属性内

Yall 的好处包括：

• Intersection Observer API 的出色性能
• 出色的浏览器支持（它可以追溯到 IE11）
• 不需要其他依赖项

结论

你有五种延迟加载图像的方法，您可以开始在您的项目中进行试验和测试。

SS加载确实有可能阻塞页面加载，但这并非绝对，具体取决于CSS的加载方式、应用位置以及浏览器的渲染机制。在了解CSS加载如何影响页面加载之前，我们先要明白浏览器渲染页面的基本流程。

浏览器在加载网页时，会按照从上到下的顺序解析HTML文档。当浏览器遇到`<link>`标签引用外部CSS文件时，它会停止HTML的解析，转而加载并应用这个CSS文件。这个过程被称为CSS阻塞。因此，如果这个CSS文件很大或者加载速度很慢，用户可能会看到一个空白页面，直到CSS文件完全加载并应用。

然而，有几种方法可以避免或减轻CSS加载对页面加载的阻塞：

1. 异步加载CSS：通过将CSS文件的加载设置为异步，可以确保HTML解析不会被阻塞。这可以通过在`<link>`标签中添加`rel="async"`属性来实现。这样，浏览器会在后台加载CSS文件，而不会停止HTML的解析。
2. 内联CSS：将CSS代码直接写在HTML文件中，而不是通过外部文件引用，可以避免网络请求造成的延迟。但是，这会增加HTML文件的大小，可能导致其他性能问题。
3. 使用CSS-in-JS库：一些库，如Styled Components或Emotion，允许你在JavaScript中编写CSS。这种方法可以动态生成样式，但也可能增加JavaScript的复杂性。
4. 分割CSS：将CSS文件分割成多个小文件，每个文件只包含一部分样式。这样，即使某个文件加载较慢，也不会阻塞整个页面的渲染。
5. 利用媒体查询：通过媒体查询，你可以根据设备的特性（如屏幕大小、分辨率等）加载不同的CSS文件。这样，用户只会下载并应用他们真正需要的样式。
6. 预加载和预获取：使用`<link rel="preload">`和`<link rel="prefetch">`可以告诉浏览器提前加载CSS文件。虽然这并不能阻止CSS阻塞，但它可以确保文件在需要时立即可用。

此外，值得注意的是，现代浏览器通常具有一些优化机制，如并行下载、缓存等，这些都可以帮助减少CSS加载对页面加载的影响。

总的来说，CSS加载确实有可能阻塞页面加载，但通过一些优化策略和技术，我们可以减轻或避免这种阻塞。选择哪种策略取决于你的具体需求和约束。

ello，各位小伙伴，今天广州蓝景跟大家分享前端技术干货，页面加载速度问题。

首先我们都讨厌加载缓慢的页面！

要知道加载时间每增加1秒（0-5秒之间），网站转化率就会平均下降4.42%。页面加载时间的前五秒对转化率的影响最大。

幸运的是，我们可以通过优化HTML和CSS文件来提高网站的页面加载速度，而无需花费昂贵的服务器资源！

注：本文将仅关注如何使用HTML和CSS文件来提高页面加载速度。

延迟加载

延迟加载是一种缩短关键渲染路径长度的策略，从而减少页面加载时间。

a） 拆分CSS文件

尽量拆分CSS文件，避免完整CSS在所有尺寸的屏幕上执行。

<!-- 加载和解析整个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规则，定义浏览器如何加载和显示字体文件，从而允许在字体加载或加载失败时以回退字体显示文本。这可以通过使文本可见取代空白屏幕来提高性能，但代价是闪烁无样式的文本。

@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质量指数下的同类JPEG图片小25-34%。动画WebP图片支持有损、无损和透明，与GIF和APNG相比，可以提供更小的尺寸。

下图是WebP与PNG图片格式对比：

下图是WebP与JPEG图片格式对比：

所有这些测试都可以证明，即使是有损压缩，webp图片的压缩率也更高，因此大大减少了页面加载时间！

你还可以尝试另一种图片格式.avif，在少数情况下比.webp更好，但由于该格式比较新（2019年发布），因此还没有多少浏览器支持.avif格式！

使用<picture>元素

a） 可用于针对不同的media条件裁剪或修改图片（例如，在较小的显示器上加载大图片的缩略版本）。

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

c）通过为查看器加载最合适的图片来节省带宽并加快页面加载时间。

如果为高DPI显示器提供更高分辨率的图像版本，请改用<img>元素上的srcset。这允许浏览器在数据保存模式下选择低分辨率版本，并且你不必编写显式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. 渲染图像

由于图像是异步加载的，并在第一次绘制后继续加载，如果在加载之前未定义其尺寸，则可能会导致重排到页面内容。例如，文本因加载图像而被推下页面。因此，设置width和高height属性至关重要，以便浏览器可以在布局中为它们保留空间。

对于任何background-image，设置background-color值很重要，以便在下载图像之前，覆盖的内容保持可读。

4. 压缩HTML和CSS文件

压缩指的是从代码中删除所有不必要的字符以减小尺寸。删除的是不需要的空格字符，如空格、换行符、制表符等以及注释。

使用压缩工具，如CodeBeautify，CSS Minifier等来缩小HTML和CSS文件。有助于为网站提供更快的页面加载速度。