Skip to main content

前端性能优化方案

SewenJanuary 22, 2024About 64 min前端性能优化前端性能优化方案

前端性能优化方案

总览

优化分析

浏览器输入 URL 到显示页面，会经历以下过程：

  1. URL解析
  2. 检查浏览器缓存
  3. DNS解析
  4. 建立TCP连接
  5. 发送HTTP请求
  6. 服务器处理请求
  7. 接收响应
  8. 下载资源
  9. 页面渲染
  10. 执行 JavaScript

详细过程参考我的博客：输入url到页面展示全过程 | Sewen 博客 (sewar-x.github.io)

以上任何一个过程都会影响页面性能，我们可以通过一些关键指标 白屏时间FP、首屏时间FCP、可交互时间 TTI 等对网页进行测量。(详细测量指标参考我的博客：性能优化指标和监控 | Sewen 博客 (sewar-x.github.io))

通过 LightHouse 等工具可以对页面进行性能监控。（详细 Lighthouse 使用参考我的博客：性能优化指标和监控 | Sewen 博客 (sewar-x.github.io)）

根据以上输入 URL 到显示页面经历的全链路过程，可以在每一条链路中寻找优化方案：

  1. URL解析
  2. 检查浏览器缓存:（使用浏览器缓存）
  3. DNS解析:（DNS 预解析、预连接 、预获取、预渲染、预加载）
  4. 建立TCP连接
  5. 发送HTTP请求:（HTTP2、减少 HTTP 请求 大小和数量、避免重定向）
  6. 服务器处理请求:（服务端渲染 SSR、静态站点生成SSG）
  7. 接收响应
  8. 下载资源:（静态资源使用CDN、资源缓存、非关键 JavaScript 异步加载/延迟加载）
  9. 页面渲染:（图片懒加载、骨架屏、使用PWA离线安装、图片压缩、矢量图、使用字体图标、响应式图片）
  10. 执行 JavaScript（代码压缩、代码拆分、代码合并、提供公共代码、tree shaking 移除不必要代码、按需加载）

根据以上优化链路，可以将性能优化分为两个大的分类：

加载时性能

加载时优化 主要解决的就是让一个网站加载过程更快，比如压缩文件大小、使用CDN加速等方式可以优化加载性能。检查加载性能的指标一般看：白屏时间和首屏时间：

运行时性能

运行时性能是指页面运行时的性能表现，而不是页面加载时的性能。可以通过chrome开发者工具中的 Performance 面板来分析页面的运行时性能

前端性能优化方案

WebPack 性能优化方案

WebPack优化

构建和开发体验优化

优化点说明
缩小文件搜索范围减少构建系统需要搜索的文件数量
使用 DIIPlugin提高构建速度
优化构建速度通过各种构建工具插件来优化构建过程
使用 HappyPack并行处理构建任务以提高构建速度
开启模块热替换允许在不重载页面的情况下替换模块，提升开发体验

网络层优化

优化点说明
预解析DNS(DNS-Prefetch)提前解析DNS，减少域名解析时间
预连接(Preconnect)预先建立与关键第三方域的连接
预获取(Prefetching)预加载用户可能访问的资源
预载入(Preload)预加载某些关键资源以加快页面渲染
使用 ParallelUglifyPlugin并行压缩JavaScript文件以提高构建速度
CDN加速使用内容分发网络来加速资源加载
减少HTTP请求合并文件、使用CSS Sprites等
启用长期缓存通过设置合适的HTTP缓存头来减少服务器请求
使用HTTP2利用HTTP2的特性，如头部压缩、多路复用等来提升性能

浏览器和代码层优化

