什么是第一个满足的油漆？+行动计划改进它

如果您可以提高您的网站的表现10％，您是否会提高10％？

网站性能评分是一个复杂的网络指标，谷歌在评估页面加载速度时只考虑了FCP (First Contentful Paint)。FCP占网站总体性能分数的10%，在为访问者创造积极的用户体验方面发挥着重要作用。

网站的第一次内容绘制(FCP)是一个页面从发送请求到在屏幕上呈现任何内容所花费的总时间。

FCP分数越高，内容加载越慢。当访问者认为页面加载时间过长时，这可能是一个重要的危险信号。在顶尖设计公司的一项研究中，42%的人说他们将离开一个功能很差的网站．

但是较低的FCP分数表明页面加载速度很快，这意味着内容将更快地交付。快速加载内容是让访问者滚动浏览网站的一种方法。事实上，德勤发现加载时间提高0.1秒零售网站的转化增加8.4％，旅行网站的10.1％。

当一个毫秒有所作为时，最好做任何你可以改善你的网站速度。因此，让我们来看看如何降低FCP，使您的网站尽可能快地和用户友好。

什么是第一个满足的油漆？

首先满足的涂料（FCP）是用户在网站上查看第一个内容所需的时间，无论是图像，文本，徽标，背景图形还是非白色元素。FCP评估用户如何通过测量实际感知的人而不是速度测试工具的结果来培养网站的页面负载速度。

在下面的时间表中，当屏幕上显示第一个文本和图像元素时，您可以在第二帧中看到FCP在第二帧中播放。

图片来源

首先，Contentful Paint是谷歌追踪的6个指标之一灯塔绩效报告，以及互动时间，速度指数，总阻塞时间，最大的内容绘制，和累积布局移位。每个指标都度量了页面加载速度的一个方面。

图片来源

First Contentful Paint是判断页面加载时间轴的重要指标，因为它标记了用户可以看到屏幕上发生的事情的点。如果没有这种保证，用户可能会离开页面去浏览一个更快的网站。

首先，内容涂料不同于核心Web命脉最大内容绘制(LCP)，因为LCP衡量的是网站上最大的元素变得可见所需要的时间。另一方面，FCP度量要加载的第一个元素，它不一定是最大的元素。

一个快速的LCP可以帮助人们确信主要内容对他们是有用的。但是快速的FCP让人们放心某物正在页面上发生，可以让它们保持足够长的时间，以便加载其余的页面。

如何测试第一个满足的油漆

FCP可以在实验室(预发布)和现场(真实用户)中测量。

在实验室中测试FCP是在站点上线之前解决问题的好方法，但它并不是评估性能的最准确的方法。这就是现场测试的意义所在，向您展示当设备、网络连接和用户交互存在差异时，人们如何与您的站点进行交互。

您可以使用以下工具来测试First Contentful Paint:

现场工具

• PageSpeed见解
• Chrome用户体验报告
• 搜寻控制台(速度报告)
• Web - Vitals JavaScript库

实验室工具

• 灯塔
• Chrome Devtools.
• PageSpeed见解

对于本文，让我们通过灯塔运行测试 - 一个开源，自动化工具，用于提高网页的质量。（如果您之前从未运行过此审核，请按照链接轻松逐步说明）。

运行给定URL的测试后，Lighthouse将打开一个新的选项卡以共享站点性能概述。在下面的示例中，该站点在SEO和可访问性中表现良好，但需要对性能和最佳实践进行工作。

图片来源

进一步说，审计还为六个性能指标中的每个指标打分，其中包括第一内容涂料(First Contentful Paint, FCP)。在下面的测试中，FCP的分数是2.5秒——这是一个“需要改进的时间”。

图片来源

但是为了提高FCP，你需要知道什么是“好”分数。

理想的第一次涂漆速度

谷歌推荐的第一个内容油漆评分为1.8秒以内为您的网站访问者提供良好的浏览体验。

图片来源

但是什么决定你的FCP得分？

像谷歌的所有东西一样，有一个方法到了指标。您的FCP分数是通过将您的网站的FCP时间与真实站点的FCP时间进行比较来确定的，使用来自的数据HTTP存档．你可以深入了解如何Lighthouse决定阈值和度量分数．

