浏览器之性能指标-LCP

前言

前几天，我们写了关于Chrome的FCP,看后台数据，反响还是不错的。那么，今天我们继续讲另外一个比较重要的性能指标LCP。

如果想了解该系列文章(「浏览器底层原理&优化方案」)，可以参考我们已经发布的文章。

你能所学到的知识点

❝

1. 前置知识点
2. LCP 是个啥
3. 如何测量 LCP
4. 优化 LCP 的10种方式

❞

前置知识点

视口（Viewport）

❝网页视口是指在浏览器中用于显示网页内容的「可见区域」。简单来说，它是「用户在屏幕上实际能看到的网页部分」。 ❞

网页视口的大小取决于「用户设备的屏幕尺寸和浏览器窗口的大小」。在不同的设备上，网页视口的宽度和高度可能会有所不同。例如，在手机上浏览网页时，网页视口通常较小，而在台式机或笔记本电脑上则较大。

在网页开发中，可以使用CSS的视口单位（viewport units）来设置元素的尺寸，这些单位根据网页视口的大小进行调整。常见的视口单位有vw（视口宽度的百分比）、vh（视口高度的百分比）、vmin（视口宽度和高度中较小值的百分比）和vmax（视口宽度和高度中较大值的百分比）。

如何设置视口（Viewport）

HTML5引入了一种方法，让网页设计者通过<meta>标签来控制视口。

你应该在所有网页中包含以下<meta>视口元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这样可以向浏览器提供关于如何控制页面尺寸和缩放的指示。

• width=device-width部分将页面宽度设置为与设备的屏幕宽度相同（根据设备的不同而变化）。
• initial-scale=1.0部分在页面首次加载时设置初始缩放级别。

下面是一个没有视口标签的网页示例，以及添加了视口标签后的相同网页示例：

「左边的内容」

没设置viewport

「右边的内容」

设置了viewport

渲染阻塞资源

对于，渲染阻塞资源的更多介绍，我们之前在浏览器之资源获取优先级(fetchpriority)有过介绍，可以回顾一下。

下文中，出现这些专有名词，我们就不在详细介绍了。

浏览器级图片懒加载

根据权威结构[1]的数据，图像是大多数网站最常请求的资源类型，并且通常占用比其他任何资源更多的带宽。在90%分位点上，网站在桌面和移动设备上发送的图像超过5MB。

以前，有两种方式可以推迟加载屏幕外的图像：

1. 使用Intersection Observer API
2. 使用scroll、resize或orientationchange的事件处理程序

无论选择哪个选项，开发人员都可以包含延迟加载功能，许多开发人员还构建了第三方库，提供了更易于使用的抽象层。然而，由于浏览器直接支持延迟加载，因此不再需要外部库。浏览器级别的延迟加载还确保即使在客户端禁用了JavaScript，也仍然可以延迟加载图像。

loading 属性

根据与设备视口的位置关系，Chrome以不同的优先级加载图像。视口下方的图像以较低的优先级加载，但它们仍在页面加载时被获取。

我们现在可以使用loading属性完全推迟滚动时达到的视口外的图像的加载：

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

以下是loading属性支持的值：

• lazy：推迟加载资源，直到它离视口的计算距离足够近。
• eager：浏览器的默认加载行为，与不包含属性时相同，即无论图像在页面上的位置如何，都会加载图像。尽管这是默认值，但如果我们的工具在没有明确值时自动添加loading="lazy"，或者如果我们的代码检查工具在没有明确设置时报错，明确设置eager可以很有用。

每个网页由几十个或几百个元素组成。其中包括文本、图片、按钮等等。每个元素的大小各不相同，而最大的元素可以通过一个称为「最大内容绘制」的指标告诉我们有关网站优化的很多信息。

LCP 是个啥

❝LCP:是Largest Contentful Paint的简写，中文名称最大内容绘制 ❞

在大多数网页上，有一个元素由于其大小和突出性而与其他元素不同。

例如，很多公司网站的首页，其中的主要部分(轮播图/图片信息)占据了视口的主导位置：

字节跳动官网

该主要部分代表了该特定页面的LCP。

❝换句话说，LCP是网站呈现包含「最大数量内容」的元素所需的时间。 ❞

如果想了解此页面的LCP，我们需要测量「主要部分加载所需」的时间。理论上，「如果我们网站的LCP得分较低，这意味着我们的网站运行流畅，并且给用户德芙般的使用体验」。

但是，这里有一点需要说明，LCP得分与我们网站的「整体加载时间」可能会有所不同。我们可能有一个需要三秒钟才能完全加载的页面，但其LCP可能仅为2秒钟。这是因为大多数现代网站在文本和媒体文件之外还加载脚本资源。

