如何在谷歌浏览器中启用图像延迟加载?

如何在谷歌浏览器中启用图像延迟加载

延迟加载是仅在查看之前加载媒体文件(如图像)的功能。 通常,当您打开网页时,浏览器会尝试从服务器获取全部内容。 大图像很容易消耗高带宽,尤其是在移动设备上。 但是,如果它们位于页面底部并且您根本没有查看它们,那么这显然是一种资源浪费,并且您需要为消耗互联网带宽而付出代价。 目前网站所有者可以在他们的网站上启用图像延迟加载以提高页面加载速度。 谷歌浏览器通过在金丝雀版本中引入延迟加载将此功能提升到一个新的水平。

折叠上方和下方

在我们讨论启用延迟加载之前,您需要了解首屏的含义。 当您打开网页时,在浏览器窗口中看到的不滚动内容位于首屏内容之上。 这对于吸引和留住类似于报纸内容的用户至关重要。

首屏新闻

首屏新闻

仅通过滚动才能看到的屏幕下方的剩余内容位于折叠内容下方。 在首屏内容的加载过程中,首屏下的图片部分不一定要加载。 这是合乎逻辑的,也有助于提高首屏内容的加载速度。

折叠内容下方的图像可以在您向下滚动时加载。 通过这种方式,您会注意到整体速度的提高。

如何在谷歌浏览器中启用图像延迟加载?

目前,Google 正在尝试延迟加载图像作为一项实验性功能。 所以这在普通的谷歌 Chrome 浏览器上是不可用的。 您需要安装 Chrome 金丝雀版本才能签出。

安装 Chrome 金丝雀

谷歌有多个 Chrome 浏览器版本。 Canary 是一个夜间构建版本,供开发人员提前测试功能。 谷歌几乎每晚都会在金丝雀版本上发布更新。 前往官方网站,在您的计算机上下载并安装 Chrome canary。

安装 Chrome 金丝雀版

安装 Chrome 金丝雀版

在 Google Chrome 中启用图像延迟加载

打开 Chrome 金丝雀浏览器并转到命令 URL ‘chrome://flags’ URL。 您将看到如下所示的警告,表明实验性功能可能会影响稳定性。 由于它已经是开发人员版本,因此您无需担心该警告。

Chrome 警告使用实验性功能

Chrome 警告使用实验性功能

搜索“lazy”,您将看到两个标志,如下图所示:

在 Chrome 中搜索延迟加载标志

在 Chrome 中搜索延迟加载标志

#enable-lazy-image-loading – 仅当您滚动靠近它们时才加载图像。

#enable-lazy-frame-loading – 仅当滚动靠近它们时才在框架内加载内容。 延迟帧加载已作为普通 Google Chrome 中的实验性功能提供。

通过从下拉列表中选择“启用”选项来启用延迟图像加载标志。 单击“立即重新启动”按钮关闭并重新打开浏览器窗口。

在 Chrome 中启用延迟加载

在 Chrome 中启用延迟加载

测试延迟加载

现在打开几个网页并将它们向下滚动。 正常滚动时,您可能看不到任何区别。 如果您滚动得非常快,您将看到 Chrome 加载图像占位符,然后在您滚动靠近它时看到图像。 占位符图像将如下所示,表明在浏览器上启用了延迟加载。

在 Chrome 中延迟加载图像

在 Chrome 中延迟加载图像

延迟加载如何在 Chrome 上运行?

好吧,如果您对它的工作原理很感兴趣,那么请前往开发人员的门户以了解更多信息。 基本上,Chrome 会使用 JavaScript 来检查图像是否在浏览器的视口中。 如果没有,那么它将为视口之外的所有图像加载占位符。 当您向下滚动时,将加载真实图像以替换占位符图像。

如果网站所有者已经在服务器级别启用了延迟加载,那么即使启用延迟加载标志,您也不会在 Chrome 上发现任何差异。

推荐:修复Google Chrome更新问题的方法


发表评论