当评估你的FCP分数时，谷歌说:“一个很好的测量阈值是页面加载的75%，跨越移动和桌面设备。”这有助于获得用户体验的准确表示。

如果你的网站FCP评分很低，你可以采取一些步骤来节省时间，创建一个访客想要滚动浏览的更快的网站。但首先，让我们来探究一下是什么导致了一个糟糕的分数。

是什么原因导致油漆质量高

大文本文件，慢速服务器响应时间，以及多页重定向可以为高度满足的油漆分数贡献。如果您有一个高的第一个满足性涂料（FCP），可能是由于其中一个因素：

• 字体加载速度慢
• 服务器响应时间慢(TTFB)
• 高要求计数和大型转移尺寸
• Render-blocking资bob体育苹果系统下载安装源
• 未使用或低效的CSS
• 基于脚本的元素折叠
• 折叠上方的惰性加载
• 褶皱上方没有内联图像
• 大小过多
• 多页重定向

但是请记住，Lighthouse性能分数是所有度量分数的加权平均值——FCP占总数的10%。因此，权重较大的分数将对您的整体性能评分产生较大的影响。以下是其他Lighthouse指标的权重:

图片来源

如果您的整体性能分数需要改进，可以最好地花时间优化整体阻塞时间或最大的满足油漆，然后才能解决首次满足的涂料。当您在本网站实施良好的开发实践时，您的FCP得分可能会降低。

但是，如果你想提高FCP，你可以采取一些有针对性的步骤，从红色分数移动到绿色分数。

如何改善第一个满足的油漆

提高FCP (First Contentful Paint)分数并不总是那么简单。但有了正确的行动计划，就更容易把那些影响最大的重大错误按优先级排序。让我们来分析一下如何着手这件事。

1.创建一个高优先级问题的列表。

降低FCP评分的第一步是运行上面分享的实验室和现场测试列表来理解完全你需要做的事。

让我们回到前面的Lighthouse性能报告。如果FCP评分“需要改进”，最好参考机会或诊断报告中的建议。要查看所有的建议，切换到“所有”选项卡。或者要查看FCP评分的具体建议，请切换到“FCP”选项卡。

图片来源

上面的测试共享了两个改进FCP的机会:消除渲染阻塞资源，并确保文本在Webfont加载期间保持可见。bob体育苹果系统下载安装

通过学习影响FCP的主要问题，你将会有一个清单，其中包括关注的地方和需要解决的问题。

2.了解忽略什么。

Lighthouse性能报告的另一个有用特性是让您知道您需要做什么不需要集中精力。此列表在性能报告的“通过审计”部分下生成。

图片来源

虽然可以忽略这些非问题是可以的，但知道Google不断更新用于评估页面加载速度的指标。常规运行测试是确保网站性能正常运行的良好做法 - 您可能需要优先考虑一天的“通过审计”。

3.与你的网络团队一起解决问题。

一旦你知道了需要注意的问题，就只需采取行动来改善影响First Contentful Paint (FCP)的问题。

这篇文章不会进入Web开发的杂草。但是，谷歌的这些详细指南是了解影响页面速度和性能的每个因素的优异资源。bob体育苹果系统下载安装如果一个人正在影响您的FCP得分，您可以查看如何学习如何解决问题。

• 消除render-blocking资源bob体育苹果系统下载安装
• 贬低CSS
• 删除未使用的CS
• 预连接到所需的原点
• 减少服务器响应时间(TTFB)
• 避免多个页面重定向
• 预加载关键请求
• 避免巨大的网络负载
• 使用有效的缓存策略服务静态资产
• 避免过多的DOM大小
• 最小化关键请求深度
• 在WebFont Load期间，确保文本保持可见
• 保持请求数量低，传输大小小

无论您的第一个FCP (content Paint)分数是显示红色、黄色还是绿色，总有需要改进的地方。这是web开发中有趣的部分，有时也是令人沮丧的部分。

但请记住，小的变化也会产生大的影响。减少服务器响应时间，压缩图片，并注意上面的因素，可以降低你的FCP分数，加快你的网站，并确保网站访问者有一个更快，更长的浏览体验。