[译] 2024 年的前端性能 Checklist

丨隋堤倦客丨
356 阅读14分钟

原文链接 crystallize.com/learn/best-…

作者 crystallize.com/

前端性能检查表

在当今这个追求速度的世界里，更好的性能带来了显著的商业收益。这个前端性能检查表是我们在 Crystallize 创建超级快速的 web 应用程序时发现的重要事项的累积列表。

目录

  • 测量性能
  • 前端性能检查表 2024
  • HTML
  • CSS
  • JavaScript
  • 图像处理
  • 视频
  • 字体
  • 托管 / 服务器
  • 现在，去追逐毫秒吧

八秒钟（来源链接）。这是当今的平均注意力持续时间，这也是你引起兴趣的时间。从这个统计数据来看，很明显为什么网站性能很重要，对吗？

70%的消费者承认页面加载速度会影响他们的购买意愿。（来源链接）

性能提升带来了更好的点击率（CTR）。它在留住用户并确保浏览你的网站时提供愉快的用户体验方面起着至关重要的作用（影响客户忠诚度）。它还影响你的搜索引擎排名（SEO）和 AdWords 定价。实际上，网站性能影响：

  • 网站停留时间
  • 页面浏览量
  • 跳出率
  • 转换率 / 收入
  • 用户满意度和保留率
  • 自然搜索流量
  • 带宽/CDN 节省
  • 广告质量得分（通过登录页面性能）

考虑到所有这些好处，拥有一个高性能的网站是值得的，对吧？

那么，如何做到这一点呢？

测量性能

在深入检查表之前，让我们先测量一下你的网站性能。结果将帮助你辨别需要解决的主要问题，以提高你的性能评分。

有许多工具可以帮助你做到这一点。以下是一些可以用来测试你的网站性能的工具列表。

如果你想深入了解，请查看我们广泛讨论前端性能测量和关键绩效指标的文章。

现在让我们进入检查表！

前端性能检查表 2024

所以，我们了解了为什么性能很重要以及如何测量它。那么，谁对它负责呢？好吧，开发团队的每个人。

首先要依赖一个能够支持你所有需求的电子商务平台，即产品数量、订单数量、多语言、多店铺位置等，以及它在信息架构方面提供的灵活性。然后，UX 设计师的任务是将丰富的内容和故事与产品信息结合起来，设计引人入胜的客户旅程。最后，前端开发人员的任务是使其正常运行。

面前的检查表是你作为前端开发人员在项目工作中应该检查或至少要意识到的一系列元素。它是平台无关的，即你可以将这些建议用于你的 Crystallize 构建和 WordPress 或 Shopify 等网站。

实际上，你可能不需要执行所有建议，因为它们取决于手头的项目。考虑到这一点，检查表旨在成为许多人构建项目检查表的起点。

好了，性能优先的心态准备好了。让我们开始检查表。

个体指标。

这个检查表关注整体性能。如果您需要改进单个核心 Web 体验指标和其他重要指标，请查看我们的个体指标页面。是的，其中包括改进您的 Interaction to Next Paint (INP) 分数的建议。

HTML

HTML 构建你的网站结构。如果不正确优化 HTML，会导致页面加载时间增加，导致糟糕的用户体验。有各种方法可以优化你网站的 HTML。

  • 最大化感知和实际性能：HTML 必须优先加载，按页面显示顺序排列以实现最佳效率。
  • 清理冗余代码：包括额外的空白和注释。这将减少文件大小，从而减少加载时间。
  • 启用压缩：压缩通过替换重复的代码来缩小文件大小。确保在你的网站上启用 GZIP 或 Brotli 压缩，以提高页面速度并显著减少带宽使用。
  • 按正确顺序加载外部文件：如果必须在 <head> 标签中加载 JavaScript 文件，请将其放在 CSS 文件之后。否则，较好的方法是将 JavaScript 文件加载到 <body> 标签的底部。这将显著减少加载时间。
  • 避免使用 iFrames：加载内容到 <iframe> 中会显著影响性能，因此要谨慎使用。

CSS

