当前位置：首页 > news >正文

Chrome控制台网站性能优化指标一览

news 来源：原创 2025/5/14 13:44:38

打开chrome-》f12/右键查看元素-》NetWrok/网络

ctrl+F5 刷新网页，可以看到从输入url到页面资源请求并加载网页，用于查看资源加载，接口请求，评估网页、网站性能等，如下图：

request、stransferred、resources 的含义

request（）代表请求数量：点击上面可以单独查看各个request类型下的请求，request类型包含：xhr and fetch（接口请求）、Document、css、javaScript、Font、Image、Media、Manifest、web Socket、WebAssembly、other;

stransferred（transferred over network）:通过网络加载的资源大小。

标识请求的资源的传输，可以看到资源大小

resources（resources loaded by the page）：统计的是前端页面加载的所有资源经过解压之后的原始大小。

【

以上说明来自Google官网： https://developers.google.com/web/tools/chrome-devtools/network/reference#uncompressed

https://stackoverflow.com/questions/56043151/what-is-the-difference-between-transferred-and-resources-in-chrome-devtools

】

DOMContentLoaded 和 Load 和 Finish的含义和区别

DOMContentLoaded：DOM树构建完成。 即HTML页面由上向下解析HTML结构到末尾封闭标签。

Load：页面加载完毕。 DOM树构建完成后，继续加载html/css 中的图片资源等外部资源，加载完成后视为页面加载完毕。

DOMContentLoaded 会比 Load 时间小，两者时间差大致等于外部资源加载的时间。

Finish： 是页面上所有 http 请求发送到响应完成的时间， HTTP1.0/1.1 协议限定，单个域名的请求并发量是 6 个，即 Finish 是所有请求（不只是XHR请求，还包括DOC，img，js，css等资源的请求）在并发量为6的限制下完成的时间。

Finish 的时间比 Load 大，意味着页面有相当部分的请求量，

Finish 的时间比 Load 小，意味着页面请求量很少，如果页面是只有一个 html文档请求的静态页面，Finish时间基本就等于HTML文档请求的时间。

页面发送请求和页面解析文档结构，分属两个不同的线程，

Performance

Lighthouse

Lighthouse 是 Google 开发的一款工具，用于分析网络应用和网页，收集现代性能指标并提供对开发人员最佳实践的意见。为 Lighthouse 提供一个需要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

Lighthouse报告分析

Lighthouse生成的分析报告，首先会根据自定义勾选的需要测试的指标进行总的打分（下图标1处，可以把分析报告进行导出结果等操作）。

Lighthouse 会对选择进行分析的维度给出一个的评估得分，分值范围0-100。

评分主要分为三个档次，分别用红黄绿三种颜色代表：

0 – 49（慢）：红色 
50 – 89（平均值）： 橙色
90 – 100（快）： 绿色

如果得分能达到 90 分以上（绿色），则说明网站应用在该方面的评估表现符合最佳实践。⚠️注：如果没有分数或得分为 0，则很有可能是检测过程发生了错误，比如网络连接状况异常等。

点击 See calculator，查看具体打分规则如下：

1、Metrics指标说明

