Web性能测试：使用`Lighthouse`、`WebPageTest`和`Chrome DevTools`进行性能分析和优化。

好的，我们现在开始今天的Web性能测试讲座。今天我们主要讨论如何使用Lighthouse、WebPageTest和Chrome DevTools进行性能分析和优化。这三个工具是Web开发人员的利器，可以帮助我们识别和解决各种性能瓶颈，从而提升用户体验。

一、Web性能的重要性

在深入工具之前，我们先简单回顾一下Web性能的重要性。一个性能良好的网站能带来以下好处：

• 提升用户体验： 快速加载的网站能让用户更愉快地浏览，减少跳出率。
• 改善SEO排名： Google等搜索引擎会将网站速度作为排名的一个重要因素。
• 提高转化率： 更快的网站能促使用户完成购买或其他目标行为。
• 降低服务器成本： 优化的网站能更有效地利用服务器资源。

二、Lighthouse：自动化性能审计工具

Lighthouse 是 Google Chrome 内置的自动化开源工具，用于改进 Web 应用的质量。它可以对 Web 应用进行审计，包括性能、可访问性、渐进式 Web 应用 (PWA)、SEO 等方面，并提供改进建议。

1. 如何运行 Lighthouse

• Chrome DevTools： 在 Chrome 浏览器中打开 DevTools (F12 或右键 -> 检查)，选择 "Lighthouse" 面板。
• Chrome 扩展程序： 安装 Lighthouse Chrome 扩展程序。
• Node.js CLI： 通过 npm 安装 Lighthouse CLI (npm install -g lighthouse)。

2. 使用 Chrome DevTools 运行 Lighthouse

• 打开 Chrome DevTools。
• 切换到 "Lighthouse" 面板。
• 选择要审计的类别（例如 "Performance"）。
• 选择设备类型（例如 "Mobile" 或 "Desktop"）。
• 点击 "Generate report"。

3. 使用 Lighthouse CLI 运行 Lighthouse

在命令行中运行以下命令：

lighthouse https://example.com --view

这会生成一个 HTML 报告，并在浏览器中打开。

4. Lighthouse 报告解读

Lighthouse 报告包含以下几个部分：

• Performance (性能)： 衡量网站加载速度和响应速度。
• Accessibility (可访问性)： 衡量网站对残障人士的友好程度。
• Best Practices (最佳实践)： 衡量网站是否遵循 Web 开发最佳实践。
• SEO (搜索引擎优化)： 衡量网站对搜索引擎的友好程度。
• Progressive Web App (PWA)： 衡量网站是否符合 PWA 的标准。

每个部分都会给出一个分数 (0-100)，以及详细的审计结果和改进建议。

5. 常见的 Lighthouse 性能审计指标

Lighthouse 的 Performance 部分包含多个关键指标，这些指标可以帮助我们了解网站的性能瓶颈。

指标名称	描述
First Contentful Paint (FCP)	浏览器渲染来自 DOM 的第一位内容所用的时间，可以是文本、图片（包括背景图）、 元素等。
Largest Contentful Paint (LCP)	浏览器渲染可视区域中面积最大的内容元素所需的时间。它是用户感知的加载速度的重要指标。
Speed Index	页面可见内容的填充速度。
Total Blocking Time (TBT)	FCP 和 Time to Interactive 之间的总阻塞时间，指主线程被阻塞，无法响应用户输入的时间。
Cumulative Layout Shift (CLS)	衡量页面布局的视觉稳定性。当页面上的元素在没有预期的情况下发生移动时，就会发生布局偏移。
Time to Interactive (TTI)	页面完全可以交互所需的时间，指页面上的所有可见元素都已渲染完成，并且页面能够响应用户的输入。
First CPU Idle	页面首次空闲的时间，指页面上的大部分元素都已渲染完成，并且主线程有足够的空闲时间来响应用户的输入。
Max Potential First Input Delay	最大潜在首次输入延迟，指用户首次尝试与页面交互时，页面响应所需的最长时间。

6. Lighthouse 性能优化建议

Lighthouse 会根据审计结果提供详细的性能优化建议。以下是一些常见的建议：

