首次有效渲染时间 (FMP) 是 Lighthouse 报告性能部分跟踪的六个指标之一。 每个指标都会捕获网页加载速度的某个方面。
Lighthouse 显示 FMP(以秒为单位):
![Lighthouse 首次有效绘制评估的屏幕截图](https://developer.chrome.google.cn/static/docs/lighthouse/performance/first-meaningful-paint/image/a-screenshot-the-lightho-e809924255474.png?authuser=8&hl=nb)
FMP 衡量的指标
FMP 用于衡量网页主要内容何时对用户可见。 FMP 的原始得分是指从用户启动网页加载到呈现主要首屏内容的网页之间间隔的时间(以秒为单位)。 FMP 实质上显示的是渲染时间,在此之后发生最大的首屏布局变化。如需详细了解 FMP 的技术细节,请参阅 Google 的首次有效绘制时间:基于布局的方法。
当网页上呈现的第一位内容包含首屏内容时,First Contentful Paint (FCP) 和 FMP 通常相同。不过,举例来说,当 iframe 中包含首屏内容时,这些指标可能会有所不同。 当 iframe 中的内容对用户可见时,系统会注册 FMP,而 FCP 不包含 iframe 内容。
Lighthouse 如何确定 FMP 得分
与 FCP 一样,FMP 也基于 HTTP Archive 中的真实网站性能数据。
当 FMP 和 FCP 相同时,其得分也相同。 如果 FMP 发生在 FCP 之后(例如,当网页包含 iframe 内容时),FMP 得分将低于 FCP 得分。
例如,假设您的 FCP 为 1.5 秒,FMP 为 3 秒。FCP 得分为 99,但 FMP 得分为 75。
下表展示了如何解读 FMP 得分:
FMP 指标 (以秒为单位) |
颜色编码 | FMP 得分 (FCP HTTP 归档百分位) |
---|---|---|
0 - 2 个 | 绿色(快速) | 75 - 100 |
2 - 4 | 橙色(中等) | 50 - 74 |
4 人以上 | 红色(慢) | 0 - 49 |
如何提高 FMP 得分
请参阅如何改进您网站上的 Largest Contentful Paint。改进 FMP 的策略与改进 Largest Contentful Paint 的策略大致相同。
在真实用户的设备上跟踪 FMP
如需了解如何衡量用户设备上实际发生 FMP 的时间,请参阅 Google 的以用户为中心的性能指标页面。使用主角元素跟踪 FMP 部分介绍了如何以编程方式访问 FCP 数据并将其提交到 Google Analytics(分析)。
如需详细了解如何收集真实用户指标,请参阅 Google 的使用 Navigation 和资源计时评估实际加载性能。借助 User Timing 标记和衡量 Lighthouse 审核,您可以在报告中查看“用户计时”数据。
如何提高总体效果得分
除非您有明确的理由关注某个特定指标,否则通常最好专注于提高总体性能得分。
使用 Lighthouse 报告的优化建议部分可确定哪些改进能给您的网页带来最大的价值。优化建议越重要,对性能得分的影响就越大。例如,下面的 Lighthouse 屏幕截图显示消除阻塞渲染的资源将实现最大的改进:
![Lighthouse:“优化建议”部分](https://developer.chrome.google.cn/static/docs/lighthouse/performance/interactive/image/lighthouse-opportunities-ec2197d9dce25_1920.png?authuser=8&hl=nb)
请参阅“性能审核”着陆页,了解如何解决 Lighthouse 报告中发现的机会。