优化点说明
提升代码性能优化JavaScript执行效率
使用服务端渲染(SSR)服务器直接输出HTML，减少客户端渲染时间
开启 Scope Hoisting通过作用域提升来减少函数创建
async方式异步加载非关键资源，不阻塞页面渲染
图片懒加载仅在用户滚动到相应位置时加载图片
使用字体图标使用字体图标代替图片图标，减少HTTP请求
使用响应式图片根据视口大小加载合适尺寸的图片
延迟非关键CSS加载将非关键CSS放在页面底部或异步加载
调整图片大小确保图片实际尺寸与显示尺寸一致，避免不必要的缩放
降低图片质量使用压缩率更高的图片格式，如WebP
使用Web Workers将复杂计算放在Web Workers中，避免阻塞主线程
使用requestAnimationFrame优化动画，提高性能
CSS3效果代替图片使用CSS3属性来实现一些视觉效果，减少图片使用

服务器端优化

优化点说明
配置Gzip压缩在服务器端压缩文本资源，减少传输大小
Nginx优化配置Nginx服务器以提高性能
删除未使用的CSS移除未使用的CSS代码，减少样式表大小
编码优化使用更高效的编码方式
减少布局次数优化CSS和JavaScript以减少浏览器重排和重绘

其他优化

优化点说明
使用Tree Shaking移除未使用的代码以减少包大小
PWA应用骨架屏通过Service Workers缓存关键资源，提升离线访问和加载性能
按需加载仅在需要时加载组件或资源
service worker缓存使用Service Workers进行缓存管理
使用Prepack优化JavaScript代码的执行顺序，提高运行效率
使用Beacon进行数据上报通过Beacon API无阻塞地上报分析数据

网络加载优化

资源提示

此规范定义了 HTML 的 <Link> 元素的 rel 属性值，包括 dns-prefetch、preconnect、prefetch 和 prerender。我们可以使用这些资源提示让用用户代理帮助我们预解析 DNS、预链接、预加载资源以及预处理资源以提高页面性能。

DNS 预解析 (DNS-Prefetch)：

预连接 (Preconnect)：

预获取 (Prefetching)：

子资源 (Subresources)：

预渲染 (Prerender)：

预加载(Preload)：

preload 与 prefetch比较

避免链关键请求

Lighthouse 最小化关键请求深度审计的屏幕截图

减少http请求

网络面板请求时间分析

Lighthouse 审计网络负载

Lighthouse 的屏幕截图避免巨大的网络负载审计

减少HTTP请求的方式

避免重定向

使用 HTTP2

HTTP2 相比 HTTP1.1 有如下几个优点：

HTTP/2的优势

性能提升：

资源利用率提高：

安全性增强：

如何使用HTTP/2

  1. 浏览器支持：

    • 绝大多数现代浏览器（如Chrome、Firefox、Safari等）都支持HTTP/2协议。用户只需确保浏览器更新到最新版本即可。

  2. 服务器配置：

    • 要在服务器上启用HTTP/2，需要确保服务器软件（如Apache、Nginx等）支持HTTP/2，并在配置文件中进行相应的设置。例如，在Nginx中可以通过修改配置文件来启用HTTP/2支持。

  3. 客户端库和工具：

静态资源使用 CDN

详细过程可以参考我的博客：输入url到页面展示全过程 | Sewen 博客 (sewar-x.github.io)

CDN 内容分发: 内容分发网络。

HTTP 缓存

缓存过程

详细缓存过程可以参考我的博客：前端发版静态资源404问题 | Sewen 博客 (sewar-x.github.io)

Lighthouse 如何审计缓存

具有高效缓存策略审计的 Lighthouse Serve 静态资产的屏幕截图

网址可缓存资源的位置
缓存TTL资源的当前缓存持续时间
尺寸如果标记的资源已被缓存，您的用户将保存的数据的估计

如何在 Chrome DevTools 中验证缓存的响应

渲染优化

渲染机制优化

服务端渲染 SSR

详细服务端渲染原理参考我的博客：VueSSR原理分析 | Sewen 博客 (sewar-x.github.io)

静态站点生成 SSG

详细静态站生成概念参考我的博客：前端渲染架构 | Sewen 博客 (sewar-x.github.io)

如何搭建静态站点生成脚手架，参考我的博客：从零到一搭建移动端SSG项目 | Sewen 博客 (sewar-x.github.io)

