谷歌浏览器LightHouse性能优化分析神器实践运用

1 基本操作介绍

1.1 入口

打开最新版本Google Chrome，F12一下弹出开发者页面，在顶部的导航栏选项选择Lighthouse选项（旧版本的浏览器是需要从应用商店下载Lighthouse插件的）

1.2 首页基本信息

从该页的英文字面意思可以知道，主要是生成一份性能检测报告
（PS：奈何本人英语见识短，而且开发者模式并没有中文版的，遇到不懂的只能谷歌翻译下）

2 生成报告分析

这里以公司官网为例，Desktop模式下的报告

2.1 总览

2.2 四大指标介绍

2.2.1 Performance（性能，6项统计）

First Contentful Paint（初始渲染时间）

该指标测量用户感知页面首要内容所需可见时间，对于不同平台首要内容都是不一样的，例如微博的首要内容就是标题，而购物网站的首要内容就是商品的图片

Speed Index（速度指标）

速度指标展示页面内容的渲染速度

Largest Contentful Paint（最大内容渲染时间）

该指标测量浏览器渲染最大内容（图片或文字）的时间

Time to Interactive（页面交互时间）

该页面所有内容都已经加载完成，指标测量页面交互所需时间

Total Blocking Time（初始渲染到页面交互总时间）

初始渲染和页面交互完成的总时间

Cumulative Layout Shift（累计布局偏移）

测量页面可见的并且偏移的元素


以上的6项指标值数都是越小越好


往下滑动可以看到还有Opportunities、Diagnostics两个部分，这两个部分会给你一些优化的提示和方法，点击Learn more，可以获取更详细的教程（PS: 是时候考验你的英语功底了，实在不行谷歌一键翻译也行）

关于Eliminate render-blocking resources 问题（冗余代码）的检测方法

快捷键 ctrl + shift + p打开开发者工具命令行，输入show coverage检测代码执行覆盖率

2.2.2 Accessibility（可访问度）

这一项主要是用来提升优化页面的可访问度

2.2.3 Best Practices（最佳实践）

这一项它提示我图片分辨率低、而且与原图比例不对应

2.2.4 SEO（搜索引擎优化）