大多数时候，CSS 在性能增强优先级列表中并不靠前。然而，它确实有影响，最好优化它以免对网站性能产生负面影响。

  • 移除不必要的样式：当你更改 CSS 时，记得检查和清理未使用的 CSS 规则。

  • 将 CSS 拆分成模块：模块化 CSS 结构可以延迟加载非必要样式，最小化初始渲染阻塞，加快页面加载时间。将 CSS 拆分成独立文件，只加载所需的部分。

  • 避免使用 @import：@import 规则是渲染阻塞的，这意味着每个以这种方式导入的文件都需要按顺序加载，导致加载时间增加。

  • 使用关键 CSS：关键 CSS 是指应用于用户首次访问网站时立即可见的元素的 CSS。将关键 CSS 内联到 <head> 标签中，然后异步加载其余样式以避免渲染阻塞。可以使用 critical 等库生成关键 CSS。

  • 优化和压缩 CSS 文件：以减少整体文件大小。可以使用 clean-css 等工具实现这一点。

  • 使用预加载：rel="preload" 提示浏览器比平时更早地获取资源，从而加快渲染速度。使用它，浏览器会获取资源并将其保存在缓存中。

  • 简化选择器：不要编写复杂的选择器，因为它们会增加文件大小和选择器的解析时间。比如：

    复杂选择器:

    body div#main-content article.post h1.headline {font-size: 18px;}

    简化选择器:

    .headline {font-size: 18px;}

JavaScript

随着新 JavaScript 框架的不断推出，我们可以说它是开发网站时最常用的语言之一。因此，它也是影响性能的一个主要因素，应该适当优化以提供流畅的用户体验。

  • 避免过度使用框架和第三方库：这会增加开销和页面大小。考虑使用内置的浏览器功能。
  • 预加载 JS：使用 rel="preload" 为关键 JavaScript 创建预加载器。
  • 使用 async 和 defer 加载外部 JavaScript 资源：这显著减少了初始下载大小，让浏览器知道该文件不需要立即下载，而可以在后台异步下载。
  • 压缩你的 JS 文件：压缩代码是提高性能的方法之一，通过减少 web 应用程序的加载时间。有各种工具可用来帮助压缩文件，包括 UglifyJs 和 Minify。
  • 确保移除未使用的代码：这样可以减少总体文件大小。
  • 对复杂应用程序使用代码分割：这可以防止浏览器在初始加载时下载大量文件，因为代码现在分成了更小的文件。
  • 查看我们关于理解和管理第三方脚本对网站性能影响的文章。

图像处理

谁不喜欢在网页上使用漂亮的高分辨率图像呢？问题在于这些图像如果没有得到正确优化，会导致页面速度变慢和性能得分不佳。让我们看看如何在不影响性能的情况下拥有这些美丽的图像。

  • 正确尺寸的图像：快速审计可以告诉你页面上哪些图像需要调整大小。所有图像的潜在节省量是显著的。可以使用 ImageMagick 等工具实现这一点。
  • 使用响应式图像：使用 srcSet、sizes 和 <picture> 元素，以避免为较小屏幕加载大图像。我们的工程主管 Håkon 有一篇详细的博客文章，讲解了在 React 中如何最好地使用 srcset。
  • 优化图像：运行网页审计，你会看到哪些图像可以进一步优化，以及潜在的节省量。确保正确优化列出的所有图片，以加快网页速度。可以使用 ImageOptim、mozJPEG（用于 JPEG 压缩）、SVGO（用于 SVG 压缩）、TinyPNG（用于 PNG）等工具。
  • 预加载显示在网站英雄部分的图像：这将有助于改善最大的内容绘制（LCP）时间。一个好的做法是使用 CSS 中的 background-image 定义背景图像。
  • 延迟加载折叠以下的图像：以减少初始加载时间和带宽。浏览器级别对延迟加载图像的支持已实现。 
    <img loading="lazy" src="image.jpg" alt="..." />
  • 使用下一代格式：一代图像格式，如 WebP 和 AVIF，比 JPEG 或 PNG 等格式具有更好的压缩效果。这意味着使用下一代格式的图像将使您的网页加载更快并消耗更少的数据。大多数主流浏览器都完全支持 WebP，Safari 最新版本部分支持它，而 AVIF 目前在 Chrome、Firefox 和 Opera 中支持。

确保在图像上设置宽度和高度属性。这有助于浏览器在页面加载时了解图像所需的空间。如果未指定这些属性，将导致布局移位，从而对性能评分产生负面影响。

Frontend Performance Checklist

Crystallize 中的图像和视频

对于许多无头电子商务平台来说，图像和视频优化是一个事后的考虑。在讨论图像和视频优化时，我们必须提到我们提供的一些很酷的功能。 在 Crystallize 中，我们的图像组件和视频组件是专为开发人员（作为最终用户）设计的。图像会自动进行压缩/转换为现代格式；视频会转码为不同的大小和比特率，使你可以选择你将使用的图像/视频。很酷，对吧？

视频

