16、网页性能优化：核心指标、工具与策略-优快云博客

本文链接：https://blog.youkuaiyun.com/gitlab7runner/article/details/154418656

网页性能优化：核心指标、工具与策略

在当今数字化时代，网站的性能直接影响着用户体验、搜索引擎排名和业务转化率。本文将深入探讨网页性能的核心指标、实用的性能测量工具以及有效的优化策略，帮助你打造更快、更流畅的网站。

核心网页指标（Core Web Vitals）

核心网页指标（CWV）是 Google 为评估和提升网站用户体验而设计的关键指标，其重要性体现在多个方面：
- 提升用户体验 ：更快、响应更迅速的网站能提高用户参与度和满意度。
- 优化 SEO 排名 ：CWV 直接影响 Google 搜索排名。
- 降低跳出率 ：优化指标有助于让用户在网站上停留更长时间。
- 增强可访问性 ：改善残障用户的体验。
- 获得竞争优势 ：更高的 CWV 分数意味着更好的用户体验和 SEO 效果，使网站在竞争中脱颖而出。

Google 通过大量研究和用户数据分析创建了 CWV，重点关注直接影响用户体验的指标，包括加载速度、交互性和视觉稳定性。其目标是推动网站所有者和开发者打造快速、响应灵敏且稳定的网站。

可交互时间（Time to Interactive，TTI）

TTI 衡量网页达到完全可交互状态所需的时间。当网页满足以下条件时，被认为是完全可交互的：
- 显示有用内容 ：页面已渲染出对用户可见的内容，由首次内容绘制（First Contentful Paint，FCP）指示。
- 事件处理程序已注册 ：页面上大多数可见元素已附加事件处理程序，并准备好响应用户交互。
- 响应用户交互 ：页面在 50 毫秒内响应用户输入，确保流畅的交互体验。

TTI 的计算过程如下：
1. 页面加载 ：页面开始加载的时间点。
2. 首次内容绘制（FCP） ：页面首次显示任何有用内容（如文本、图像）的时间。
3. 事件处理程序注册 ：事件处理程序附加到页面上大多数可见元素的时间。
4. 响应用户交互 ：页面在 50 毫秒内响应用户输入的时间。
5. 完全可交互（TTI） ：结合上述所有条件，页面达到完全可交互状态的时间点。

理想的 TTI 分数应在 5 秒或更短。达到这个分数意味着页面能快速变得完全可交互，提供更好的用户体验。导致 TTI 不佳的原因包括：
- JavaScript 执行时间过长 ：长时间运行的脚本会延迟交互性。
- 渲染阻塞资源 ：阻塞渲染的 CSS 和 JavaScript 文件。
- 网络延迟 ：缓慢的网络响应会增加 TTI。
- 大量视觉内容 ：大尺寸的图像和视频会延迟完全交互性。

总阻塞时间（Total Blocking Time，TBT）

TBT 衡量网页在加载阶段无法响应用户输入（如鼠标点击、屏幕点击或键盘按键）的总时间。它是一个重要指标，因为它反映了用户在与页面交互时所经历的延迟。

交互到下次绘制（Interaction to Next Paint，INP）、总阻塞时间（TBT）、可交互时间（TTI）和首次输入延迟（First Input Delay，FID）都是用于衡量网页交互性和响应性不同方面的指标：
| 指标 | 描述 |
| ---- | ---- |
| INP | 评估页面对所有用户交互的整体响应性，确保始终提供流畅的体验。 |
| TBT | 关注页面加载阶段的无响应期，指示页面被长任务和脚本阻塞的时间。 |
| TTI | 测量页面达到完全可交互状态所需的时间，涵盖整个加载过程。 |
| FID | 测量用户首次交互到浏览器开始处理该交互的延迟，突出页面的初始响应性。 |

理想的 TBT 分数应在 200 毫秒或更短。达到这个分数意味着页面在加载阶段保持响应，提供流畅的用户体验。导致 TBT 不佳的原因包括：
- 长时间运行的 JavaScript 任务 ：长时间运行的任务会阻塞主线程，阻止页面进行交互。
- 大量 JavaScript 执行 ：解析、编译和执行大型 JavaScript 文件需要大量时间，会增加 TBT。
- 渲染阻塞资源 ：在加载完成之前阻塞渲染的 CSS 和 JavaScript 文件会导致 TBT 增加。
- 网络延迟 ：从网络获取资源的延迟也会影响 TBT，特别是当这些资源是渲染阻塞资源时。