指标名称	说明
首次内容绘制 `FCP`（First Contentful Paint）	浏览器首次绘制来自 DOM 的内容的时间，内容必须是文本、图片（包含背景图）、非白色的 canvas 或 SVG，也包括带有正在加载中的 Web 字体的文本。这是用户第一次开始看到页面内容，但仅仅有内容并不意味着它是有用的内容（如 Header、导航栏等）。
最大的内容绘制 `LCP`（Largest Contentful Paint）	可视区域中最大的内容元素呈现到屏幕上的最长时间，用以估算页面的主要内容对用户可见时间。 LCP 考虑的元素包括: 元素、元素内的`<svg>`元素、元素、通过 url() 函数加载背景图片的元素、包含文本节点或其他内联文本元素子级的块级元素。
可交互时间 `TTI` （Time to Interactive）	指的是所有的页面内容都已经成功加载，且能够快速地对用户的操作做出反应的时间点。网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。完全达到可交互状态的时间点是在最后一个长任务（Long Task）完成的时间，并且在随后的 5 秒内网络和主线程是空闲的。
总阻塞时间 `TBT` （Total Blocking Time）	表示此次分析过程中遇到的阻塞时间。度量了 FCP 和 TTI 之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。只要存在长任务，该主线程就会被视为“阻塞”，该任务在主线程上运行超过 50 毫秒（ms）。
累积布局偏移 `CLS`（Cumulative Layout Shift）	CLS 会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，它是一种保证页面的视觉稳定性从而提升用户体验的指标方案。布局转移的发生是因为浏览器倾向于异步加载页面元素。页面上可能存在最初尺寸未知的媒体元素，这种组合意味着浏览器在完成加载之前不知道各个元素会占用多少空间。因此，布局会发生剧烈变化。 CLS的有趣之处在于它可以用各种工具进行客观的测量，但它也是以用户为中心的，因为每个用户的设备都会影响你的网站布局的变化。虽然不能控制这一方面，但肯定可以采取预防措施，使其影响尽可能小。
速度指标 `SI`（Speed Index）	衡量首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容，往往能给用户带来更好的体验，所以速度指标的值约小越好。

其他指标：

指标名称	说明
首次CPU闲置 `FCI`（First CPU Idle）	指在页面加载期间，当页面的主要内容已经完成加载并且JavaScript代码已经执行完毕后，浏览器第一次空闲的时间点。在这个时间点之后，页面可以响应用户的交互操作，比如点击按钮或输入文本。
首次绘制 `FP` (First paint)	指浏览器首次将像素渲染到屏幕上的时间点，也就是页面的第一个像素点被绘制的时间。 FP的发生时机取决于浏览器的渲染机制和页面的结构。当浏览器开始加载页面时，会解析HTML和CSS，构建DOM和CSSOM树，然后将它们合并为渲染树。当浏览器开始将渲染树渲染到屏幕上时，FP就发生了，在这个时刻，用户可以看到页面上的第一个像素点，也就是FP。通常FP表现为白屏。
首次有效绘制 `FMP`（First Meaningful Paint）	浏览器在加载网页时，第一次将主要内容呈现给用户的时间点。这个时间点通常是用户感知到页面加载速度的关键点之一，用户可以看到页面上的一些内容，并开始与页面进行交互。 FMP是通过一个算法来猜测某个时间点的，所以可能不准确，且在 Lighthouse 6.0中，FMP指标已被弃用。
文档内容加载完成 `DCL`（DOMContentLoaded ）	`DCL`指的是HTML文档中的DOM树构建完成、CSS文件加载完成并解析、JavaScript文件加载完成并执行的时间点，它表示网页的主要内容已经加载完成，可以开始进行交互和操作。
首次输入延迟 `FID`（First Input Delay）	测量从用户第一次与页面交互，直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。 `FID`测量页面加载期间响应度，它针对的交互是不连续操作对应的输入事件，如点击、轻触和按键。其他诸如滚动和缩放之类的交互属于连续操作并不包含在她的测量内。

2、指标衡量标准

lighthouse衡量标准
模式名称	绿色快	中	慢
首次内容绘制 `FCP`（First Contentful Paint）	0–1.8（s）	1.8–3	> 3
最大的内容绘制 `FCP`（Largest Contentful Paint）	0–2.5（s）	2.5-4	> 4
可交互时间 `TTI`（Time to Interactive）	0–3.8（s）	3.9–7.3	> 7.3
总阻塞时间 `TBT`（Total Blocking Time）	0–200（ms）	200-600	> 600
累积布局偏移 `CLS`（Cumulative Layout Shift）	0–0.1(比例)	0.1-0.25	> 0.25
速度指标 `SI`（Speed Index）	0-3.4（s）	3.4-5.8	> 5.8
首次CPU闲置 `FCI（`First CPU Idle）	0–4.7（s）	4.8-6.5	> 6.5
首次有效绘制 `FMP` First Meaningful Paint	0–2（s）	2-4	> 4
最大潜在首次输入延迟 `MPFID` Max Potential First Input Delay	0–130（ms）	130-250	> 250
最大内容绘制 `LCP` （Largest Contenttful Paint）	0–2.5（s）	2.5-4	>4

