JS `Lighthouse` 性能审计：Web 性能最佳实践与自动化优化

各位观众老爷，晚上好！我是你们的老朋友，今天咱们聊聊前端性能优化的大杀器—— Lighthouse，以及如何用它来武装我们的网站，让它跑得飞起，用户体验蹭蹭上涨。

开场白：性能是王道！

在这个快节奏的网络时代，谁不想自己的网站秒开？慢如蜗牛的网站，简直就是劝退神器。你想想，用户辛辛苦苦点开你的网站，结果半天刷不出来，换你你也想骂娘，直接关掉走人，去隔壁家体验丝滑般的流畅。

所以，性能优化，绝对是前端开发者的必修课。Lighthouse，就是我们诊断网站性能、发现问题、并给出改进建议的得力助手。它可以帮你把网站扒个精光，看看哪里有毛病，然后告诉你怎么治。

Lighthouse：你的网站医生

Lighthouse 是 Google Chrome 浏览器自带的性能审计工具，也是一个 Node.js 模块。它可以分析你的网页，并给出关于性能、可访问性、最佳实践、SEO 和 PWA (Progressive Web App) 等方面的报告。

你可以直接在 Chrome 开发者工具中使用 Lighthouse，也可以通过命令行或者 Node.js API 来运行。

Lighthouse 的用法：三板斧

Chrome 开发者工具：最方便的方案

打开 Chrome 浏览器，按下 F12 或者 Ctrl + Shift + I (Windows) 或 Cmd + Option + I (Mac) 打开开发者工具。找到 Lighthouse 面板（如果没有，在 >> 菜单里找找）。

设置好你想分析的选项（比如只分析性能），点击 “Generate report”，Lighthouse 就会开始扫描你的网页。
命令行：更灵活的方案

首先，你需要安装 Lighthouse：
```
npm install -g lighthouse
```
然后，在命令行中运行：
```
lighthouse https://www.example.com --view
```
这会打开一个 HTML 报告，内容和 Chrome 开发者工具里看到的一样。

Node.js API：最强大的方案

你可以把 Lighthouse 集成到你的构建流程中，自动化地进行性能审计。

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
  const runnerResult = await lighthouse('https://www.example.com', options);

  // `.report` is the HTML report as a string
  const reportHtml = runnerResult.report;
  console.log('Report is done for', runnerResult.lhr.finalUrl);

  // `.lhr` is the Lighthouse Result as a JS object
  console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);

  await chrome.kill();
})();

这段代码会启动一个 headless Chrome 实例，运行 Lighthouse，然后输出 HTML 报告和性能得分。

Lighthouse 报告：读懂你的体检报告

Lighthouse 报告会给你一个总体的性能得分（0-100），以及五个方面的具体得分：

Performance (性能)：衡量页面加载速度和运行时的性能。
Accessibility (可访问性)：衡量页面是否易于残疾人士使用。
Best Practices (最佳实践)：衡量页面是否符合 Web 开发的最佳实践。
SEO (搜索引擎优化)：衡量页面是否易于搜索引擎抓取和索引。
Progressive Web App (PWA)：衡量页面是否符合 PWA 的标准。

每个方面都会列出详细的诊断信息和改进建议。接下来，我们重点关注性能方面，因为这是大多数人最关心的。

性能优化：对症下药

Lighthouse 会指出很多性能问题，但最常见的包括：

First Contentful Paint (FCP)：首次内容绘制

FCP 衡量浏览器首次渲染任何文本、图像、非白色画布或 SVG 的时间。越早越好，这意味着用户能更快地看到内容。

优化建议：
- 消除渲染阻塞资源： JavaScript 和 CSS 可能会阻塞页面的渲染。使用 async 或 defer 属性加载 JavaScript，或者使用内联样式表来减少 HTTP 请求。
```
<script src="script.js" async></script>
<link rel="stylesheet" href="style.css">
```
- 缩小 CSS 和 JavaScript： 移除不必要的空格、注释和换行符，减小文件大小。可以使用工具如 uglify-js 或 cssnano。
```
uglifyjs script.js -o script.min.js
```
- 优化图片： 使用合适的图片格式（WebP 通常更好），压缩图片大小，使用响应式图片。
```
<img src="image.webp" alt="描述" srcset="image-small.webp 480w, image.webp 800w" sizes="(max-width: 600px) 480px, 800px">
```
Largest Contentful Paint (LCP)：最大内容绘制

LCP 衡量在页面首次开始加载时，视口中可见的最大内容元素完成渲染的时间。这也是用户体验的重要指标。

优化建议：
- 优化服务器响应时间： 确保你的服务器能快速响应请求。使用 CDN，优化数据库查询，缓存静态资源。
- 优化阻塞渲染的 CSS 和 JavaScript： 和 FCP 类似，确保关键 CSS 和 JavaScript 尽快加载。
- 优化图片： 确保 LCP 元素（通常是图片或视频）能快速加载。
Cumulative Layout Shift (CLS)：累积布局偏移

CLS 衡量页面在加载过程中发生的意外布局偏移。布局偏移会让用户感到不舒服，甚至导致误操作。