性能测量工具

为了帮助开发者优化网页性能，Chrome DevTools 提供了一系列强大的性能测量工具。

代码覆盖率（Code Coverage）

代码覆盖率工具可帮助你找出代码中未使用的 JavaScript 和 CSS，从而优化资源。其主要特点包括：
- 深入分析 ：能够识别代码中未使用的 JavaScript 和 CSS，帮助你精简资源。
- 性能洞察 ：提供有价值的使用统计信息，指导你优化代码以提高性能。
- 提高效率 ：有助于减少页面加载时间和数据使用量，使网站更高效、更用户友好。

使用代码覆盖率工具的好处包括：
- 加快加载时间 ：通过移除多余代码，加快网站加载速度，为用户提供更流畅的体验。
- 节省带宽 ：确保只加载必要的资源，节省数据。
- 保持代码整洁 ：定期消除未使用的代码，使代码库保持精简、高效和易于管理。

性能监视器（Performance Monitor）

性能监视器提供对网站性能的实时分析，就像一个实时仪表盘，在你与网站交互时跟踪关键性能指标。其主要特点包括：
- 实时分析 ：显示一个时间轴，实时绘制性能指标图表。
- 详细指标 ：跟踪 CPU 使用率、JavaScript 堆大小、DOM 节点总数、JavaScript 事件监听器、文档和框架等。
- 布局和样式重新计算 ：还监控每秒的布局和样式重新计算次数。

使用性能监视器的好处包括：
- 改善运行时性能 ：通过观察与网站交互时指标值的变化，发现改进的机会。
- 识别低效代码 ：例如，CPU 使用率的大幅飙升可能指向低效代码。
- 减少内存使用 ：如果页面包含大量 JS 事件监听器，重构代码以减少这些数量可以释放内存。

graph LR
    A[开始] --> B[打开 Chrome DevTools]
    B --> C[选择 Performance Monitor 选项卡]
    C --> D[与网站交互，观察指标变化]
    D --> E[分析数据，找出性能瓶颈]
    E --> F[优化代码，提高性能]
    F --> G[结束]

网络监视器（Network Monitor）

网络监视器是现代浏览器中用于分析、调试和优化网站网络活动的重要工具。它提供对网页所有网络请求的详细概述，帮助开发者识别性能瓶颈、安全问题和其他潜在问题。其主要特点包括：
- 实时分析 ：显示一个时间轴，实时绘制网络活动图表。
- 详细指标 ：跟踪各种指标，包括单个资源的属性，如 HTTP 标头、内容、大小等。
- 过滤和搜索 ：可以按属性、类型和时间过滤请求，并搜索网络标头和响应。
- 阻止请求 ：可以阻止特定请求，以了解页面在没有这些请求时的行为。

使用网络监视器的好处包括：
- 改善加载时间 ：通过观察与网站交互时指标值的变化，发现改进的机会。
- 识别低效请求 ：例如，大量请求可能指向低效代码或需要整合资源。
- 减少带宽 ：只加载必要的资源，节省数据。

内存检查（Memory Inspection）

内存检查工具提供对网站内存使用情况的实时详细视图，帮助你发现内存问题。其主要特点包括：
- 实时分析 ：显示一个时间轴，实时绘制内存使用情况图表。
- 详细指标 ：跟踪各种指标，包括单个资源的属性，如 ArrayBuffer、TypedArray、DataView 和 WebAssembly 内存。
- 导航和选择 ：可以在内存缓冲区中导航并选择用于解释值的类型。它直接在字节旁边显示 ASCII 值，并允许你选择不同的字节序。
- 多对象检查 ：可以同时检查多个对象，如 DataView 和 TypedArray。

使用内存检查工具的好处包括：
- 改善运行时性能 ：通过观察与网站交互时指标值的变化，发现改进的机会。
- 识别内存泄漏 ：帮助你追踪应用程序中的内存泄漏问题，从而提高性能并减少内存使用。
- 减少内存使用 ：只加载必要的资源，节省内存。

Lighthouse

