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(搜索引擎优化)
更多推荐
谷歌浏览器LightHouse性能优化分析神器实践运用
发布评论