谷歌网页测速

测速日志与性能报告

工具说明 & 测速指标示例

一、功能介绍
  1. 模拟谷歌PageSpeed网页测速流程，输出完整加载阶段耗时；
  2. 自动区分性能等级：优秀(绿色)、一般(黄色)、较差(红色)；
  3. 内置4个常用站点示例，一键填充URL快速模拟测速；
  4. 模拟DNS、TCP连接、首字节、DOM加载、资源加载、LCP最大内容绘制、CLS布局偏移、TTI可交互时间八大核心指标；
  5. 前端纯本地模拟演示，真实线上测速需后端配合请求页面。
二、核心测速指标标准（PageSpeed标准） 
1. LCP 最大内容绘制
优秀：≤2.5s
一般：2.5s ~ 4s
较差：>4s

2. FID / INP 交互延迟
优秀：≤100ms
一般：100ms ~ 300ms
较差：>300ms

3. CLS 累积布局偏移
优秀：≤0.1
一般：0.1 ~ 0.25
较差：>0.25

4. TTI 可交互时间
优秀：≤3.8s
一般：3.8s ~ 7.3s
较差：>7.3s
三、模拟测速输出示例 
【000ms】开始解析URL：https://www.baidu.com
【120ms】DNS解析完成，耗时120ms
【210ms】TCP连接建立完成，总耗时210ms
【380ms】服务器首字节返回(TTFB)，总耗时380ms 优秀
【860ms】HTML文档完整下载，DOM开始解析
【1420ms】DOM树构建完成，DOMContentLoaded触发
【1860ms】LCP最大内容绘制完成，耗时1.86s 优秀
【2150ms】页面全部资源加载完成(load事件)
【2630ms】TTI页面完全可交互，耗时2.63s 优秀
【CLS累积布局偏移：0.06】优秀
页面综合性能评分：92 / 100
四、操作步骤
  1. 点击上方示例按钮一键填入测试网址，或手动输入网页URL；
  2. 点击【开始测速】按钮，页面自动分步输出测速日志；
  3. 根据日志颜色判断各阶段性能优劣；
  4. 复制报告用于前端性能优化参考。