Lighthouse 是 Google 开发的开源自动化工具，用于提高网页质量。它可以对性能、可访问性、渐进式 Web 应用程序、SEO 等进行全面审计，并提供详细的报告。其主要特点包括：
- 全面审计 ：可以对性能、可访问性、渐进式 Web 应用程序、SEO 等进行审计，提供网站健康状况的整体视图。
- 多功能性 ：可以在 Chrome DevTools 中运行，也可以从命令行或作为 Node 模块运行，方便集成到你的工作流程中。
- 可操作的报告 ：生成关于页面在各项审计中的表现的报告，每个审计都有参考文档，解释审计的重要性和如何修复问题，使报告不仅信息丰富，而且具有可操作性。

使用 Lighthouse 的好处包括：
- 改善用户体验 ：通过识别改进领域，帮助提升网站整体用户体验。
- 提升 SEO 排名 ：审计可以帮助优化网站以适应搜索引擎，有可能提升 SEO 排名。
- 防止性能下降 ：可以使用 Lighthouse-ci 防止网站性能下降，确保性能稳定。

WebPageTest

WebPageTest 是一个著名的开源工具，可让你准确评估网站的实时性能，并提供全面的报告以帮助你优化网站加载速度。其主要特点包括：
- 实时性能分析 ：可以对网站性能进行各种实时测试，生成报告，提供加载时间和页面渲染的洞察。
- 详细报告 ：提供一份详细的报告，包括对各种性能指标的深入分析，帮助你识别需要改进的领域。
- 自定义选项 ：提供各种选项，根据你的需求定制和执行测试参数。
- 多地点测试 ：允许从全球多个地点进行网站性能测试，了解全球用户的体验。
- 瀑布图 ：创建瀑布图，直观展示网页的加载过程，帮助识别性能瓶颈。
- 直观报告 ：生成的测试报告用户友好，即使是初次使用的用户也能轻松理解。

使用 WebPageTest 的好处包括：
- 识别性能问题 ：帮助你找出网站的弱点，并推荐改进领域，让你专注于特定问题。
- 提升用户体验 ：识别问题并加以解决，改善网站整体用户体验，提高用户留存率、降低跳出率，从而提高转化率。
- 优化 SEO ：网站性能和速度是搜索引擎（如 Google）排名的因素之一。
- 性能跟踪 ：轻松监控网站的日常性能，避免可能影响未来性能的潜在问题。

HTTP Archive

HTTP Archive 是一个有价值的资源，提供了网站构建方式的历史记录。它定期抓取网络上的顶级网站，并记录有关获取的资源、使用的 Web 平台 API 和功能以及每个页面的执行跟踪的详细信息。其作用包括：
- 网页性能洞察 ：是网页性能信息的永久存储库，如页面大小、失败请求和使用的技术。这些数据对于理解网站构建如何影响性能和用户体验至关重要。
- 趋势分析 ：通过跟踪网络的构建方式随时间的变化，帮助我们识别网页开发的趋势，指导最佳实践并突出网络社区可以改进的领域。
- 基准测试 ：可以将网站性能与更广泛的网络趋势进行比较，帮助识别网站可能表现不佳的领域，并指导优化工作。
- 研究和报告 ：收集的数据用于年度 Web Almanac 报告，该报告将 HTTP Archive 的原始统计数据和趋势与网络社区的专业知识相结合，为开发者、网页性能分析师和数字策略师提供有关网络状态的洞察。

通过使用这些性能测量工具，开发者可以深入了解网站的性能瓶颈，并采取针对性的优化措施，从而提升网站的用户体验和竞争力。在下半部分，我们将介绍一些具体的优化策略，帮助你进一步提升网站性能。

网页性能优化：核心指标、工具与策略

优化策略

懒加载优先（Lazy-First）

“懒加载优先”模式是一种优先异步和按需加载关键资源（如图像和 JavaScript）的策略，可确保主线程不被阻塞，使其能及时响应用户交互。以下是一些可采用的技术：

可见时导入 ：仅当资源在屏幕上可见时才加载它们。可以使用 react-lazy-load-image-component 库来实现图像的懒加载，示例代码如下：

import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';