通常情况下，LCP与FCP是相关的。FCP也是一个指标，它告诉我们当某人访问我们的网站时，「第一个带有任何内容的元素绘制所需的时间」。(如果想了解更多关于FCP的内容，可以参考我们之前写过的浏览器之性能指标_FCP)

❝Last but not least，在测量网站的LCP时，Google并不会考虑所有元素。它会忽略诸如SVG文件和video等元素。 ❞

如何测量 LCP

通常情况下，确定网站上最大的内容元素是相当容易的。我们只需要等待页面「完全加载」，大致浏览下页面内容。在大多数情况下，「现眼包」元素就会脱颖而出。

通常情况下，它会是一个图像或文本块。LCP还会因页面环境而异，因为LCP元素基于视口展示。

对于LCP来说，真正的技巧在于「测量特定元素加载所需的时间」（而不是页面本身）。

最流行的用于测量LCP的工具之一是Google的PageSpeed Insights[2]。这是一个免费工具，帮助用户通过提供相关的审计和改进机会来分析和诊断网页性能。

使用PageSpeed Insights相对简单。在操作该工具时，需要执行以下步骤：

• 将网站的URL输入或粘贴到页面顶部的搜索栏中，然后点击“分析”按钮。

  

• 分析完成后，「真实用户的体验」部分下一些指标的详细信息，包括LCP：

  

  • PageSpeed Insights从「多个用户」收集实际性能数据，并使用这些数据随时间提供综合得分。这种方法比使用单个测试来确定网站性能要精确得多。
  • 此外，我们可以获得每个得分的百分比。在上面的例子中，我们可以看到89%的页面加载时间在1.5秒内完成，这是一个很好的得分。然而，剩下的11%的页面加载时间超出了该范围。这意味着对于某些用户来说，LCP需要更长的时间来解析。
  • 重要的是要理解，即使我们的网站经过了良好的优化，加载时间仍然会因用户而异。一些访问者可能拥有较慢的互联网连接或与我们的服务器距离太远。这只是加载时间在某些情况下可能较高的众多原因中的两个。这就是为什么具有一个「平均分数作为参考至关重要的原因」。
• 检查“诊断性能问题”部分，以获得有用的指标和改进建议来提高性能。得分代表整体结果。

  

  • PageSpeed Insights使用这些「实验数据」为我们提供结果开头显示的总体得分。实验数据无法提供像上面「真实用户的体验」的页面准确信息。然而，它仍然能够给我们一个对网站性能的相当好的了解。
• 我们还可以找到更多的指标，包括LCP、FCP和CLS。点击“展开视图”可以阅读每个指标的简要解释。

  

• PageSpeed Insights还会提供多个改进网站性能的建议和诊断。我们还可以根据相关的指标对它们进行筛选。

  

上面简单介绍了，关于PageSpeed Insights对网站性能的分析。我们还可以使用其他工具，包括Lighthouse[3]和Search Console[4]对网站做一次「体检」。

LCP得分

以下是LCP得分的范围及其对应的评价：

❝理想情况下，我们的LCP得分应该低于2.5秒。这个时间越低，越好。为了获得最佳得分和用户体验，我们的整体加载时间应保持在3秒以下。在此时间点之后，我们通常会开始看到跳出率显著增加。 ❞

LCP 测量的是哪些元素？

每个指标都测量不同的网页元素。例如，FCP 测量网页显示第一个内容所需的时间。在这种情况下，内容包括图片、图表和文本元素。

而LCP仅测量页面能够在视口（viewport）内加载最大元素的速度。

❝触发LCP记录的元素包括：

• 图像元素（包括SVG元素内的图像）
• 视频元素
• 使用url()函数加载「背景图像」的元素
• 块级元素内的文本节点

❞

被视为最大元素的定义取决于其类型。对于图像元素，报告的大小要么是其可见大小，要么是其固有大小（intrinsic size），取较小的那个。对于文本元素，LCP仅考虑其文本节点的大小。

❝此外，LCP不会考虑元素的任何超出视口的部分。这意味着大小的计算不包括任何边距（margin）、填充（padding）或边框（border）。 ❞

优化 LCP 的10种方式

由于LCP是网站页面加载速度的重要指标，较差的LCP得分可能导致用户体验不佳。造成网站性能差的常见原因包括：

• 服务器响应时间和资源加载时间过慢
• 客户端渲染（Client-side rendering）
• 阻塞渲染的资源（Render-blocking resources）

幸运的是，有几种方法可以解决这些问题。接下来，我们来搞点，干货。

1. 利用CDN

❝内容分发网络（CDN）是提升网站流量管理的优秀工具。CDN利用额外的服务器，在原始服务器需要处理高流量时提供帮助。通常，较大的网站会使用这项技术来定期处理许多访问者。 ❞

