性能优化-核心指标-FP

什么是 FP

首次绘制 (FP) 衡量从用户首次导航到网页到浏览器首次将任何像素渲染到屏幕上的时间。这是用户感知页面加载的第一个视觉信号，标志着页面从完全空白状态开始有了第一次视觉变化。FP 也叫白屏。

在此加载时间轴中，FP 发生在第一帧，因为这是浏览器首次在屏幕上绘制任何像素的时间。

在上图中所示的加载时间轴中，FP 发生在第一帧，这是浏览器开始渲染页面的关键时刻。需要注意的是，FP 可能只是渲染了背景色、边框或其他非内容元素。

您会发现，FP 通常早于 FCP（首次内容绘制），这是一个重要的区别。FP 关注的是_任何_视觉变化，而 FCP 则专注于有意义内容的首次渲染。

FP 得分多少算好

为了提供良好的用户体验，网站应尽量将首次绘制时间控制在 1.0 秒或更短的时间。为确保大多数用户都能达到此目标值，一个合适的衡量阈值是网页加载时间的第 75 个百分位数，并按移动设备和桌面设备进行细分。

更详细的数据可以参考 lighthouse 性能分计算

如何获取 FP

在 js 中，可以通过 PerformanceObserver 对象来获取 FP 的具体数据

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-paint')) {
    console.log('FP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

PerformanceObserver 是用于监测性能条目的 API，可以观察特定类型的性能指标（如绘制时间、资源加载等）

代码验证如下：

通过测试 本网站的 FP 数值是 298 ms，在 1.0s 以内，属于性能优秀的表现。这也印证了我们在 Lighthouse 性能分计算过程详解 过程中获得高分的原因。

如何优化 FP

FP 是用户首次输入网址 -> 浏览器首次在屏幕上绘制任何像素的时间。因此，我们要确保浏览器能够尽快开始渲染过程，消除渲染阻塞是关键。

🌐 优化网络连接

网络优化是web性能的基础，我们已经总结在 前端性能优化-网络篇 感兴趣的直接查阅即可。

这里给到优化思维导图：

🚀 消除渲染阻塞资源

• 优化关键渲染路径：识别并优先加载关键 CSS，延迟非关键资源

• 内联关键 CSS：将首屏渲染必需的 CSS 直接内联到 HTML 中，避免额外的网络请求

• 异步加载 JavaScript：使用 async 或 defer 属性，防止 JS 阻塞 HTML 解析和渲染

• 移除未使用的代码：通过代码分割和 Tree Shaking 减少资源体积

⚡ HTML 解析优化

• 简化 HTML 结构：减少 DOM 深度和复杂性，加快解析速度

• 预连接关键域名：使用 <link rel="preconnect"> 提前建立连接

• DNS 预解析：使用 <link rel="dns-prefetch"> 提前解析域名

🎨 CSS 渲染优化

• 避免复杂选择器：简化 CSS 选择器，减少样式计算时间

• 减少重排重绘：避免频繁修改影响布局的 CSS 属性

• 使用 CSS 包含：通过 contain 属性限制样式计算范围

• 优化字体加载：使用 font-display: swap 避免字体阻塞渲染

🖥️ 服务器端优化

• 启用 HTTP/2：利用多路复用提高资源加载效率

• 开启 Gzip/Brotli 压缩：减少传输数据量

• 使用 CDN：就近分发静态资源，减少网络延迟

• 服务器推送：主动推送关键资源到客户端

原文地址：https://webfem.com/post/performance-fp，转载请注明出处