页面速度对于良好的用户体验非常重要。
本文将回顾一些新的和不太为人所知的提高网站速度的方法。
最大的内容绘画是什么？
最大内容绘制（LCP）衡量访问者打开网页后多久能够看到主要内容。
LCP 是用于评估网页性能的三个核心网络指标之一。其他核心网络指标包括：
Google 为网站提高排名需要达到的每个指标定义了阈值。
以下是一些可用于提高 LCP 分数的技巧。
1. 在您的网站中添加投机规则
希望许多访问者能够浏览您的网站，探索您的企业所提供的所有服务。
推测规则是一项新的浏览器功能，可让您轻松优化这些后续的页面浏览量。它们允许网站在访问者打开其他页面之前主动加载您网站上的其他页面。
例如，访问者在阅读博客文章后可能会接着查看您的主页，或转到注册页面。如果这些页面使用推测规则进行预渲染，则这些导航可以即时完成。这意味着您的 LCP 得分将低于 100 毫秒。
向您的网站添加推测规则很容易。只需向您的网站添加如下脚本标签即可：
<script type="speculationrules">
{
"prerender": [
{
"urls": ["/", "/signup"]
}
]
}
</script>2. 使用真实用户数据优化 LCP
有很多网站性能测试工具，包括PageSpeed Insights和DebugBear 的免费网站速度测试。
这些工具运行所谓的实验室测试：在受控的测试环境中打开页面并进行性能测量。
但是，有时实验室的 LCP 值与实际用户体验不符。发生这种情况的原因有很多，包括：
- 实验室测试可能会触及缓存，而大多数用户需要重新生成数据。
- 许多真实用户登录后发现页面加载速度较慢。
- 真实用户的网络和设备速度与实验室环境不同。
- 访客的设备尺寸与实验室测试的设备尺寸不同。
真正的网站访客也有不同的体验。对某一部分访客有效的优化可能对另一部分访客无效。
这里，真实用户监控（RUM）工具可以帮助您更好地了解您的网站上发生的情况以及哪些优化会产生最大的影响。
例如，RUM 数据可以告诉您哪些页面元素负责 LCP 渲染里程碑。这会因访问者而异，了解哪些 LCP 元素需要优化可以为获得良好的 LCP 分数奠定基础。
Google 报告实际用户页面速度时会查看第 75 个百分位数值。例如，如果您的 LCP 分数为 3 秒，则意味着 75% 的用户等待主页内容的时间少于 3 秒，而 25% 的用户等待的时间更长。
然而，这只是一个汇总值。有些访客可能会等待 5 秒或更长时间 – 这些人很可能会离开。
真实用户监控可以为您提供更详细的不同访问者对您网站的体验。例如，通过显示每个核心 Web 指标的直方图。您还可以查看特定访问者的体验以进行优化。
我们已经看到访问者设备对您网站的 LCP 分数有很大影响。
根据每个网站访问者的屏幕尺寸，首屏上方将显示不同的内容，并且图像将以不同的尺寸显示。
即使在同一页面上，不同的访问者所看到的 LCP 图像也可能不同。
实验室测试总是使用相同的屏幕尺寸，但真实用户数据会捕获用于访问您网站的各种设备。
因此，真实的用户监控数据可以准确地显示您网站上哪些图像加载最慢且需要进行优化。
3. 识别缓慢的 LCP 子部分
要在您的网站上显示 LCP 图像，需要完成四件事。这些LCP 子部分是：
- 第一个字节的时间：服务器对初始文档请求的响应速度有多快？
- 资源加载延迟：浏览器多快发现 LCP 图像？
- 资源加载时间：下载 LCP 图像需要多长时间？
- 渲染延迟：LCP 图像加载后是否立即显示，还是有延迟？
许多页面速度工具都是基于Google 的免费 Lighthouse 测试构建的，包括 PageSpeed Insights。在这里，在诊断部分，您可以找到有关最大内容绘制元素的详细信息。元素预览下方的 Lighthouse 显示了 LCP 子部分细分。
根据哪个 LCP 组件对您的总体得分贡献最大，不同的优化将对您的网站有意义。
例如，如果加载时间很长，则表明您的网站上有一张需要很长时间才能下载的大图片。在这种情况下，调整图片大小或使用WebP 等现代图片格式将是一种有希望的优化方法。
然而，谷歌最近发表了一篇关于如何优化 LCP 指标的常见误解的文章，发现：
- 加载时间通常不是一个重要因素。
- 其他子部分如 TTFB 和加载延迟在改进 LCP 方面发挥着更大的作用。
确保客户端请求 HTML 时服务器能够快速响应。在 HTML 中，直接引用 LCP 图像，以确保加载 HTML 和发现图像之间没有延迟。
4. 预加载并优先处理 LCP 镜像
当浏览器加载您的网站时，HTML 代码将引用大量附加资源（例如样式表、脚本、图像）。浏览器需要为每个请求分配优先级。
图像通常被视为低优先级，因为它们不会阻挡网站上的其他内容。但是，负责 LCP 的主图像应尽早加载。
请求瀑布可视化可以揭示这些问题。在此示例中，我们看到 LCP 图像加载较晚，并且最初优先级较低。然后，当浏览器意识到图像在视口中时，优先级变为高。
可以使用fetchpriority 属性来优化 LCP 分数。此 HTML 属性会告诉浏览器给定的资源是否重要，并且可以简单地将其添加到 img 标签中，如下所示：
<img src="photo.jpg" fetchpriority="high">有了这个属性，浏览器可以尽快开始加载图像，并优先下载它而不是页面上的其他资源。
如果图像未在 HTML 文档顶部直接引用，则也可以使用预加载资源提示来提前开始加载图像。
这样，当图像添加到页面时，图像会立即显示，而不是等到那时才开始加载。
5. 持续监控页面速度
在您的网站上运行一次性测试是开始优化性能的好方法。
但这些优化对真实用户真的有效吗？
如果发生不相关的变化导致性能下降，会发生什么情况？
在这种情况下，您需要一个像 DebugBear 这样的网站监控工具。
性能监控工具会持续测试您的网站和竞争对手的网站。您将获得：
- 详细的报告包含提高页面速度的建议。
- 如果您的网站性能变差，则会发出警报。
DebugBear 包含三种类型的数据：
- 定期进行实验室测试。
- Google CrUX 数据（影响 SEO）。
- 真实用户监控。
对您的网站有这样的了解可以为您的团队通过 Google 核心网络生命力评估奠定基础。