步骤一：安装Lighthouse扩展生成性能报告
打开Chrome浏览器 → 进入Web Store搜索“Lighthouse” → 点击“添加至Chrome” → 在目标网页右键选择“检查” → 切换到Lighthouse标签页 → 点击“生成报告”。此工具可显示首次内容绘制（FCP）、最大内容绘制（LCP）等指标（如红色标记超时任务），但需手动触发（建议多次测试取平均值），或通过命令行批量执行：
bash
使用命令提示符生成网页性能报告
lighthouse https://example.com --output --only-categories=performance

步骤二：使用PageSpeed Insights分析资源加载顺序
访问PageSpeed Insights官网 → 输入目标网址 → 查看“字段数据”中的资源加载瀑布图。此工具可展示脚本、样式表、图片的加载时间（如红色条块表示阻塞），但依赖真实用户数据（建议结合实验室数据），或通过API自动获取：
bash
使用命令提示符获取资源加载分析
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://example.com&key=YOUR_API_KEY"

步骤三：通过DevTools的Network面板实时监控请求
按 `Ctrl+Shift+I` 打开开发者工具 → 切换到Network标签页 → 刷新页面并观察资源类型（如JS、CSS、Font）的加载状态。此方法可捕捉具体请求耗时（如TCP连接时间、SSL握手时长），但数据量较大（建议过滤关键资源），或通过命令行导出日志：
bash
使用命令提示符导出网络请求日志
chrome.exe --enable-logging --v=1 --user-data-dir="C:\Temp\Log"

步骤四：安装Puppeteer脚本自动化捕获渲染流程
在项目目录运行命令`npm install puppeteer` → 创建脚本`analyze.js`并写入：
javascript
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const timing = JSON.parse(await page.evaluate(() => JSON.stringify(window.performance)));
console.log(timing);
await browser.close();
})();
此工具可生成详细的导航时机（如DNS查询、DOM解析时间），但需Node环境（建议使用PM2管理进程），或通过Docker容器运行：
bash
使用命令提示符运行Puppeteer分析
docker run -it --rm --name=puppeteer -v $(pwd):/app node:14-alpine /bin/sh -c "apk add --no-cache nodejs npm && npm install puppeteer && node analyze.js"

步骤五：通过WebPageTest定制多节点测试
访问WebPageTest官网 → 输入网址并选择测试地点（如北京、纽约） → 勾选“高级配置”中的“禁用缓存”和“模拟移动网络” → 点击“开始测试”。此平台可对比不同网络下的加载差异（如3G vs 光纤），但免费版有次数限制（建议优先测试核心功能），或通过CLI工具集成：
bash
使用命令提示符批量测试网页性能
wpt blade --url https://example.com --location Beijing --connection 4g