总结

1. 我们可以使用 Lighthouse 先去测试一下网页。
2. 拿到测试报告，根据诊断报告去选择性优化。
3. 优化的差不多了，再去看一些关键的性能指标，基本只剩下那些频繁操作 dom、关键文件的加载阻塞渲染。
4. 如果依旧数据比较差， 再用 F12 里的性能工具去分析，排查的侧重点是减少 回流和重绘 的次数，以及 js 阻塞
   1. 比如用Js里操作Dom时，我们边修改边访问 DOM，可能触发回流和重绘。浏览器需要重新渲染以后，才能返会数据，在此期间 JS 是暂停运行在等待结果的。
   2. 阻塞性的 js 文件，使用动态加载，等待浏览器主要部分都加载完，再去动态创建标签去触发加载

你用过 Lighthouse 吗？如何利用 Lighthouse 进行性能分析？

一、主要内容

Lighthouse 生成的报告包含以下五个主要类别：

1. 性能（Performance）：
   • 关键指标：首次内容绘制（FCP）、首次有效绘制（FMP）、速度指数（Speed Index）等。
   • 优化建议：如减少未使用的 JavaScript、优化图片加载等。
2. 可访问性（Accessibility）：
   • 检查页面是否对残障用户友好。
   • 建议：如为图片添加 alt 属性、确保足够的对比度等。
3. 最佳实践（Best Practices）：
   • 检查是否遵循现代 Web 开发的最佳实践。
   • 建议：如使用 HTTPS、避免废弃的 API 等。
4. SEO（搜索引擎优化）：
   • 检查页面是否符合 SEO 最佳实践。
   • 建议：如使用语义化标签、优化元数据等。
5. PWA（渐进式网页应用）：
   • 检查页面是否满足 PWA 的基本要求。
   • 建议：如注册 Service Worker、提供离线支持等。

二、诊断报告

里边有很多预制的诊断点，根据诊断结果，我们可以去优化网页。

性能相关，页面性能

• 消除渲染阻塞资源：某些 css、js 文件加载慢，成了阻塞的主页面渲染的瓶颈，建议内嵌到 html 一起加载。

• 移除无用的 js：减少未使用的 JavaScript，并推迟加载脚本，直到需要它们来减少网络活动消耗的字节数

• 移除无用的 CSS：减少样式表中未使用的规则，并推迟不用于折叠内容的 CSS，以减少网络活动消耗的字节数

• 给图片设置宽高：减少布局计算，提高 CLS（计算布局偏移）性能。

• WebP 和 AVIF 等图像格式通常比 PNG 或 JPEG 提供更好的压缩，这意味着下载速度更快，数据消耗更少。

• 图片没有设置 alt 属性

• 缓存时间太短：增加缓存的有效期，提高缓存的利用率

• 调整图片体积：提供适当大小的图像，以节省蜂窝数据并缩短加载时间

可访问性，残障友好

• 按钮有没有设置名称
• 图片设置 alt 属性
• 元素的前景和背景色对比不够明显
• html 没有设置 lang 属性

最佳实践 主要涉及一些安全性

• 网页安全策略对 xss 攻击有效防护
• console 日志输出
• 避免废弃的 api
• 避免第三方 cooikes
• 允许用户粘贴内容到输入框

SEO 优化

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24