由于CDN可以平衡网络负载，因此可以帮助改善LCP，因为「访问者的请求不需要在同一服务器中排队」。这可能导致更快的LCP得分，并潜在地改善用户体验。

CDN还可以与其他软件结合使用，例如实时优化和转换图像大小的图像CDN。这可以进一步提高富媒体网站呈现内容的速度。

最受欢迎的CDN解决方案之一是Cloudflare[5]，提供全球120多个中心。该服务提供免费计划，并且具有简单的配置过程。

当然我们还可以考虑其他CDN解决方案。

2. 确保正确的图像尺寸

正如前面提到的，根据图像的大小，某些图像可能成为LCP的最大元素。因此，确保网页具有优化的图像尺寸对于保持良好的LCP得分非常重要。

❝关键在于根据用户设备理解正确的图像尺寸。为了确保良好的LCP得分，网页需要使用响应式图像。 ❞

例如，如果我们的网站的桌面版使用大尺寸的图片，移动版应使用中等尺寸的图像。

还要了解我们的网站平台的默认图像尺寸。例如，我们可以根据业务需求指定不同的图像尺寸，

• 缩略图 - 150像素正方形。
• 中等尺寸 - 最大300像素正方形。
• 大尺寸 - 最大1024像素正方形。
• 原始尺寸 - 指原始图像尺寸。

❝图像报告的是其最小元素尺寸。这意味着压缩图像将报告其可见尺寸，而放大图像将报告其原始尺寸。 ❞

3. 优化图像

除了确保正确的尺寸外，还有其他方法可以优化网站上的图像以改善加载时间。

一些最受欢迎的用于优化网站图像的工具包括TinyPNG[6]、Imagify[7]和Kraken[8] (付费)。

优化图像不仅有助于提高LCP得分，还可以节省存储空间，并潜在地改善我们网站搜索引擎优化（SEO）性能。

4. 提高服务器响应时间

页面加载时间与Web服务器的响应时间密切相关。

❝用户浏览器请求和服务器请求之间的往返过程是影响加载速度的主要因素之一。这个过程也被称为往返时间（RTT）。 ❞

有几种方法可以改善服务器的响应时间，包括：

• 实施服务器端缓存
  • 网站所有者可以利用浏览器和服务器端缓存。服务器端缓存功能通常在我们的托管配置中可用。
• 升级服务器规格
  • 服务器的硬件规格显著影响其性能。因此，考虑升级到具有更好的CPU能力和更大存储容量的服务器。
• 优化应用程序代码
  • 对于函数中使用的代码进行优化
  • 例如数据库查询，可以帮助改进LCP得分。
  • 例如，删除非关键的CSS可以加快初始呈现速度。

5. 实施缓存

❝缓存是指将页面的静态资源存储在临时存储中。通过「减少初始呈现过程中传输的数据量」，可以实现更快的页面加载时间。 ❞

主要有两种缓存方法

1. 服务器端缓存
2. 浏览器缓存

通过利用浏览器缓存，访问者可以将缓存存储在本地存储中。因此，当重新访问我们的网站时，他们无需下载相同的数据。我们可以手动启用浏览器缓存，也可以使用插件来实现。

另一方面，服务器端缓存是一种将预先制作的网页版本存储在原始服务器中的方法。使用这种方法，当用户重新访问网站时，服务器无需从数据库重新构建或加载页面内容。

启用网站缓存的最受欢迎的工具之一是LiteSpeed[9]。它具有先进的缓存功能以及其他有用的功能，如动态内容优化和HTTP负载均衡器。

6. 修复延迟加载问题

❝延迟加载是一种技术，在初始呈现过程中推迟非关键的CSS和其他资源。相反，它将专注于加载视口上方的内容，并仅在需要时渲染非关键资源，以加快页面加载过程。 ❞

使用这种方法，我们的网站可以根据它们与视口的距离异步加载文件。

例如，首屏上方呈现的内容（如logo图像）将在初始加载时立即显示。但是，视口之外的视频缩略图等元素将「用占位图像替换」，直到用户滚动到它们为止。

然而，由于几个问题，延迟加载有时可能会恶化LCP得分。例如，实施原生延迟加载并使所有图像遵循延迟加载行为的网站可能会得到较低的LCP得分。

要解决此问题，只需使用属性loading="eager"将可能被选为最大内容绘制时间元素的主要或特色图像进行标记。此功能使图像元素无论与视口的距离如何都可以立即渲染。

这个问题也可能发生在使用JavaScript进行延迟加载的方法中。由于浏览器需要在呈现元素之前执行JavaScript，它可能会延长加载时间并恶化LCP得分。

