用FP、FCP和FMP完美实现网页首屏渲染

2023-05-21 20:21:11

网页首屏加载性能优化指南：FP、FCP 和 FMP

随着互联网的高速发展，用户对网页加载速度的要求越来越高。首屏加载速度 是决定用户是否继续浏览网站的关键因素。传统的 DCL 和 L 事件不再能准确衡量首屏显示时间。因此，FP（First Paint）、FCP（First Contentful Paint）和 FMP（First Meaningful Paint） 这三个新指标应运而生，它们更关注渲染时间，从而更好地反映用户所看到的画面。

FP、FCP 和 FMP 简介

FP 表示浏览器开始在屏幕上绘制第一个像素的时间点，是用户首次看到网页内容的时刻。FCP 表示浏览器绘制第一个有意义的内容（例如文本、图像）的时间点，略晚于 FP，因为需要加载和解析 HTML 代码。FMP 表示浏览器绘制页面主要内容（例如文章标题、图片）的时间点，通常是最重要的信息，比 FCP 更晚，需要加载和解析更多数据。

优化 FP、FCP 和 FMP

优化 FP

减少 HTTP 请求数量
使用 CDN 加速资源加载
优化 CSS 和 JavaScript 代码
利用浏览器缓存
启用 Gzip 压缩

<!-- 示例代码 -->
<!-- 减少 HTTP 请求数量 -->
<link href="styles.css" rel="stylesheet" />
<script src="script.js"></script>

<!-- 使用 CDN 加速资源加载 -->
<link href="https://cdn.example.com/styles.css" rel="stylesheet" />
<script src="https://cdn.example.com/script.js"></script>

优化 FCP

延迟加载非必要资源
使用内联 CSS 和 JavaScript 代码
优化字体加载
避免使用重定向
使用服务端渲染

<!-- 示例代码 -->
<!-- 延迟加载非必要资源 -->
<script src="lazy-script.js" defer></script>

<!-- 使用内联 CSS -->
<style>
  body {
    font-family: sans-serif;
  }
</style>

优化 FMP

优化页面布局
使用懒加载技术
减少 JavaScript 代码执行时间
避免使用大型图片和视频
使用渐进式加载技术

<!-- 示例代码 -->
<!-- 使用懒加载技术 -->
<img src="image.jpg" loading="lazy" />

<!-- 使用渐进式加载技术 -->
<video src="video.mp4" type="video/mp4" playsinline>
  <source src="video-lowres.mp4" type="video/mp4" media="(max-width: 768px)" />
  <source src="video-highres.mp4" type="video/mp4" media="(min-width: 769px)" />
</video>