const MyComponent = () => (
  <div>
    <LazyLoadImage
      alt="example"
      height={200}
      src="example.jpg"
      width={200}
    />
    <span>Image will load when visible</span>
  </div>
);

export default MyComponent;

交互时导入 ：当用户发生需要某些资源的交互时再加载它们。可以在特定交互（如按钮点击）发生时使用动态导入，示例代码如下：

import React, { useState, Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  const [load, setLoad] = useState(false);
  return (
    <div>
      <button onClick={() => setLoad(true)}>Load</button>
      {load && (
        <Suspense fallback={<span>Loading...</span>}>
          <LazyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default MyComponent;

动态导入 ：使用 JavaScript 中的动态 import() 语法按需加载模块，示例代码如下：

button.addEventListener('click', event => {
  import('./myLibrary.js')
    .then(module => {
      // Use the imported module
    })
    .catch(error => {
      // Handle the error
      console.error("Error loading module: ", error);
    });
});

代码分割 ：将代码拆分为多个可以按需或并行加载的包或块。常用的模块打包工具 Webpack 支持代码分割，可使用 React.lazy 加载应用的不同部分，示例代码如下：

import React, { Suspense } from 'react';
const ComponentA = React.lazy(() => import('./ComponentA'));
const ComponentB = React.lazy(() => import('./ComponentB'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ComponentA />
      <ComponentB />
    </Suspense>
  );
}

export default MyComponent;

基于路由的分割 ：根据应用的路由分割代码，这样特定路由或视图的代码仅在用户导航到该路由时加载。可以结合 React.lazy 和 React Router 实现基于路由的代码分割，示例代码如下：

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>
);

export default App;

列表虚拟化 ：仅渲染列表中当前可见的项，提高大型列表的性能。可以使用 react-window 库实现列表虚拟化，示例代码如下：

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const MyComponent = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => (
      <div style={style}>Row {index}</div>
    )}
  </List>
);

export default MyComponent;

小而优（Small Is Better）

在网页性能方面，小的资源通常更好，这适用于以下方面：
- 关键资源 ：如图像、CSS 和字体，较小的文件大小意味着更快的加载时间和更好的用户体验。
- DOM 节点 ：较小的 DOM 树可实现更快的渲染和更少的内存使用。
- npm 依赖项 ：较小的 npm 包可减小应用程序包的大小，从而加快加载时间。

以下是一些可应用的技巧：
- 图像优化 ：在使用图像（包括 SVG）之前应进行优化，以减小文件大小而不显著影响其质量。推荐使用 WebP 格式，因为它为网页图像提供了出色的无损和有损压缩。
- 减少 DOM 节点 ：可以使用分页和“加载更多”按钮等技术限制一次需要渲染的 DOM 节点数量，这对于包含大量数据的页面尤其能显著提高性能。
- 分析 npm 包大小 ：在将 npm 包添加到应用程序包之前，分析其大小很重要。可以使用 Bundlephobia 等工具，它们能提供包大小信息以及是否可以进行摇树优化。
- 摇树优化 ：摇树优化是一种通过消除未使用代码来优化应用程序的方法，它依赖于 ES6 模块语法的静态结构。因此，应优先选择支持模块化导出的库以实现摇树优化。

graph LR
    A[开始优化] --> B[关键资源优化]
    B --> B1[图像优化]
    B --> B2[CSS 和字体优化]
    A --> C[DOM 节点优化]
    C --> C1[分页技术]
    C --> C2["使用 '加载更多' 按钮"]
    A --> D[npm 依赖项优化]
    D --> D1[分析包大小]
    D --> D2[摇树优化]
    B1 --> E[完成优化]
    B2 --> E
    C1 --> E
    C2 --> E
    D1 --> E
    D2 --> E

总结

优化网页性能是一个持续的过程，需要综合考虑核心网页指标、使用合适的性能测量工具以及应用有效的优化策略。通过关注可交互时间（TTI）、总阻塞时间（TBT）等核心指标，利用 Chrome DevTools 中的各种工具进行性能分析，采用懒加载优先和小而优的优化策略，开发者可以显著提升网站的加载速度、交互性和稳定性，从而为用户提供更好的体验，提高网站在搜索引擎中的排名，并在竞争激烈的市场中脱颖而出。希望本文介绍的内容能帮助你打造出更快、更流畅的网站。