成长第一课：你没那么多观众，不必过多在意别人的眼光

大家好，我是柒八九。

前言

在前几天，我们写了，关于如何利用fetchpriority对页面资源进行优先级的处理。

然后，我也承诺大家也会有关于如何对一个网站进行优化分析。但是，在私下和朋友聊天中发现，其实大家对Chrome浏览器的性能评价指标不是很熟悉，索性就先写几篇关于性能指标的文章。

还有，之前我们写过浏览器相关的知识点，如果想了解该系列文章(浏览器相关)，可以参考我们已经发布的文章。如下是往期文章。

1. 页面是如何生成的(宏观角度)
2. Chromium 最新渲染引擎--RenderingNG
3. RenderingNG中关键数据结构及其角色
4. 浏览器之客户端存储
5. 浏览器_知识点精讲
6. 像素是怎样练成的
7. 浏览器之资源获取优先级(fetchpriority)

你能所学到的知识点

1. 前置知识点
2. FCP 是个啥？
3. 如何测量 FCP
4. 如何优化 FCP
5. FCP的FQA

好了，天不早了，干点正事哇。

前置知识点

常见的性能指标

下文中，如果出现相关术语，我们就不做过多的解释说明了。

Contentful

在 Chrome 的性能指标中，"Contentful" 是一个术语，用来描述页面上已绘制的有意义的内容。

这里，再啰嗦一遍上面的部分内容。

• First Contentful Paint (FCP)：首次有内容绘制，指页面首次绘制出任何文本、图像或其他可视元素的时间点。这表示用户可以看到页面上有一些可见的内容，即页面开始呈现有意义的元素。
  
• Largest Contentful Paint (LCP)：最大内容绘制，指页面中最大的可见内容元素绘制完成并可见的时间点。通常，这个元素是页面上最显眼的图像或文本块，即页面上最大的有意义的绘制内容。
  

"Contentful" 强调了在页面加载过程中绘制的内容具有意义和可见性，与其他不相关的绘制内容（例如背景或辅助元素）相区分。

渲染阻塞资源/ 关键渲染路径

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

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

GTmetrix

GTmetrix 是一个常用的网页性能分析工具，用于评估和优化网站的加载速度和性能。它通过模拟真实用户访问网页的行为，收集并分析与性能相关的数据，并生成详细的报告和建议。

GTmetrix 是一个功能强大且易于使用的网页性能工具，它提供了全面的性能分析和优化建议，帮助开发人员优化网站加载速度、提升用户体验，并确保网站在全球范围内的性能表现。

GTmetrix和我们之前介绍过WebPageTest一样，有异曲同工的作用。

font-display

font-display 是一个 CSS 属性，用于控制自定义字体（如 Web 字体）在加载过程中的显示行为。它允许开发人员在字体加载期间提供更好的用户体验，以避免文本突然闪现或延迟显示的情况。

字体显示时间轴

字体显示时间线基于一个计时器，该计时器在浏览器尝试使用给定下载字体的那一刻开始。时间线分为三个时间段，在这三个时间段中指定使用字体的元素的渲染行为。

属性值

以下是对 font-display 属性的不同取值进行介绍的表格：

例子

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

通过设置 font-display 属性，开发人员可以根据实际需求来平衡字体加载速度和页面显示的稳定性。根据具体情况选择合适的值可以提供更好的用户体验，避免突兀的文本显示变化。需要注意的是，字体的加载速度和可用性也受到网络环境和服务器配置等因素的影响。

Coverage:发现未使用的JS和CSS

Chrome DevTools中的"Coverage"选项卡可以帮助我们找到未使用的JavaScript和CSS代码。删除未使用的代码可以加快页面加载速度，并节省移动用户的流量。

唤起 Coverage

1. 打开命令菜单。

• Command+Shift+P (Mac环境)
• Control+Shift+P (Windows / Linux)

2. 开始输入"coverage"，选择"Show Coverage"命令，然后按Enter键执行该命令。Coverage选项卡将被打开。
3. 
4. 

记录代码覆盖率

在Coverage选项卡中，点击以下按钮之一：

1. 如果想查看加载页面所需的代码，请点击Start Instrumenting Coverage And Reload Page按钮。
2. 如果想查看与页面交互后使用的代码，点击Instrument Coverage Record按钮。
3. 如果想停止记录代码覆盖率并查看结果，点击Stop Instrumenting Coverage And Show Results按钮。

这是chrome devtool文档中的内容，和最新版本的chrome有所出入，但是主要核心点没变。

分析代码覆盖率

在Coverage选项卡中的表格显示了哪些资源被分析以及每个资源中使用的代码量。点击某一行，可以在Sources面板中打开该资源，并查看逐行分解的已使用代码和未使用代码。任何未使用的代码行开头都会有一条红线。

• URL列是被分析的资源的URL。
• Type列表示资源是否包含CSS、JavaScript或两者都有。
• Total Bytes列是资源的总大小（以字节为单位）。
• Unused Bytes列是未使用的字节数。
• 最后一列是Total Bytes和Unused Bytes列的可视化。条形图中的红色部分代表未使用的字节，绿色部分代表已使用的字节。

性能分数

性能分数是基于指标分数的加权平均值。

我们可以看到在Lighthouse(开源的自动化工具，用于评估网页性能和质量。)中针对FCP/LCP/SI等的权重。

同时，我们可以通过 Lighthouse Scoring Calculator(一个工具，用于计算 Lighthouse 分数)进行模拟计算。

网站的首次内容绘制（First Contentful Paint 简称：FCP）是Google核心Web要素中最有意义的指标之一。与其他绘制和加载指标不同，FCP不是一个纯粹的技术指标，而是关注用户的体验和他们在网站上首先感知到的内容，而不是后台加载的内容。通过优化网站的FCP，你不仅可以加快整体加载时间并提高页面速度评级，还可以向访问者明确显示他们的请求正在被处理，加载没有停滞。

FCP 是个啥？

网站的FCP是指浏览器呈现DOM中的第一个内容片段，向用户提供页面正在加载的第一次反馈

"Contentful"包括图像、canvas元素（非白色）或文本。简单来说，FCP就是用户可以看到页面的某个部分发生变化的时刻。通常，这表现为页眉栏或背景图片。这个元素可能不是从服务器渲染或加载的第一个元素，但它是用户可以看到的第一个元素，对于网站的用户体验至关重要。

FCP不计算包含在iframe中的内容。非内容绘制，例如背景颜色的变化，也不属于FCP，而是属于FP(首次绘制)。

FCP是一个相对主观的测量点。虽然可以定量地测量它，但它也相对主观。拥有快速的FCP对于用户来说很重要，因为它会让用户感觉到你的网站加载速度很快，无论实际上是不是如此。与竞争对手相比，你的网站可能具有更长的FID(首次输入延迟)，但由于更快的FCP，它在用户眼中可能会显得更快。

尽管如此，FCP并不是虚头巴脑的测量指标。

较低的FCP时间通常是页面速度的一个良好指标，并且优化它的方法也会影响其他页面速度指标（如LCP时间）。

如何测量 FCP

下图是使用GTmetrix对baidu的网站的性能分析。

尽管FCP由于用户感知而重要，但它是一种可量化的指标，可以进行测量和评分。

我们可以使用一些工具对网站进行性能分析。而根据测试环境不同，又分为两类:

1. 基于真实用户的实际页面加载与页面交互
2. 使用工具在稳定、受控的环境中模拟页面加载