谁需要 AMP？使用 Layzr.js 简化延迟加载响应图像的过程
- PHPz原创
- 2023-09-08 11:09:071382浏览
Google 的“加速移动页面”(AMP) 项目最近帮助影响网站变得更快。凭借良好的技术和强大的内容分发网络，Google 直接使 AMP 增强的网站变得更快。然而，AMP 也通过鼓励我们查看 AMP 包含的优化和最佳实践来间接发挥作用。即使您不打算让您的网站兼容 AMP，将 AMP 了解为优化非 AMP 网站的待办事项列表也很有用。
此列表中的优化之一是一种称为“延迟加载”的技术，我们在最近关于使用 AMP 的
延迟加载可以让访问者更快地开始与内容互动，而增强的加载速度可以提高您的搜索引擎排名。页面上的图像越多，获得的速度提升就越大。
在本教程中，我们将了解如何使用名为的脚本在非 AMP 网站上部署延迟加载Layzr.js。我们将尽可能地复制 AMP 的 <amp-img></amp-img> 元素的功能，但我们还将使用 Layzr 特有的一些功能。
我们开始吧！
1. 基本设置
作为文章“AMP 项目：它会让您的网站更快吗？”的一部分我创建了一个包含五个图像的基本布局。为了使您能够比较使用 AMP 和自己部署延迟加载，我们将重新创建相同的五个图像布局。我将在本教程后面向您展示如何运行各种加载速度测试。
在本教程附带的源文件中，您将找到布局的 AMP 版本，以及您将在此处制作的完整版本。两者都包含在内，以帮助您决定哪种方法最适合您。
在我们逐步完成所有操作时，我建议您使用 Chrome 开发者工具 (F12) 测试您的工作，并打开网络选项卡，选中禁用缓存 ，并将限制设置为常规 3G。这会模拟平均移动连接，向您实时显示每个图像加载的图表，并将帮助您清楚地了解延迟加载的运行情况。
刷新页面进行测试时，按住重新加载按钮，这将出现一个下拉菜单会显示不同的选项。选择清空缓存并硬重新加载以完全模拟访问者首次到达您的网站。
创建 HTML Shell
让我们从基础知识开始。首先，创建一个文件夹来存放您的项目，并在其中创建一个名为 index.html 的文件。
打开它进行编辑并添加以下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layzr.js Lazy Loading</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style>
body {
margin: 0;
}
img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Welcome to the lazy loaded web</h1>
</body>
</html>
通过上面的代码，我们只是获得了一个 HTML shell，并包含了一些 CSS，以确保页面的 body 和图像周围没有任何意外的间隙。
我们还包括 margin: 0 auto; ，以便我们稍后添加的图像将居中。
加载 Layzr
layzr.js 脚本有两个方便您加载的 CDN 源 - 我们将使用来自 Cloudfare 的一个。
将此代码添加到您的 html 中，位于结束
以上是谁需要 AMP？使用 Layzr.js 简化延迟加载响应图像的过程的详细内容。更多信息请关注PHP中文网其他相关文章！