静态站点生成技术实践，参考我的博客：SSG 移动端项目实践 | Sewen 博客 (sewar-x.github.io)

创建 PWA 应用

详细参考：SSG 移动端项目实践-PWA | Sewen 博客 (sewar-x.github.io)

PWA（Progressive Web App，渐进式网络应用）是一种结合了Web应用和移动应用优点的应用设计理念和技术，旨在为用户提供更好的用户体验。

PWA是一种使用现代Web技术（如HTML、CSS和JavaScript）构建的应用，旨在提供类似原生应用的用户体验，同时保持Web应用的跨平台性和易用性。

特点：

  1. 渐进增强：利用现代网络技术逐步增强用户体验。
  2. 响应式设计：适应各种设备的屏幕尺寸和分辨率，确保在各种设备上都能提供良好的用户体验。
  3. 离线可用：通过Service Worker技术实现离线使用，即使在没有网络连接的情况下，用户也能继续访问应用的主要功能。
  4. 像应用一样：提供类似于原生应用的体验，如全屏模式、图标等。
  5. 安全：通过HTTPS协议确保数据传输安全。
  6. 可发现：可以通过搜索引擎搜索到。
  7. 可重新访问：用户可以通过添加到主屏幕功能，快速访问应用。

关键技术：

  1. Service Worker：PWA的核心技术之一，是一种在浏览器后台运行的脚本，可以拦截和处理网络请求、实现离线缓存、推送通知等功能。
  2. Web App Manifest：一个JSON文件，包含应用的基本信息，如名称、图标、启动URL等，有助于将应用安装到用户的设备上，并使其在主屏幕上可用。
  3. HTTPS：PWA要求应用必须通过HTTPS协议进行传输，以确保数据的安全性和用户隐私的保护。

实现步骤：

  1. 创建基本的HTML、CSS和JavaScript文件：构建应用的基础界面和功能。
  2. 添加Web App Manifest：定义应用的元数据，如名称、图标等。
  3. 注册Service Worker：编写Service Worker脚本，并在主页面中注册它，以实现离线缓存、推送通知等功能。
  4. 优化性能和用户体验：通过减少加载时间、优化响应速度等手段，提升用户体验。

优势：

  1. 跨平台兼容性：PWA可以在各种设备和浏览器上运行，减少了开发和维护多平台应用的成本。
  2. 无需安装：用户可以直接通过浏览器访问PWA，无需下载和安装应用程序，节省了用户的时间和设备存储空间。
  3. 离线访问：利用Service Worker技术实现离线访问功能，提高了应用的可用性。
  4. 快速加载：通过缓存和预加载等技术，PWA可以实现快速加载，提高用户体验。
  5. 更新便捷：PWA的更新是实时的，无需用户手动更新应用程序，确保用户始终使用的是最新版本。
  6. 节约成本：开发PWA相对于原生应用的成本更低，因为PWA使用Web技术进行开发，可以共享大量的代码和资源。

应用场景：

PWA可以应用于各种类型的网络应用，从简单的博客到复杂的在线服务。例如，新闻阅读应用、电商应用、社交媒体应用等都可以采用PWA技术来提升用户体验和降低开发成本。

使用骨架屏

骨架屏（Skeleton Screen）是一种在Web或移动应用页面加载过程中，预先展示页面内容的大致轮廓或结构的技术。

这种技术通过快速渲染一些静态的图片、样式、色块或部分真实内容来进行占位，让用户对后续会渲染的内容有一定的预期，从而减轻用户在等待页面完全加载时的焦虑感，提升用户体验。

骨架屏的特点和优势：

  1. 快速渲染：骨架屏的渲染速度非常快，因为它通常只包含一些简单的静态元素，如线条、色块等，这些元素可以迅速被浏览器解析和渲染。
  2. 预期管理：通过展示页面内容的大致轮廓，骨架屏能够给用户一种内容正在逐渐加载的期待感，使用户对后续的内容加载过程有一个明确的预期。
  3. 提升体验：骨架屏的引入可以显著减少用户在页面加载过程中的等待焦虑，使页面加载的过程变得更加顺畅和自然。

