页面性能的报告 Lighthouse

场景：在开发大型官网项目中，客户要求使用Lighthouse来跑页面性能报告，

Lighthouse 是什么

Lighthouse 是一个网站性能测评工具，它是 Google Chrome 推出的一个开源自动化工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助开发者改进网站的质量。它能够生成一个有关页面性能的报告，通过报告我们就可以知道需要采取哪些措施来改进应用的性能和体验。

如何打开 lighthouse

打开chrome
进入指定的网站
右键点击检查

点击 lighthouse

选择分析的设备因为该网站是pc端，这里我们选择desktop。由于没有pwa 要求，也去掉

点击 generate report 等待结果

Lighthouse 经验积累

需提前思考的问题

列出啦一些常见的问题，需要在项目开发前考虑到，不然在开发中后会无法修改或者有很大的工作量

【设计or产品】Background and foreground colors do not have a sufficient contrast ratio. 背景色和前景色的对比度不够
【设计or产品】Image elements do not have explicit width and height 图像元素没有明确的宽度和高度
【架构】Serve static assets with an efficient cache policy 静态资源的缓存策略，包括后台返回的图片地址
【前端开发】Does not use passive listeners to improve scrolling performance 不使用被动侦听器来提高滚动性能
【前端开发】Avoid enormous network payloads 避免巨大的网络有效负载
【前端开发】Does not use HTTPS 使用https

代码注意事项

头部 hader html

添加语言和缩放模式

<html lang="zh-CN">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5,user-scalable=1,viewport-fit=cover"/>

内容

Image elements do not have [alt] attributes 图像元素没有[alt]属性

添加alt 属性

Links do not have a discernible name 链接没有明显的名称

添加name属性

Links to cross-origin destinations are unsafe 到跨来源目的地的链接是不安全的添加 Add rel="noopener" or rel="noreferrer"
Issues were logged in the Issues panel in Chrome Devtools 问题被记录在问题面板在Chrome Devtools

这里注意map文件的报错

其他优化方案

最优先保障首页首屏的打开和响应时间
不影响页面渲染的功能模块使用异步加载提高首屏加载速度
减少使用npm包合作第三方组件，如果一定要用，请使用mini包
不加载无用的内容，资源

如何优化 chrome 插件 Lighthouse 页面性能的报告