前端 Web 性能检查表

2025-06-07

前端 Web 性能检查表

提升 Web 应用的性能永远是一件令人着迷的事情。我们希望页面加载速度更快、更流畅，并且布局不会发生太多变化（核心 Web 指标，我正关注着你呢😉）。在本文中，我想将所有这些知识汇总到一个单一的数据源（就文章作者而言）。

本摘要文档基于以下文章：

以及我多年来积累的知识。

请务必访问这些文章，并向所有文章及其作者点赞😊

预加载密钥请求/预连接到所需来源

在 HTML 中声明预加载链接，以指示浏览器尽快下载关键资源。



<head>
  <link rel="preload" href="critical.css" as="style">
  <link rel="preload" href="critical.js" as="script">
</head>
Enter fullscreen mode Exit fullscreen mode

考虑添加预连接或 dns-prefetch 资源提示以与重要的第三方来源建立早期连接。



<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">.
Enter fullscreen mode Exit fullscreen mode

dns-prefetch 的工作方式与 preconnect 完全相同，但具有更广泛的浏览器支持。

减少第三方使用

第三方代码可能会显著影响加载性能。不过，您可以通过以下方式修改使用此第三方库的方式：

  • 使用异步或延迟属性加载脚本以避免阻塞文档解析。
  • 如果第三方服务器速度较慢，则自行托管脚本。
  • 如果脚本不能给您的网站带来明显的价值，则将其删除。
  • 使用 link rel=preconnect 或 link rel=dns-prefetch 对托管第三方脚本的域执行 DNS 查找。

消除渲染阻塞资源

资源阻碍了页面的首次渲染。请考虑以内联方式交付关键的 JS/CSS，并推迟所有非关键的 JS/样式。您可以通过仅交付所需的代码和样式来减小页面大小。

一旦确定了关键代码，请将该代码从阻止呈现的 URL 移动到 HTML 页面中的内联脚本标记。

在 HTML 页面头部的样式块内内联首次绘制所需的关键样式，并使用预加载链接异步加载其余样式。

您可以在此处阅读更多相关信息

缩小/删除不必要的 CSS 和 JS

当您构建大型应用程序时，您会发现您的项目可能拥有比它实际需要和使用的更多的代码。

使用CSS Minification或Terser JS Plugin等工具。

要消除未使用的 CSS，请使用PurgeCSS之类的工具。

为了消除不必要的 JavaScript，您可以使用前面提到的 Terser 或使用Tree Shaking来消除死代码。您还可以使用代码拆分 (Code Splitting)，它将代码拆分成可按需加载的 bundle。

扫描模块是否存在重复项

从捆绑包中删除大型、重复的 JavaScript 模块，以减少最终捆绑包的大小。

图像

使用Webpack Bundle Analyzer

减少执行时间

代码拆分、最小化和压缩、删除未使用的代码和缓存技术的结合将大大提高执行时间。

考虑减少解析、编译和执行 JS 的时间。你可能会发现，提供更小的 JS 负载会有所帮助。我们的
目标是同时优化 JS 和 CSS 代码，最小化代码量，并删除未使用的代码以及我们正在使用的第三方库。

保持主文档的服务器响应时间较短，因为所有其他请求都依赖于它。

您可以在此处阅读更多相关信息

图像处理

适当大小的图像

提供适当大小的图像以节省蜂窝数据并缩短加载时间。



<img src="cat-large.jpg" srcset="cat-small.jpg 480w, cat-large.jpg 1080w" sizes="50vw">
Enter fullscreen mode Exit fullscreen mode

您可以在此处阅读更多相关信息

高效编码图像

优化后的图片加载速度更快，消耗的蜂窝数据更少。
使用图片 CDN 服务或压缩图片即可。

您可以在此处阅读更多相关信息

您还可以在这里阅读我之前发布的一篇文章

以下一代格式提供图像

WebP 或 Avif 等图像格式通常比 PNG 或 JPEG 提供更好的压缩效果，这意味着更快的下载速度和更少的数据消耗。

您可以在此处阅读更多相关信息

图像元素具有明确的宽度和高度

在图像元素上设置明确的宽度和高度，以减少布局偏移并改善 CLS。

您可以在此处阅读更多相关信息

预加载最大内容绘制 (LCP)

预加载 LCP 元素使用的图像以改善您的 LCP 时间。



<link rel="preload" href="/path/to/image.jpg" as="image">
Enter fullscreen mode Exit fullscreen mode 


head() {
 return {
    link: [
      {
        rel: 'preload',
        as: 'image',
        href: 'path/to/lcp/image',
      },
    ],
  }
}
Enter fullscreen mode Exit fullscreen mode

您可以在此处阅读更多相关信息

字体

在网页字体加载期间，所有文本仍然可见

利用字体显示 CSS 功能确保在加载 Web 字体时文本对用户可见。



@font-face {
  font-family: 'Arial';
  font-display: swap;
}
Enter fullscreen mode Exit fullscreen mode

font-display API 指定字体的显示方式。swap 会告知浏览器使用该字体的文本应立即使用系统字体显示。自定义字体准备就绪后，它将替换系统字体。

例如，对于 Google 字体，只需将 &display=swap 参数添加到 Google 字体 URL 末尾即可：



<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&**display=swap**" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

您可以在此处阅读更多相关信息

应该避免什么？

布局大幅转变

累积布局偏移 (CLS) 是一种核心网络生命力指标，通过对所有非由用户交互引起的布局偏移进行求和来计算。

避免 DOM 尺寸过大

较大的 DOM 会增加内存使用量，导致更长的样式计算，并产生昂贵的布局重排。

多页面重定向

重定向会导致页面加载之前出现额外的延迟。

为现代浏览器提供旧版 JavaScript

Polyfill 和转换功能使旧版浏览器能够使用新的 JavaScript 功能。然而，许多功能对于现代浏览器来说并非必需。

巨大的网络有效载荷

较大的网络负载会花费用户真金白银，并且与较长的加载时间高度相关。

  • 推迟请求，直到需要时再处理。
  • 优化请求，使其尽可能小，最小化并压缩，尽可能使用 WebP 格式的图片。图片 CDN 将始终存在，以保持我们的性能！
  • 缓存请求，以便页面在重复访问时不会重新下载资源。

文档.写入()

对于连接速度较慢的用户，通过 document.write() 动态注入的外部脚本可能会使页面加载延迟几十秒。

非合成动画

未合成的动画可能会很重，并增加 CLS。请使用translate和scaleCSS 属性。

概括

现在，您已经对提升网站性能有了更多的了解。请记住，提升性能并非一时兴起就能解决的问题。这是一个持续的过程，应该定期关注性能问题，以确保网站的新功能（当然是必要的）不会影响性能。

文章来源：https://dev.to/jacobandrewsky/frontend-web-performance-checklist-2o9j
Devto 翻译
PREV
利用 Nuxt.js 中的缓存 利用 Nuxt.js 中的缓存
NEXT
探索异步 PHP