# 灯塔审计 ## 快速入门运行 Lighthouse 审核时： 1. **移动审计**：`npm run lighthouse` 2. **桌面审核** : `npm run lighthouse:desktop` 3. **JSON 输出** : `npm run lighthouse:json` 4. **分析** : `npm run lighthouse:analyze` 5. **诊断报告** : `npm run lighthouse:diagnostic` ## 命令 ### 移动审核（默认） # 交互式移动审核 npm 运行灯塔 **配置**： * 节流：4 倍 CPU 减速、150 毫秒 RTT、1600 Kbps * 屏幕：412x915（移动设备） * 在浏览器中打开交互式报告 ### 桌面审核 # 交互式桌面审核 npm 运行灯塔：桌面 **配置**： * 节流：1 倍 CPU 减速、40 毫秒 RTT、10240 Kbps * 无屏幕模拟 * 在浏览器中打开交互式报告 ### JSON 输出 # 生成 JSON 报告 npm 运行灯塔：json **输出**：`lighthouse-report.json` **用途**：用于自动化分析和 CI/CD ### 自动分析 # 分析 Lighthouse 结果 npm 运行灯塔：分析 **输出**：控制台指标分析 **节目**：分数、核心网络生命、机会 ### 诊断报告 # 生成诊断报告 npm 运行灯塔：诊断 # 本地诊断 (localhost:3000) npm 运行灯塔：诊断：本地 **输出**：`lighthouse-reports/` 中的 Markdown 报告 **格式**：详细分析和建议 ## 核心网络生命力 ### 目标指标公制|目标|好 |需要改进|可怜 ---|---|---|---|--- **LCP** | < 2.5 秒 | < 2.5 秒 | 2.5 秒 - 4.0 秒 | > 4.0秒 **FID** | < 100 毫秒 | < 100 毫秒 | 100 毫秒 - 300 毫秒 | > 300毫秒 **CLS** | < 0.1 | < 0.1 | 0.1 - 0.25 | 0.1 - 0.25 > 0.25 **FCP** | < 1.8 秒 | < 1.8 秒 | 1.8 秒 - 3.0 秒 | > 3.0秒 **待定** | < 300 毫秒 | < 300 毫秒 | 300 毫秒 - 600 毫秒 | > 600 毫秒 **SI** | < 3.4 秒 | < 3.4 秒 | 3.4 秒 - 5.8 秒 | > 5.8秒 ### 当前表现 **移动**（2026 年 5 月 2 日，部署后；tras 英雄 en 服务者）。网址：**** * 性能：67/100 🟡 * LCP：7.48秒🔴 * FCP：1.26s 🟢 * 待定：297 毫秒🟡 * SI：4.18秒🟡 * CLS：0 ✅ * 可达性：82/100 |最佳实践：96/100 🟢 |搜索引擎优化：100/100 🟢 **移动基准** (2026 年 1 月 23 日)：性能 38、LCP 17.3 秒、FCP 3.2 秒、TBT 1,210 毫秒、SI 7.9 秒。 Mejoras：lazy Swiper、IntersectionObserver、hero en servidor (HeroImageServer) → FCP 1.26s、SI 4.18s。 **桌面**： * 性能：93/100 🟢 * LCP：3.2秒🟡 * FCP：0.7秒🟢 * 待定：60 毫秒🟢 * SI：2.0秒🟢 * CLS：0 ✅ ## 分析工作流程 ### 1\.运行审核 # 移动审核 npm 运行灯塔：json ### 2\.分析结果 # 自动分析 npm 运行灯塔：分析 ### 3\.审查机会检查报告： * **减少未使用的 JavaScript** ：最大的机会 * **推迟屏幕外图像**：图像优化 * **减少未使用的 CSS** ：CSS 优化 * **避免遗留 JavaScript** ：现代浏览器支持 * **服务器响应时间**：后端优化 ### 4\.生成诊断报告 npm 运行灯塔：诊断 **输出**：`灯塔报告/诊断报告-*.md` ## 优化机会 _观众席：05/02/2026（电影，制作）._ ### 高优先级 1. **减少未使用的 JavaScript**（大约 170 毫秒的潜力） * 延迟加载重组件 * 使用动态导入 * 删除未使用的依赖项 * 优化代码分割 2. **减少未使用的 CSS**（大约 170 毫秒的潜力） * 验证 Tailwind 吹扫配置 * 删除未使用的 CSS 规则 * 使用 CSS 分块 3. **LCP**（7.27 秒 — 目标 < 2.5 秒） * 优化英雄图片（预加载、大小、质量） * 减少主线程工作和 JS 执行时间 * 推迟屏幕外图像：`loading="lazy"`、`fetchPriority="low"` ### 中优先级 4. **避免遗留 JavaScript** * 验证`.browserslistrc`配置 * 确保现代浏览器支持 * 删除不必要的填充 5. **服务器响应时间**（大约 45 毫秒） * 优化数据库查询 * 添加数据库索引 * 实现缓存 6. **最佳实践**（57/100 - 已弃用的 API、第三方 cookie） * 审查具体审计报告并进行相应修复 ## 表现得分明细 ### 评分类别 * **性能**：0-100（按核心网络生命力加权） * **辅助功能**：0-100（WCAG 合规性） * **最佳实践**：0-100（安全性、现代 API） * **SEO** ：0-100（元标签、结构化数据） ### 性能分数计算绩效分数的计算公式为： * **LCP**：25% 重量 * **FID**：25% 重量 * **CLS**：15% 重量 * **FCP**：10% 重量 * **TBT**：10% 重量 * **SI**：10% 重量 * **TTI**：5% 重量 ## 报告分析 ### 阅读灯塔报告 1. **分数**：总体表现评级 2. **指标**：核心 Web Vitals 值 3. **机会**：节省成本的优化建议 4. **诊断**：附加信息 5. **通过审核**：哪些方面运作良好 ### 口译机会每个机会都表明： * **节省**：潜在节省的时间（毫秒） * **影响**：高/中/低优先级 * **描述**：需要做什么 * **了解更多**：文档链接 ## 持续监控 ### CI/CD 集成 Lighthouse CI 配置为： * `.github/workflows/performance-budgets.yml` * `lighthouserc.js` ### 自动报告报告保存至： * `lighthouse-reports/` 目录 * 带时间戳的文件名 * JSON 和 Markdown 格式 ## 故障排除 ### 审核失败或超时 1. 检查服务器是否正在运行：`npm run start` 2. 验证 URL 是否可访问 3. 增加 Lighthouse 配置中的超时时间 4. 检查网络连接 ### 结果不一致 1. 进行多次审核并取平均值 2.清除浏览器缓存 3. 使用一致的节流设置 4.检查外部依赖 ### 高 LCP 1.优化英雄形象 2. 预加载关键资源 3.减少服务器响应时间 4.静态资产使用CDN ### 高TBT 1.减少JavaScript执行时间 2. 代码分割重组件 3. 推迟非关键 JavaScript 4.优化第三方脚本 ## 关键文件 * `lighthouserc.js` \- Lighthouse CI 配置 * `scripts/performance/analyze-lighthouse-results.js` \- 分析脚本 * `scripts/performance/lighthouse-diagnostic.js` \- 诊断脚本 * `lighthouse-reports/` \- 生成的报告目录 ## 最佳实践 ### 何时进行审核 * **发布之前**：验证性能没有下降 * **优化后**：衡量改进 * **定期监控**：每周或每月审核 * **重大更改之后**：新功能或依赖项 ### 审计环境 * **生产**：最适合准确结果 * **分期**：适合预发布验证 * **本地** ：快速迭代，不太准确 ### 比较结果 * 使用相同的节流设置 * 在相似的时间运行 * 多次运行的平均数 * 记录审核之间的变更

灯塔审计

包含技能