骨架屏的实现方式：

  1. 前端渲染（CSR）：在前端JavaScript框架（如React、Vue等）中，可以在组件的渲染逻辑中添加骨架屏的渲染逻辑。当组件的数据还未加载完成时，先渲染骨架屏；当数据加载完成后，再替换为真实的内容。
  2. 后端渲染（SSR）：在服务端渲染的场景中，可以在服务端生成包含骨架屏的HTML页面，并将该页面发送给客户端。客户端在接收到页面后，先展示骨架屏，然后执行JavaScript来加载和渲染真实的内容。

骨架屏的应用场景：

骨架屏适用于任何需要优化页面加载体验的场景，特别是在网络条件较差或页面内容较多的情况下。通过引入骨架屏，可以显著提升用户的等待体验，减少因页面加载时间过长而导致的用户流失。

注意事项：

  1. 保持一致性：骨架屏的样式和布局应与真实页面的样式和布局保持一致，以避免给用户带来混淆。
  2. 性能优化：虽然骨架屏的渲染速度很快，但在实现时仍需注意性能优化，避免引入不必要的资源或计算。
  3. 灵活调整：根据页面的实际加载情况和用户反馈，灵活调整骨架屏的展示时间和样式，以达到最佳的用户体验效果。

浏览器渲染优化

浏览器渲染时 关键渲染路径 构成首屏渲染所必须的关键资源，因此通过缩短关键渲染路径来优化首屏性能。

消除渲染阻塞资源

Lighthouse 报告的“机会”部分列出了阻止页面首次绘制的所有 URL。目标是通过内联关键资源、推迟非关键资源和删除任何未使用的资源来减少这些阻止渲染的 URL 的影响

Lighthouse标记了两种阻止渲染的 URL：脚本和样式表。

一个<script>标签：

一个<link rel="stylesheet">标签：

如何识别关键资源

减少渲染阻塞资源影响的第一步是确定什么是关键的，什么不是。使用Chrome DevTools 中的Coverage 选项卡来识别非关键 CSS 和 JS。当您加载或运行页面时，该选项卡会告诉您使用了多少代码，以及加载了多少代码：

通过仅加载所需的代码和样式来减小页面大小。单击 URL 以在“源”面板中检查该文件。CSS 文件中的样式和 JavaScript 文件中的代码用两种颜色标记：

非核心代码异步加载

延迟非关键 CSS 加载

使用 requestAnimationFrame()

参考资料

window.requestAnimationFrame MDN

使用 requestIdleCallback()

使用 Web Workers

Web Workers 是浏览器提供的一种技术，用于在后台线程中运行 JavaScript 代码，从而避免阻塞主线程（UI线程）。这对于优化浏览器渲染原理具有重要意义，因为它允许执行耗时操作（如大量数据处理、复杂计算等）时，不会影响到页面的渲染和用户的交互。以下是关于 Web Workers 如何优化浏览器渲染原理的详细解析：

Web Workers 的基本原理

Web Workers 如何优化浏览器渲染：

  1. 避免阻塞主线程：
    • 当页面需要执行耗时操作时（如大量数据处理、复杂计算等），如果这些操作在主线程中执行，会阻塞页面的渲染和用户的交互。使用 Web Workers 可以将这些操作放在后台线程中执行，从而避免阻塞主线程。
  2. 提升页面响应性：
    • 由于 Web Workers 不会阻塞主线程，页面上的其他操作（如滚动、点击等）可以在这些耗时操作执行的同时正常进行，从而提升了页面的整体响应性。
  3. 优化资源加载：
    • 虽然 Web Workers 本身不直接优化资源加载，但它们可以通过执行与资源加载相关的异步操作（如预加载、缓存等）的后台处理来间接优化页面性能。例如，可以在 Worker 线程中预解析或预加载资源，以减少主线程在资源加载方面的负担。
  4. 分离计算密集型任务：
    • 将计算密集型任务（如图像处理、数据分析等）分离到 Worker 线程中执行，可以显著减少这些任务对主线程的影响。这样，主线程可以专注于处理用户交互和页面渲染等关键任务。