• Eliminate render-blocking resources (消除渲染阻塞资源)： 延迟加载非关键的 CSS 和 JavaScript。
• Minify CSS/JavaScript (压缩 CSS/JavaScript)： 减小文件大小。
• Optimize images (优化图像)： 使用适当的图像格式、压缩图像、使用响应式图像。
• Serve images in next-gen formats (使用下一代图像格式)： 使用 WebP 或 AVIF 格式。
• Efficiently encode images (高效地编码图像)： 调整图像质量设置。
• Enable text compression (启用文本压缩)： 使用 Gzip 或 Brotli 压缩文本资源。
• Preload key requests (预加载关键请求)： 提前加载关键资源，例如字体和关键 CSS。
• Reduce initial server response time (减少初始服务器响应时间)： 优化服务器配置。
• Use a Content Delivery Network (CDN) (使用内容分发网络)： 将静态资源分发到全球各地的服务器。
• Avoid excessive DOM size (避免过大的 DOM 大小)： 减少 DOM 元素的数量。
• Minimize third-party usage (最小化第三方使用)： 减少第三方脚本的数量和大小。
• Reduce JavaScript execution time (减少 JavaScript 执行时间)： 优化 JavaScript 代码。
• Defer offscreen images (延迟加载屏幕外图像)： 仅在图像进入视口时才加载它们。
• Properly size images (适当调整图像大小)： 避免加载大于实际显示尺寸的图像。
• Avoid large network payloads (避免大型网络负载)： 减少网络请求的数量和大小。
• Avoid document.write() (避免使用 document.write())： document.write() 会阻塞页面渲染。
• Serve static assets with an efficient cache policy (使用有效的缓存策略提供静态资源)： 设置适当的 Cache-Control 标头。
• Avoid chaining critical requests (避免链接关键请求)： 优化资源加载顺序。

7. Lighthouse 的局限性

Lighthouse 是一个非常强大的工具，但它也有一些局限性：

• 模拟环境： Lighthouse 在模拟环境中运行，可能无法完全反映真实用户的体验。
• 单点测试： Lighthouse 只是对特定页面的单点测试，无法评估整个网站的性能。
• 主观判断： Lighthouse 的建议是基于最佳实践，可能需要根据实际情况进行调整。

三、WebPageTest：真实浏览器性能测试

WebPageTest 是一个免费的开源工具，用于测试网站的性能。与 Lighthouse 不同，WebPageTest 使用真实的浏览器进行测试，可以更准确地反映真实用户的体验。WebPageTest 提供了丰富的配置选项，可以模拟不同的网络环境、浏览器和设备。

1. 如何使用 WebPageTest

• 访问 WebPageTest 网站：https://www.webpagetest.org/
• 输入要测试的 URL。
• 选择测试位置、浏览器和连接速度。
• 点击 "Start Test"。

2. WebPageTest 报告解读

WebPageTest 报告包含以下几个部分：

• Summary (摘要)： 包含测试的总体结果，例如加载时间、请求数量和字节大小。
• Performance Review (性能评估)： 提供对性能指标的详细分析，例如 First Byte Time、Keep-alive Enabled 和 Compress Transfer。
• Content Breakdown (内容分解)： 显示各种内容类型的加载时间、请求数量和字节大小。
• Domains (域名)： 列出所有被请求的域名，以及每个域名的加载时间、请求数量和字节大小。
• Connection View (连接视图)： 显示所有请求的瀑布图，可以帮助我们识别性能瓶颈。
• Screenshot (截图)： 显示页面加载过程中的截图。
• Video (视频)： 显示页面加载过程的视频。
• Optimization Checklist (优化清单)： 提供优化建议。

3. WebPageTest 关键性能指标

WebPageTest 报告包含多个关键性能指标，这些指标可以帮助我们了解网站的性能瓶颈。

