Web 性能优化实用指南

2025-05-25

Web 性能优化实用指南

网络在不断发展，如今网络上有数百万个网站，许多用户因为这样或那样的原因等待加载这些网站。由于网络连接速度慢或不可预见的原因，您必须等待页面加载时间超过预期，没有什么比这更令人沮丧的了。根据这项研究，用户的注意力平均只能持续约八秒钟。因此，想象一下，如果您必须等待大约三分钟才能加载网站，这自然意味着，如果任何网站的性能糟糕，用户的采用率最终都会下降，而这并非我们想要实现的目标。Web
性能是指网页下载并显示在用户 Web 浏览器上所需的速度。

为什么性能如此重要？

在我看来，Web 性能是一个相当有趣的话题。我认为它是开发者应该更加关注的重点之一，因为归根结底，我们构建 Web 的目的是为了让所有用户都能访问它，而不受任何障碍或挑战的影响。如今，许多用户使用 2G、3G、4G 和 LTE 连接浏览互联网，我们仍然希望以相同的速度为他们提供 Web 服务。正因为如此，性能对于我们的用户来说至关重要。

  • 用户是我们的首要任务，也是我们构建网站的首要原因。如果没有用户访问，我相信一开始创建网站就没有任何意义。因此，我们以用户为中心，因此在开发的每个阶段都应该考虑到用户的需求，我们的首要目标应该是让用户能够便捷地使用我们构建的网站。
  • 逐步提高转化率。当我们构建完全针对速度和使用情况进行优化的网站时，我们将看到巨大的留存率，因为用户会继续使用您的网站，因为他们第一次访问时就获得了良好的体验。但如果您的网站性能未进行优化，情况就会相反。

那么，我们如何确保用户使用我们的网站时感到满意，并乐意再次使用，因为他们喜欢它并且性能出色呢？我将概述一些技巧和步骤，以便为所有用户打造更快速的网络体验。

提高 Web 性能的技巧

  1. 减少 HTTP 请求：在某些情况下，网站加载时间的很大一部分是由外部 HTTP 请求产生的。外部资源的加载速度可能因托管服务提供商的服务器基础架构或位置而异。这里的总体目标是确保减少外部 HTTP 请求，因此我们需要检查请求并消除任何对用户体验没有任何好处的资源，例如不必要的图片、不必要的 JavaScript 和 CSS 代码。

  2. 代码拆分和摇树优化：代码拆分和摇树优化是另一种用于提升性能的技术。如何正确地进行代码拆分或摇树优化？在开发过程中，可以使用 Webpack、Rollup 等包来实现。代码拆分功能允许您将代码拆分成不同的包或组件，然后这些包或组件可以按需加载或并行加载；而摇树优化则涉及消除未使用或死代码的概念。

  3. 延迟加载：延迟加载是一种 Web 性能模式，它会延迟浏览器中图片的加载，直到用户需要查看时才加载，这是一种优化性能的好方法。它可以确保您的网站不会臃肿，并且用户可以快速下载他们想要查看的图片。

  4. 延迟加载脚本：延迟加载脚本意味着阻止其加载，直到其他元素加载完毕。延迟加载较大的文件（例如 JavaScript）可以确保其余内容能够顺利加载，而不会因等待较大文件加载而造成延迟。其语法是在 script 标签中添加 defer 来实现的。

      <script defer></script>

  5. 优化图片：优化网页图片至关重要。根据 HTTP Archive 的数据，网站页面 61% 的权重来自图片。现在，我们不希望所有图片都占据所有空间，因为其他内容需要显示得太满。我们可以利用一些方法来进一步优化网页图片。

    • 使用 Cloudinary 之类的服务：Cloudinary是一个可以用来管理所有图片和视频的平台。它会帮您处理繁重的工作，让您无需担心网站上现有图片的大小。它捆绑了图像优化、图像处理、响应式图像和图像交付等开箱即用的功能。

  6. CDN 来帮您：使用内容分发网络 (CDN)，我们可以显著优化网站的页面加载时间。CDN 可用于存储通常直接加载到网页中的资源，例如图片和视频。使用CDN时，您可以将网站的静态内容链接到遍布全球的服务器网络。CDN 允许您网站的访问者从最近的服务器加载数据。使用 CDN 后，您网站的文件将自动压缩，以便在全球范围内快速分发。Cloudinary就是一个可以在这种情况下使用的 CDN 示例。

  7. 启用缓存：缓存是一种用于临时存储网页的技术，旨在减少带宽并提高性能。当用户访问您的网站时，如果页面已被缓存，则用户再次访问时，系统会向其提供相同的缓存页面，除非该页面自上次缓存以来发生了变化。这可以节省用户等待页面加载的时间，从而提高访问速度。当用户访问您的网站时，系统会向其提供缓存版本，除非该页面自上次缓存以来发生了变化。这可以节省服务器时间，并提高整体访问速度。

  8. 预取资源：预取功能可以在需要之前获取必要的资源和相关数据，从而改善用户的浏览体验并显著提升性能。预取主要有三种类型：

    • 链接预取：如果您确定用户会点击特定链接导航到某个页面，则可以应用此类预取。这种方法对于稳定的用户旅程操作非常有用，例如在添加一件或多件商品后跳转到购物车页面。
<link rel="prefetch" href="/img/cat.png">
Enter fullscreen mode Exit fullscreen mode
  • DNS 预取：此功能允许浏览器预先将域名解析为 IP 地址。这可以最大限度地减少延迟，因为当用户点击启用 DNS 预取的链接时，他们无需等待 DNS 查询完成（因为 DNS 查询已经完成）。
<link rel="dns-prefetch" href="https://www.keycdn.com">
Enter fullscreen mode Exit fullscreen mode
  • 预渲染：这种方法意味着提前渲染整个页面或其中的一些元素。
<link rel="prerender" href="/second-page.html">
Enter fullscreen mode Exit fullscreen mode

网页测速工具

我们必须知道如何测量网站速度，并在对当前页面速度不满意时进行改进。我们可以利用一些专门的速度测试工具来做到这一点。其中包括：

结论

Web 性能优化可以显著提升网页的用户体验，而且随着应用程序规模越来越大、越来越复杂，Web 性能优化对 Web 开发的重要性也日益凸显。作为开发者，我们应该始终牢记，我们构建网站是为了用户，因此在构建网站时，我们应该确保优先考虑用户及其需求。

最初发表在我的博客giftegwuenu.dev上

文章来源：https://dev.to/lauragift21/a-practical-guide-to-optimizing-performance-on-the-web-nlf
Devto 翻译
PREV
打造杀手级个人品牌
NEXT
我是如何在 225 天内从新手变成梦想角色的......