Web Workers 的应用场景：

注意事项：

综上所述，Web Workers 通过将耗时操作放在后台线程中执行来优化浏览器渲染原理。它们避免了阻塞主线程、提升了页面响应性，并允许将计算密集型任务与页面渲染和用户交互分离开来。然而，在使用时需要注意其复杂性和开销，并确保它们能够真正为页面性能带来提升。

优化绘制与合成

绘制和合成过程参考我的博客：输入url到页面展示全过程 | Sewen 博客 (sewar-x.github.io)

.moving-element {
  will-change: transform, opacity;
}

请参阅坚持只使用合成器的属性并管理层数和高性能动画。

延迟加载插件

如何延迟加载插件

参考资料

渲染性能

服务端优化

Lighthouse 报告的 Opportunities 部分报告 Time to First Byte，即用户浏览器接收页面内容的第一个字节所需的时间：

Nginx 开启Gzip 压缩

image-20210719101848079

参考资料

nginx中如何设置gzip

构建优化

代码分包

什么是分包？

分包是将项目中的代码和资源分割成多个小的包（chunks），以便在浏览器中进行更高效的加载和缓存。

这种分包策略通常用于优化单页面应用（SPA）的加载性能。

为什么需要分包呢？

主要和浏览器的缓存策略有关。

对于静态文件资源，如果文件名未发生变化，浏览器通常不会重新请求，而是直接使用缓存的资源。

打包工具在进行打包时，会在文件名中添加一个与文件内容相关的hash值。当文件内容发生变化时，hash值也会发生变化，从而触发浏览器重新请求新的资源。

通过分包，可以将不常变动的库或框架代码与经常变动的业务代码分开打包，可以更充分地利用浏览器的缓存机制，提高加载性能。

如何分包？

Vite 配置分包

在Vite中，你可以通过配置Rollup（Vite的底层打包工具）来实现分包。

具体来说，你可以在vite.config.js文件中使用build.rollupOptions.output来配置分包规则。

另外，你还可以使用import.meta.glob或import.meta.globEager来动态导入模块，并使用build.rollupOptions.manualChunks来指定分包策略。

    build: {
      rollupOptions: {
        output: {
          // 根据不同的格式设置不同的目录  
          entryFileNames: '[name].[format].js', // 为每种格式指定不同的文件名模板  
          chunkFileNames: '[name]-[hash].[format].js', // 同样为chunks指定不同的文件名模板  
        },
        // 配置manualChunks 表示进行分包，可以使用对象或函数
        manualChunks(id) {
          // 将node_modules 目录的包打包到 xw-element-vendor 文件下
          if (id.includes('node_modules')) {
            return 'xw-element-vendor'
          }
        }
      }
    }
Webpack 配置分包

webpack 配置 optimization.splitChunks.chunks 变量进行分包，示例如下：

const path = require('path');  
  
module.exports = {  
  entry: {  
    // 配置多个入口点  
    app: './src/app.js', // 主应用入口  
    vendor: ['react', 'react-dom'] // 第三方库作为单独的入口点  
  },  
  output: {  
    filename: '[name].bundle.js', // 使用 [name] 占位符来根据入口点名称生成文件名  
    path: path.resolve(__dirname, 'dist')  
  },  
  optimization: {  
    splitChunks: {  
      chunks: 'all', // 将所有类型的代码块都分割成单独的文件  
    },  
  },  
  module: {  
    // ... 其他 loader 配置  
  },  
  plugins: [  
    // ... 插件配置  
  ],  
};
动态导入分包

在 JavaScript 代码中，你可以使用 import() 语法来动态地加载模块。Vite/Webpack 会自动将这些模块分割成单独的代码块，并在需要时加载它们。

// app.js  
  