指标名称	描述
First Byte Time (TTFB)	浏览器收到服务器返回的第一个字节的时间。
Start Render	浏览器开始渲染页面内容的时间。
Speed Index	页面可见内容的填充速度。
Document Complete	浏览器完成解析 HTML 文档的时间。
Fully Loaded	页面上的所有资源都已加载完成的时间。
Requests (Fully Loaded)	页面完全加载所需的请求数量。
Bytes In (Fully Loaded)	页面完全加载所需的字节大小。
Keep-alive Enabled	是否启用了 Keep-alive 连接。
Compress Transfer	是否启用了文本压缩。
Cache static content	是否缓存了静态内容。
Effective use of CDN	是否有效使用了 CDN。

4. WebPageTest 优化建议

WebPageTest 会根据测试结果提供详细的优化建议。以下是一些常见的建议：

• Reduce TTFB: 优化服务器配置，使用 CDN。
• Optimize images: 使用适当的图像格式、压缩图像、使用响应式图像。
• Enable Keep-alive: 启用 Keep-alive 连接，减少 TCP 连接的开销。
• Compress Transfer: 启用 Gzip 或 Brotli 压缩，减小文本资源的大小。
• Cache static content: 设置适当的 Cache-Control 标头，缓存静态资源。
• Use a CDN: 将静态资源分发到全球各地的服务器。
• Minimize HTTP requests: 减少 HTTP 请求的数量，合并 CSS 和 JavaScript 文件。
• Optimize JavaScript: 减少 JavaScript 执行时间，延迟加载非关键的 JavaScript。
• Optimize CSS: 减少 CSS 文件的大小，删除未使用的 CSS。
• Avoid redirects: 避免不必要的重定向，减少 HTTP 请求的数量。
• Eliminate render-blocking resources: 延迟加载非关键的 CSS 和 JavaScript。

5. WebPageTest 的高级用法

WebPageTest 提供了许多高级用法，可以帮助我们进行更深入的性能分析。

• Scripting (脚本)： 可以使用 WebPageTest 的脚本功能来模拟复杂的用户行为。
• Custom Metrics (自定义指标)： 可以定义自定义指标来衡量网站的特定性能方面。
• Comparison (比较)： 可以比较不同版本的网站的性能。
• Private Instances (私有实例)： 可以搭建私有的 WebPageTest 实例，用于测试内部网站或应用程序。

四、Chrome DevTools：强大的开发者工具

Chrome DevTools 是一套内置于 Chrome 浏览器的开发者工具，可以用于调试和分析 Web 应用。DevTools 提供了许多功能，可以帮助我们识别和解决性能瓶颈。

1. 如何打开 Chrome DevTools

• 在 Chrome 浏览器中按下 F12 键。
• 右键点击页面，选择 "检查"。
• 在 Chrome 菜单中选择 "更多工具" -> "开发者工具"。

2. DevTools 的主要面板

• Elements (元素)： 用于查看和编辑 HTML 和 CSS。
• Console (控制台)： 用于查看 JavaScript 日志和执行 JavaScript 代码。
• Sources (源代码)： 用于查看和调试 JavaScript 代码。
• Network (网络)： 用于查看网络请求和响应。
• Performance (性能)： 用于分析 CPU 使用率、内存使用率和渲染性能。
• Memory (内存)： 用于分析内存使用情况。
• Application (应用)： 用于查看和管理 Web 应用的存储、缓存和 Service Worker。
• Security (安全)： 用于查看网站的安全信息。
• Lighthouse (Lighthouse)： 用于运行 Lighthouse 审计。

3. 使用 Network 面板进行性能分析

Network 面板可以帮助我们分析网络请求和响应，识别性能瓶颈。

• Waterfall Chart (瀑布图)： 显示所有请求的瀑布图，可以帮助我们识别加载时间长的资源。
• Timing Tab (计时选项卡)： 显示每个请求的详细计时信息，例如 Queuing、Stalled、DNS Lookup、Initial connection、SSL negotiation、Request sent、Waiting (TTFB) 和 Content Download。
• Headers Tab (标头选项卡)： 显示每个请求的 HTTP 标头。
• Preview Tab (预览选项卡)： 显示每个请求的响应内容。
• Response Tab (响应选项卡)： 显示每个请求的响应内容。
• Cookies Tab (Cookie 选项卡)： 显示每个请求的 Cookie 信息。

4. 使用 Performance 面板进行性能分析

