如何利用首次内容绘制 (FCP) 加快页面加载速度

您是否知道,网站速度仅提高 1 秒就能带来 27% 的转化率提升?每个让您更接近这一秒提升的用户体验指标都至关重要。

有一个指标可以帮助您展示出色的网站速度并在第一时间吸引访问者。那就是首次内容绘制 (FCP)。

注意。如果你忽略 FCP,你的网站可能会变慢。用户和 Google 都不喜欢加载缓慢的网站。

因此,您的流量和搜索排名可能会下降。这可能是您最不希望看到的结果。

这就是小指标对网站产生的影响。

在这篇博文中,我将向您介绍 手机号码数据 有关 FCP 的所有信息;它是什么、如何衡量它、如何优化它等等。这将帮助您释放 FCP 为您的网站带来的好处,同时避免忽略此指标带来的不良影响。

了解 FCP

那么,什么是首次内容绘制?

 

手机号码数据

首次内容绘制 (FCP) 衡量的是网站访问者查看页面上第一个内容所需的时间。内容可以是任何内容,包括文本、图片、背景图形、视频、非白色画布和 SVG 元素。

简单地说,FCP 告诉用户他们当前所在的页面已经开始加载。

作为一项用户体验指标,FCP 关注的是用户首先在您的页面上看到的内容,而不是他们的浏览器最初从您的网站服务器接收的内容。这就是它与首次字节时间 (TTFB)的区别所在。

想想看。假设你想在线订餐。你首先访问外卖网站或应用程序,看看它能提供什么。

你有没有想过网站如何为你提供如此多常态已经被配置流时措施而是可能 的选择,或者它是如何做到的?当然没有,因为这不是你的问题。这就是 FCP 的情况。

FCP 关注的是前端(通常是用户端)发生的第一个变化迹象。它并不关注特定场景背后发生的事情。

为什么 FCP 很重要?

好了。现在你知道了 FCP 是什么。但你为什么要关心它呢?让我来解释一下。

更快的 FCP 可以让访问者觉得您的网站 美国名单 加载速度更快。您需要让他们感到满意,以促使他们在您的页面上花费更多时间。

毕竟,用户喜欢什么,谷歌就喜欢什么。

从这个角度来看,更快的 FCP 几乎能够向 Google 发送积极的用户体验信号。这将提高您获得 Google 青睐的机会。

结果如何?

Google 更有可能提高您的网站排名。提高排名可以提高您的在线知名度,为您的网站带来更多自然流量,并提高您的业务投资回报率。

什么是良好的 FCP 分数?

如何知道您的网站拥有更快的 FCP?这就是为什么密切关注您的 FCP 分数至关重要。

Google 已预先定义了 FCP 分数,分为“好”、“需要改进”和“差”。

  • 如果你的 FCP 小于或等于 1.8 秒,那就很好了。
  • 如果页面超过了 1.8 的门槛,但时间不超过 3 秒,则说明您的页面还需进行一些改进
  • 如果 FCP 超过 3 秒,则表示性能不佳

Google 建议测量第 75 个百分位的页面加载量,以确保您满足桌面和移动设备上的 FCP 标准。

如何测量FCP?

以下是检查网页首次内容绘制分数的一些简单方法。

使用 PageSpeed Insights

使用 PageSpeed Insights 是了解您的 FCP 分数的最简单方法。

转到PageSpeed Insights。输入页面 URL 后,您将看到一份报告,其中显示了首次内容绘制分数以及其他指标。

GT矩阵

GTmetrix 是列表中的下一个。

访问GTmetrix。输入您的页面 URL 并按回车键。您将看到生成的报告,类似于此处的报告。您可以在其中找到列出的 FCP 分数。

Chrome 开发者工具

以下是使用 Chrome DevTools 测量 FCP 的方法。

  • 在 Google Chrome 上打开您的网页。
  • 右键单击页面上的任意位置并从下拉菜单中选择检查。
  • 导航到“性能”选项卡并单击“重新加载”或按 Ctrl+Shift+E。
  • 检查 Chrome 生成的报告的“时间”部分中的 FCP 分数。

灯塔

Lighthouse 是 Google 推出的一款开源工具,用于自动审核,帮助提高网站性能。以下是使用此工具检查 FCP 分数的方法。

  • 在 Chrome 网上应用店中找到 Lighthouse 扩展程序并安装它。
  • 使用 Google Chrome 浏览器打开您想要评估 FCP 分数的页面。
  • 单击右上角的 Lighthouse 扩展,然后选择在 Lighthouse Viewer 中查看结果
  • 点击生成报告按钮。

您的报告将会如下所示。

除此之外,您还可以使用以下现场工具来测量FCP。

  • Chrome 用户体验报告
  • 搜索控制台(速度报告)
  • web-vitals JavaScript 库

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注