button.addEventListener('click', event => {  
  import('./dynamicModule.js')  
    .then(module => {  
      // 使用 dynamicModule.js 中的功能  
    })  
    .catch(err => {  
      // 加载失败处理  
    });  
});

分包原理？

1. Vite 分包原理：

Vite 分包主要依赖于Rollup的代码分割功能和 ESM 动态导入原理。

Rollup会分析你的代码依赖关系，并根据你的配置将代码分割成多个小的包。这些包在浏览器中可以通过异步加载的方式按需加载，从而实现更高效的资源利用和加载性能优化。

同时，Vite还利用了ES6的import语法和浏览器的ESM（ES Modules）特性来实现模块的动态导入和加载，进一步提高了分包的灵活性和效率。

2. Webpack 分包原理：

Webpack 的分包原理主要基于以下几点：

  1. 依赖图（Dependency Graph）：Webpack 会构建一个包含应用所有依赖的依赖图。
  2. 入口点（Entry Points）：Webpack 从入口点开始，递归地解析出应用的所有依赖。
  3. 代码分割（Code Splitting）：Webpack 支持两种方式的代码分割。
    • 基于入口点的分割：通过配置多个入口点，Webpack 可以将代码分割成多个 bundle。
    • 基于动态导入的分割：使用 JavaScript 的 import() 语法（动态导入），Webpack 可以在运行时按需加载代码块。

图片资源优化

优化原理描述示例/方法
压缩图片去除图片中的冗余数据，减小文件大小，加快加载速度。使用Photoshop等图像编辑软件手动压缩；
使用在线压缩工具自动压缩；
配置前端构建工具（如Webpack）的插件自动压缩。
选择合适的图片格式根据图片内容和需求选择合适的图片格式，以减小文件大小。JPEG：适用于照片和复杂图像；
PNG：适用于需要透明度的图像；
GIF：适用于动画和颜色简单的图像；
WebP：现代格式，具有更好的压缩比。
使用矢量图形使用SVG等矢量图形代替位图，可以在不失真的情况下无限放大。使用SVG编辑工具创建矢量图形；
将图标等简单图形替换为SVG格式。
使用图片映射将复杂的图像拆分为较小的片段，减少单个图片的大小。使用CSS的background-image和background-position属性实现。
图片懒加载延迟加载非视口内的图片，减少首次页面加载时间。使用第三方库（如lozad.js）实现；
使用Intersection Observer API实现。
使用CSS Sprites（雪碧图）将多个小图标合并成一个大图，减少HTTP请求次数。手动合并图标；
使用构建工具插件自动合并。
响应式图片根据不同设备的分辨率提供不同大小的图片，减少加载时间和带宽消耗。使用<picture>元素和srcset属性；
使用构建工具插件自动处理响应式图片。
移除图片元数据移除图片中的拍摄日期、相机型号等元数据，减小文件大小。使用图像编辑软件或在线工具移除元数据。
利用CDN加速将图片缓存到分布在全球各地的CDN节点，提高访问速度。选择合适的CDN服务提供商，配置域名和路径。
图片预加载提前加载用户可能需要的图片，提高用户体验。使用<link rel="preload">标签预加载图片。

Lighthouse 报告的“机会”部分列出了所有未优化的图像，并可能以千字节 (KiB) 为单位节省。优化这些图像，使页面加载速度更快并消耗更少的数据：

常见的图片格式及使用场景

图片格式比较

图片懒加载

图片懒加载，又称为延迟加载，是一种在单页面应用中广泛使用的技术。

其核心思想是在用户滚动页面到图片位置时才加载图片，而非在页面加载时一次性加载所有图片。

这种技术主要解决了两个问题：

实现原理

图片懒加载的实现主要依赖于对图片进入可视区域的判断：

  1. 在HTML中，图片通常通过<img>标签引入，并通过src属性指定图片资源。
  2. 在图片没有进入可视区时，不给src属性赋值，或者使用一个占位符图片（如loading.gif）
  3. 等图片进入可视区后，再动态地将真实的图片地址赋值给src属性，从而触发图片的加载。