解决这个问题最有效的方法是在首屏上方呈现的图像上禁用延迟加载。结果，浏览器将在不需要预先执行JavaScript的情况下加载它们。

7. 缩小JS、CSS和HTML文件

文件缩小是一种通过减少文件中的代码行数来减小文件大小的方法。这是一种常见的文件优化方法，可以帮助改善我们的LCP指标。

一些核心文件，如CSS、JavaScript和HTML，可能在其代码中包含许多不必要的空格，这使得它们的大小变大。即使它们在个别情况下可能看起来不重要，但当积累起来时，它们可能会恶化网站的性能。

8. 消除阻塞渲染的JavaScript和CSS

如何识别关键资源

减少阻塞渲染资源影响的第一步是确定哪些是关键资源，哪些是非关键资源。使用Chrome DevTools中的Coverage选项卡来识别非关键的CSS和JS文件。当你加载或运行一个页面时，该选项卡会告诉你有多少代码被使用，与加载了多少代码进行了比较：

• 绿色（关键）：对于首次绘制而言是必需的样式；对于页面的核心功能而言是关键代码。
• 红色（非关键）：适用于不立即可见内容的样式；对于页面的核心功能而言未使用的代码。

❝关于Coverage的使用方式，可以参考我们之前写过的浏览器之性能指标_FCP)，这里就不在赘述了。 ❞

如何减少阻塞渲染的JS

一旦确定了关键代码，将这些代码从阻塞渲染的URL中移动到HTML页面的内联脚本标签中。页面加载时，将具备处理页面核心功能所需的内容。

如果阻塞渲染的URL中存在非关键代码，可以将其保留在URL中，并使用async或defer属性标记该URL。

如何减少阻塞渲染的CSS

类似于将代码内联到<script>标签中，将首次渲染所需的关键样式内联到HTML页面头部的<style>块中。然后，使用preload异步加载剩余的样式。

考虑使用Critical工具[10]自动提取和首屏可见内容的CSS样式。

消除阻塞渲染样式的另一种方法是将这些样式「拆分为不同的文件」，按媒体查询进行组织。然后，为每个样式表链接添加media属性。在加载页面时，浏览器仅会阻塞首次渲染，以检索与用户设备匹配的样式表。

最后，压缩CSS文件，删除多余的空白字符和字符。这可以确保向用户发送最小的资源包。

9. 压缩文本资源

除了缩小文件大小之外，压缩还可以是优化CSS、HTML和JavaScript等文本资源的好方法。由于文件大小较小，这可以使传输过程更快，从而获得更好的LCP得分。

文本资源压缩的最常见方法之一是GZIP，它属于无损压缩类别。这意味着在压缩过程中，它将保留文件中的所有信息。

10. 推迟解析JavaScript

Web浏览器通常按照自上而下的顺序加载代码，但会优先处理任何JavaScript代码，这可能会减慢页面加载速度并恶化用户体验。

推迟解析JavaScript意味着调整页面以延迟处理页面上的非关键JavaScript代码。使用此方法，浏览器可以优先加载实际的页面内容，以更快地维持访问者的注意力。

总结

在评估网站性能时，最好不要只关注一个单一的数字，比如主页加载所需的时间。尽管这很重要，但LCP等单个指标可以帮助我们确定可能需要改进的具体元素和区域。

每个页面的LCP给我们一个了解访问者需要等待多长时间，直到页面加载到足够程度，使他们能够理解页面内容。而FCP指标则表示观察者需要等待多长时间才能看到页面内容。即便如此，他们可能还需要等待更长时间，直到页面变得可交互，这可能发生在LCP之后。

Reference

[1]

权威结构: https://httparchive.org/reports/page-weight

[2]

PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/

[3]

Lighthouse: https://developers.google.com/web/tools/lighthouse

[4]

Search Console: https://search.google.com/search-console/

[5]

Cloudflare: https://www.cloudflare.com/cdn/

[6]

TinyPNG: https://tinypng.com/

[7]

Imagify: https://imagify.io/

[8]

Kraken: https://kraken.io/

[9]

LiteSpeed: https://www.litespeedtech.com/

[10]

Critical工具: https://github.com/addyosmani/critical/blob/master/README.md

[11]

viewport: https://www.w3schools.com/css/css_rwd_viewport.asp

[12]

消除渲染阻塞资源: https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/?utm_source=lighthouse&utm_medium=lr

[13]

优化LCP: https://www.hostinger.com/tutorials/largest-contentful-paint

[14]

LCP: https://www.elegantthemes.com/blog/wordpress/lcp

[15]

browser-level-image-lazy-loading: https://web.dev/browser-level-image-lazy-loading/