优化建议：
- 为图片和视频指定尺寸： 在 <img> 和 <video> 标签中设置 width 和 height 属性，或者使用 CSS 的 aspect-ratio 属性。
```
<img src="image.jpg" alt="描述" width="640" height="480">
```
- 避免在现有内容上方插入新内容： 这会导致布局偏移。如果必须插入新内容，确保用户能明确感知到。
Total Blocking Time (TBT)：总阻塞时间

TBT 衡量页面在 FCP 和 Time to Interactive (TTI) 之间阻塞用户交互的总时间。 TBT 越短，用户就能更快地与页面交互。

优化建议：
- 减少 JavaScript 执行时间： 减少 JavaScript 的数量和大小，使用代码分割，延迟加载非关键代码。
```
// 动态导入模块
import('./module.js').then(module => {
  module.default();
});
```
- 避免长时间运行的任务： 将长时间运行的任务分解成更小的块，使用 setTimeout 或 requestAnimationFrame 来避免阻塞主线程。
```
// 使用 setTimeout 来避免阻塞主线程
setTimeout(() => {
  // 执行长时间运行的任务
}, 0);
```
- 使用 Web Workers： 将计算密集型任务移到 Web Workers 中，在后台线程中运行。
Time to Interactive (TTI)：可交互时间

TTI 衡量页面何时变得完全可交互。也就是说，页面上的所有元素都已加载，并且可以响应用户输入。

优化建议：
- 优化 JavaScript： 和 TBT 类似，减少 JavaScript 的数量和大小，使用代码分割，延迟加载非关键代码。
- 预加载关键资源： 使用 <link rel="preload"> 预加载关键资源，如 CSS、JavaScript 和字体。
```
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="script.js" as="script">
```
- 懒加载非关键资源： 使用 loading="lazy" 属性懒加载图片和 iframe。
```
<img src="image.jpg" alt="描述" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>
```

自动化优化：让机器替你干活

手动优化性能很费时费力，所以我们要学会利用工具，让机器替我们干活。

Webpack Bundle Analyzer：分析你的包

Webpack Bundle Analyzer 可以可视化你的 Webpack 打包结果，让你清楚地看到哪些模块占用了最多的空间。
```
npm install --save-dev webpack-bundle-analyzer
```
然后在你的 Webpack 配置文件中添加：
```
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};
```
运行 webpack --mode production，Webpack Bundle Analyzer 就会启动一个服务器，显示你的打包结果。
Lighthouse CI：持续集成

Lighthouse CI 可以让你在每次提交代码时自动运行 Lighthouse 审计，并检查性能是否下降。
```
npm install -g @lhci/cli
```
然后在你的 CI 流程中添加：
```
lhci autorun
```
Lighthouse CI 会自动收集 Lighthouse 报告，并将其上传到 Lighthouse CI 服务器。你可以在服务器上查看报告，并设置性能预算，当性能下降时收到通知。
PageSpeed Insights API：远程监控

PageSpeed Insights API 可以让你远程监控网站的性能，并定期获取 Lighthouse 报告。

你可以使用 Google Cloud Functions 或其他服务器端技术来调用 PageSpeed Insights API，并将报告存储在数据库中。

一些进阶技巧：更上一层楼

HTTP/2： 使用 HTTP/2 协议可以并行加载多个资源，提高页面加载速度。
Service Worker： 使用 Service Worker 可以缓存静态资源，实现离线访问和更快的页面加载速度。
Preconnect： 使用 <link rel="preconnect"> 提前建立与重要服务器的连接。
```
<link rel="preconnect" href="https://example.com">
```
DNS Prefetch： 使用 <link rel="dns-prefetch"> 提前解析域名。
```
<link rel="dns-prefetch" href="https://example.com">
```

总结：性能优化永无止境

性能优化是一个持续不断的过程，没有一劳永逸的解决方案。我们需要不断地学习新的技术，并根据实际情况调整优化策略。

记住，用户体验至上！让你的网站跑得更快，让你的用户更满意！

表格总结：

指标	描述	优化建议
First Contentful Paint (FCP)	浏览器首次渲染任何文本、图像、非白色画布或 SVG 的时间。	消除渲染阻塞资源，缩小 CSS 和 JavaScript，优化图片。
Largest Contentful Paint (LCP)	视口中可见的最大内容元素完成渲染的时间。	优化服务器响应时间，优化阻塞渲染的 CSS 和 JavaScript，优化图片。
Cumulative Layout Shift (CLS)	页面在加载过程中发生的意外布局偏移。	为图片和视频指定尺寸，避免在现有内容上方插入新内容。
Total Blocking Time (TBT)	页面在 FCP 和 Time to Interactive (TTI) 之间阻塞用户交互的总时间。	减少 JavaScript 执行时间，避免长时间运行的任务，使用 Web Workers。
Time to Interactive (TTI)	页面何时变得完全可交互。	优化 JavaScript，预加载关键资源，懒加载非关键资源。

结尾：

希望今天的分享对大家有所帮助。记住，性能优化不是玄学，而是一门科学。只要掌握了正确的方法，就能让你的网站焕发新生，赢得用户的喜爱。

感谢大家的收看！下次再见！

发表回复 取消回复

发表回复取消回复