图片懒加载的实现方式

图片懒加载有多种实现方式，以下是几种常见的方案：

  1. 设置img标签的loading="lazy"属性：
    • 这是HTML5引入的一种简单实现方式，通过设置<img src="..." loading="lazy">，浏览器会自动为这些图片应用懒加载策略。
    • 需要注意的是，该属性的兼容性因浏览器而异，一些旧版本的浏览器可能不支持。
  2. 使用JavaScript监测滚动事件：
    • 通过监听scroll事件，结合scrollTop（滚动条卷去的高度）、clientHeight（可视区高度）以及图片的offsetTop（元素相对于带有定位的父元素顶部的高度）等属性，可以判断图片是否进入了可视区。
    • 当图片进入可视区时，再动态地修改src属性为真实的图片地址。
  3. 使用getBoundingClientRect方法：
    • 该方法返回一个元素的大小及其相对于视口的位置。
    • 通过比较元素的top属性与视口的高度，可以判断元素是否进入了可视区。
  4. 使用IntersectionObserver API：
    • 这是一个现代浏览器提供的API，用于异步观察目标元素与其祖先元素或顶级文档视窗（viewport）交叉状态的变化。
    • 通过注册一个回调函数，当目标元素进入或离开视口时，浏览器会自动调用该函数，从而可以实现高效的懒加载。

图片懒加载的优势

  1. 提高页面加载速度：通过减少初始加载时加载的图片数量，可以显著缩短页面加载时间。
  2. 节省用户流量：对于移动网络用户来说，懒加载可以显著减少不必要的图片加载，从而节省流量。
  3. 提升用户体验：快速响应的页面和流畅的滚动体验可以提升用户的满意度和留存率。

字体图标代替图片图标

用视频替换动画 GIF

Lighthouse 报告的“机会”部分列出了所有动画 GIF，以及通过将这些 GIF 转换为视频所实现的估计节省的秒数：

Lighthouse 使用视频格式进行动画内容审核的截图

调整图片大小

Lighthouse 报告的“机会”部分列出了页面中尺寸不合适的所有图像，以及以千字节 (KiB)为单位的潜在节省。调整这些图像的大小以保存数据并缩短页面加载时间：

图像 CDN

响应式图片

图片压缩

使用基于矢量的图像格式

使用 WebP 图像

参考资料：

WebP 相对于 PNG、JPG 有什么优势？

JS 编码优化

减少 JavaScript 执行时间

避免过大的 DOM

大型 DOM 树可以通过多种方式降低页面性能：

Lighthouse 如何审查 DOM 大小

CSS 编码优化

压缩CSS

缩小 CSS 文件可以提高页面加载性能。CSS 文件通常比它们需要的要大。例如：

/* Header background should match brand colors. */
h1 {  background-color: #000000;}
h2 {  background-color: #000000;}

可以简化为：

h1, h2 { background-color: #000000; }

从浏览器的角度来看，这两个代码示例在功能上是等效的，但第二个示例使用的字节更少。Minifiers 可以通过删除空格进一步提高字节效率：

h1,h2{background-color:#000000;}

一些压缩器使用巧妙的技巧来最小化字节。例如，颜色值#000000可以进一步减少到#000，这是它的速记等价物。

Lighthouse 根据它在您的 CSS 中找到的注释和空白字符来估计潜在的节省。这是一个保守的估计。如前所述，缩小器可以执行巧妙的优化（例如减少#000000到#000）以进一步减小文件大小。因此，如果您使用压缩器，您可能会看到比 Lighthouse 报告的更多的节省。

其他编码优化

优化 JS 第三方库引入

参考资料

Reduce the impact of third-party code

Beacon 数据上报

参考资料

Fast load times

前端性能优化指南

前端性能优化 24 条建议

性能优化实践

参考资料

从页面加载到数据请求，前端页面性能优化实践分享

从实际项目入手，如何监测性能问题、如何解决

深入浅出 webpack-优化