Performance 面板可以帮助我们分析 CPU 使用率、内存使用率和渲染性能。

• Record (录制)： 点击 "Record" 按钮开始录制性能数据。
• Stop (停止)： 点击 "Stop" 按钮停止录制性能数据。
• Flame Chart (火焰图)： 显示 CPU 使用率的火焰图，可以帮助我们识别 CPU 密集型的函数。
• Bottom-Up Tab (自下而上选项卡)： 显示 CPU 使用率的自下而上视图，可以帮助我们识别 CPU 密集型的函数。
• Call Tree Tab (调用树选项卡)： 显示 CPU 使用率的调用树视图，可以帮助我们识别 CPU 密集型的函数。
• Event Log Tab (事件日志选项卡)： 显示所有事件的日志，例如渲染、布局和绘制。
• Memory Tab (内存选项卡)： 显示内存使用情况的图表。

5. 常见的 DevTools 性能优化技巧

• Identify slow resources: 使用 Network 面板识别加载时间长的资源。
• Optimize images: 使用适当的图像格式、压缩图像、使用响应式图像。
• Minimize HTTP requests: 减少 HTTP 请求的数量，合并 CSS 和 JavaScript 文件。
• Optimize JavaScript: 减少 JavaScript 执行时间，延迟加载非关键的 JavaScript。
• Optimize CSS: 减少 CSS 文件的大小，删除未使用的 CSS。
• Avoid redirects: 避免不必要的重定向，减少 HTTP 请求的数量。
• Eliminate render-blocking resources: 延迟加载非关键的 CSS 和 JavaScript。
• Use caching: 设置适当的 Cache-Control 标头，缓存静态资源。
• Reduce DOM size: 减少 DOM 元素的数量。
• Avoid expensive operations: 避免在主线程上执行昂贵的操作，例如大量的 DOM 操作和复杂的计算。
• Use requestAnimationFrame: 使用 requestAnimationFrame 来执行动画，提高渲染性能。
• Debounce and throttle: 使用防抖和节流来限制函数的执行频率，提高性能。
• Use web workers: 使用 Web Workers 在后台线程中执行 JavaScript 代码，避免阻塞主线程。

五、代码示例：延迟加载图像

以下是一个使用 JavaScript 延迟加载图像的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Lazy Loading Images</title>
  <style>
    .lazy-load {
      opacity: 0;
      transition: opacity 0.5s;
    }

    .lazy-load.loaded {
      opacity: 1;
    }
  </style>
</head>
<body>
  <img class="lazy-load" data-src="image1.jpg" alt="Image 1">
  <img class="lazy-load" data-src="image2.jpg" alt="Image 2">
  <img class="lazy-load" data-src="image3.jpg" alt="Image 3">

  <script>
    const lazyLoadImages = document.querySelectorAll('.lazy-load');

    const loadImages = (image) => {
      image.src = image.dataset.src;
      image.onload = () => {
        image.classList.add('loaded');
      };
    };

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          loadImages(entry.target);
          observer.unobserve(entry.target);
        }
      });
    });

    lazyLoadImages.forEach(image => {
      observer.observe(image);
    });
  </script>
</body>
</html>

这个示例使用 Intersection Observer API 来检测图像是否进入视口。当图像进入视口时，JavaScript 会加载图像，并将其添加到 DOM 中。

六、代码示例：使用 WebP 图像格式

以下是一个使用 WebP 图像格式的示例：

<!DOCTYPE html>
<html>
<head>
  <title>WebP Images</title>
</head>
<body>
  <picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Image">
  </picture>
</body>
</html>

这个示例使用 <picture> 元素来提供 WebP 图像格式。如果浏览器支持 WebP 图像格式，则会加载 WebP 图像。否则，会加载 JPG 图像。

七、总结

今天我们学习了如何使用 Lighthouse、WebPageTest 和 Chrome DevTools 进行 Web 性能分析和优化。希望这些工具和技巧能帮助大家构建更快、更流畅的 Web 应用。记住，性能优化是一个持续的过程，需要不断地测试、分析和改进。通过持续的努力，我们可以为用户提供更好的 Web 体验。