3、改进建议

Opportunity的建议可以帮助更快地加载页面，但它们不会直接影响性能得分。

常见的可改进项有如下：

Use HTTP/2 ，HTTP/2 提供了许多优于 HTTP/1.1 的优点，包括二进制标头和多路复用。即现在用的是 HTTP/1.1，建议使用 HTTP/2。需要服务端配合改，目前不支持。
Minifying JavaScript ，精简js代码。
Reduce unused JavaScript ，减少未使用的 JavaScript 并推迟加载脚本，直到需要时才加载，以减少网络活动消耗的字节数(LCP)。即：删除无用的 JS，主要方法就是合理的代码分割和按需引入。
Enable text compression，基于文本的资源应该使用压缩（gzip等），以最小化网络总字节数（FCP，LCP）。即：配置 gzip压缩。
Eliminate render-blocking resources，列出了阻止页面首次绘制的所有 URL（FCP，LCP），通过内联关键资源、推迟非关键资源和删除任何未使用的内容来减少这些阻止渲染的 URL 的影响。即：合理加载资源，控制加载顺序。

如何识别关键资源：使用 Chrome DevTools 中的 Coverage 选项卡来识别非关键 CSS 和 JS。当加载或运行页面时，该选项卡可以分析使用了多少代码，以及加载了多少代码，绿色（关键），红色（非关键）

如何消除渲染阻塞脚本：合理使用 async 或 defer 属性标记

如何消除阻塞渲染的样式表：可使用 preload 链接异步加载其余样式，可查看推迟非关键 CSS

`4、Diagnostics`（诊断）

`5、PASSED AUDITS`（审核通过）

列举了在性能优化方面做的比较好的地方，常见项及说明如下（其实做性能优化的时候就可以参照这些方面）：

Properly size images：适当大小的图像，避免字节浪费而减慢页面加载时间
Defer offscreen images：屏幕外图像延迟加载
Minify CSS：缩小 CSS 文件，减少网络负载大小
Minify JavaScript：缩小 JS 文件，减少有效负载大小和脚本解析时间
Reduce unused CSS：删除未使用的 CSS
Efficiently encode images：有效地图片编码和优化
Serve images in next-gen formats：以下一代格式提供图像
Enable text compression：启用文本压缩
Preconnect to required origins：预连接到所需的源
Initial server response time was short：初始服务器响应时间很短
Avoid multiple page redirects：避免多个页面重定向
Preload key requests：预加载关键请求
Use video formats for animated content：用视频替换动画 GIF
Remove duplicate modules in JavaScript bundles：删除 JavaScript 包中的重复模块
Avoid serving legacy JavaScript to modern browsers：避免向现代浏览器提供旧版 JavaScript
Preload Largest Contentful Paint image：预加载最大的内容绘制
Avoids enormous network payloads：避免巨大的网络负载
Uses efficient cache policy on static assets：对静态资产使用高效的缓存策略
Avoids an excessive DOM size：避免过大的 DOM 元素
User Timing marks and measures：用户计时标记和度量
JavaScript execution time：JavaScript 执行时间
Minimizes main-thread work：最小化主线程工作
All text remains visible during webfont loads：在 webfont 加载期间所有文本保持可见
Minimize third-party usage：尽量减少第三方使用
Lazy load third-party resources with facades：延迟加载第三方资源
Uses passive listeners to improve scrolling performance：使用被动侦听器来提高滚动性能
Avoids document.write()：避免使用 document.write()
Image elements have explicit width and height：图像元素应具有明确的宽度和高度

6、可访问性（Accessibility）

Accessibility 辅助功能 : 主要针对无障碍设计，也称为网站可达性，是指所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。

参考文章：Lighthouse（灯塔）—— Chrome浏览器强大的性能测试工具_chrome lighthouse-CSDN博客

Google dev开发指南： web.dev/

如何看vue首页的加载速度 • Worktile社区

network其他模块介绍参考： Chrome DevTools谷歌浏览器开发者工具评估资源加载时间