web性能优化之Lighthouse审查

2019年03月19日阅读：26 字数：862 阅读时长：4 分钟

Lighthouse 是用于提高网页质量的开源自动化工具。可以针对任何网页、公共网页或需要身份验证的网页运行它。它对性能、可访问性、渐进式网络应用程序、搜索引擎优化等进行审计，生成一个有关页面问题的报告。

1. 使用方法

运行 Lighthouse 的方式有三种: 作为 Chrome 扩展程序运行，使用第三方网站运行，或作为命令行工具运行。

1.1. Chrome 扩展程序

安装 Lighthouse Chrome 扩展程序。

打开要审查的页面，点击位于 Chrome 工具栏上的 Lighthouse 图标。

点击 Generate report 按钮以针对当前打开的页面运行 Lighthouse 测试。

1.2. 第三方网站

优点不用安装程序，缺点可能需要翻墙，且需要pagespeed能访问你需要审查的网页

https://pagespeed.web.dev/

1.3. 命令行工具

最新的需要 Node.js 版本 14 LTS 或更高版本。

全局安装 Lighthouse https://www.npmjs.com/package/lighthouse

npm install -g lighthouse --registry=https://registry.npm.taobao.org

运行Lighthouse Cli

lighthouse https://www.timelessq.com/ --view --preset=desktop

使用 lighthouse --help 可以查看Cli选项

其中--view是自动打开HTML报告文件

--preset是指定为桌面设备（PC端）的方式加载页面

2. Web指标

Largest Contentful Paint (LCP) ：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。

First Input Delay (FID) ：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。

Cumulative Layout Shift (CLS) ：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少。

2.1. 尽可能的减少http请求数

使用webpack、gulp等打包工具，合并css、javascript模块
使用CSS精灵图（Sprite）

2.2. 图片优化

使用webp格式
使用适当大小的图像
通过srcset设置响应式图片

2.3. 传输优化

Gzip压缩
压缩Html、JavaScript和Css
启用浏览器缓存，比如添加Expire/Cache-Control头
使用CDN（内容分发网络）
使用HTTP2.0
划分主域
添加DNS预解析

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://cdn.timelessq.com">
  <link rel="dns-prefetch" href="https://cdn.timelessq.com">
</head>
<body>
  
</body>
</html>

2.4. 字体颜色

参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度

总结：建议使用Lighthouse Cli进行审查，其它2种方法可能无法访问，然后根据审查报告的提示进行优化。

3. 作业

帮助Tony使用Lighthouse审计优化网站，性能 > 80分

1、打开代码在线编辑器：Tony-forked - CodeSandbox

2、点击左上角的“Fork”，等项目运行完成后，点击右上角的“Open in new window”，使用Edge或谷歌浏览器打开网站

3、建立基准

4、根据审计报告和上述文档优化网站，部分操作代码中有注释指引

5、修改代码后，需要重新Lighthouse审计时，点击重启按钮重新运行

详细教程：原文档 Glitch 的 fork 需要翻墙，所以给挪到 CodeSandbox 上面了，并修改了调整图像的案例使用 Lighthouse 优化网站速度 - Microsoft Edge Development | Microsoft Learn

参考资料：

1、使用 Lighthouse 审查网络应用 https://developers.google.cn/web/tools/lighthouse

2、web性能指标 https://web.dev/learn-web-vitals/

评论区 (0)

还没有评论，快来抢第一吧