在网页上显示视频是保持用户参与的好方法。然而，与图像一样，您还必须优化网页上的视频。

  • 使用压缩工具如 Handbrake 减小文件大小。这样的工具可以在不影响质量的情况下减小文件大小。
  • 视频预加载。preload 属性有三个可用选项：auto | metadata | none，控制页面加载时视频文件的下载量。
  • 如果视频位于屏幕下方，则延迟加载视频。这样可以减少初始加载时间和带宽，因为视频只有在需要时才会加载。
  • 将视频转换为 HTML5 视频格式，如 WebM 或 MP4。转换为 HTML5 友好格式意味着不需要额外的插件来渲染视频，并且可以通过任何 HTML5 视频播放器快速传送视频。
  • 去除音频。如果页面上有静音视频，则可以使用 FFmpeg 去除音频以减小文件大小。

字体

字体是任何 Web 应用程序的重要组成部分，因此不容忽视。

  • 限制字体数量。 太多的字体会显著减慢页面加载速度。
  • 将字体转换为 WOFF2。 确保将 Web 应用程序中使用的字体转换为 WOFF2 格式。它使用压缩算法以比其他格式（如 TTF）更少约 30% 的文件大小传递。
  • 使用预连接资源提示快速加载字体。 rel="preconnect" 让浏览器知道链接希望尽快连接到另一个来源。这意味着浏览器不会等到达到字体文件才建立连接。
  • 避免在加载字体时出现布局变化。 查看 Daniel Salvado 的关于快速网页字体和网页安全字体的文章，以了解如何更详细地做到这一点。

托管 / 服务器

几乎任何服务器都可以托管您的网站，但不是所有服务器都能提供性能并满足现代 Web 开发的需求和期望。无论您选择什么解决方案，都要确保以下设置正确：

  • 使用 HTTPS。 每个现代浏览器都会将没有有效 SSL 证书的网站标记为“不安全”，并限制这类应用程序的功能。此外，Google 也将 HTTPS 作为排名信号。
  • 减少 HTTP 请求总数。 浏览器请求网页所需的不同资源，包括样式表和脚本。您请求的文件越多，开销就越大（特别是如果仍在使用 HTTP/1.1）。为了避免这种情况，始终确保您获取的资源是必要的。
  • 切换到 HTTP/2。 如前所述，以前的版本 HTTP/1.1 在浏览器和服务器之间建立连接时存在开销；HTTP/2 消除了这一点。它允许同时发送多个文件，而不是进行各种 TCP 请求，其中包括其他优势。
  • 使用 CDN（内容分发网络）。 大多数网站向全球用户提供内容。当用户距离服务器较远时，会导致较长的加载时间。CDN 解决了这个问题，其地理分布式服务器。使用 CDN，距离用户最近的服务器提供文件，大大减少了加载时间。您可以比较各种可用的 CDN，选择最适合您的选项。
  • 启用缓存。 通过告诉浏览器缓存您的内容并停止下载页面的部分已经下载的部分，您将有效地减少服务器的负担，即服务器将花费更少的时间执行代码、检索数据库、获取文件等，这将影响页面加载时间。
  • 服务器处理时间。 要注意它。优化服务器处理时间意味着优化数据库查询、改进服务器端代码、使用缓存策略以及使用负载平衡将请求分配给多个服务器。

快速性能优化。

您还可以监控其他几个方面以确保您的网站表现更好。

  • 布局移位。累积布局移位（CLS）是三项核心 Web 体验指标之一。Web 体验指标是用户体验质量的度量标准。CLS 衡量页面加载新内容时的移动，这些内容可能是图像、iFrame 等。作为用户，布局移位总是很烦人的，应该尽量避免。为了减少这些布局移位，为您的内容指定尺寸是很重要的，无论是图像还是 iFrame。
  • 优先级提示。正确使用优先级提示将有助于优化所需资源的加载，因为这将优先获取最重要的资源，以获得更好和更快的用户体验。
  • HTTP 请求。需要避免的一件事是在您的网页上加载大量脚本和资源，因为每个都将使用自己的 HTTP 请求获取，从而减慢页面加载速度。解决这个问题的方法是要么推迟加载这些资源，要么将脚本放在文档底部。
  • 从不同协议提供文件。避免从不同协议提供文件。假设您的网站使用 HTTPS；所有外部资源也应该来自 HTTPS，而不是 HTTP。
  • 缓存头。确保您正确设置缓存头。这可以节省您的 Web 应用程序宝贵的时间，不必在浏览器和服务器之间来回传输。

现在，开始抓取毫秒吧。

我希望这像上面标题中建议的那样简单。性能只是在线业务成功拼图的一部分。CRO 策略、SEO、社交媒体和（一般来说）市场营销共同构成了整体。

但一切都始于您的产品/服务。其他的只是为了帮助您达到并满足受众及其期望而存在。

avatar
文章
阅读
粉丝