如您所见，有很多因素会影响加载网站上每个页面所需的时间。但是，您可以通过多种方式提高网站的性能。这里是其中的一些：

1. 减少 HTTP 请求的数量

Web 浏览器使用 HTTP 请求从 Web 服务器获取页面的不同部分，例如图像、样式表和脚本。每个请求，尤其是使用 HTTP/1.1 的请求，在浏览器和远程 Web 服务器之间建立连接时都会有一些开销。

此外，浏览器通常对并行网络请求的数量有限制，因此如果您有很多请求排队，如果队列太长，其中一些请求将被阻止。

您的头一步应该是消除根本不必要的请求。您的网站所需的比较短渲染时间是多少？找出答案，并仅加载必要的外部资源。

您应该删除任何不必要的图像、JavaScript 文件、样式表、字体等。如果您使用的是 WordPress 等 CMS，则应删除任何不必要的插件，因为它们通常会在每个页面上加载其他文件。

现在您已经修剪了所有可以修剪的内容，下一步是优化其余部分。您应该考虑压缩 CSS 和 JavaScript 文件。优化的网站通常会在每个请求中加载所有必需的 CSS 和 JavasScript。

Sematext Experience 可以帮助您监控和识别真实用户加载缓慢的 HTTP 请求和资源。

2. 切换到 HTTP/2

我在上面提到了通过 HTTP/1.1 发送许多请求的开销。HTTP 是浏览器用于与远程 Web 服务器通信的协议。您网站的 HTML 以及所有其他资源（例如图像、样式表和 JavaScript 文件）都使用此协议进行传输。

解决这个问题的一种方法是减少请求数量。无论如何，这都是一个很好的方法。渲染网站所需的资源越少，页面加载时间就越快，但还有另一种方法可以避免这种开销。

您可以将您的网站切换到 HTTP/2。有关如何执行此作的详细信息将取决于您使用的托管服务提供商。

与 HTTP/2.1 相比，HTTP/1 具有多项优势。其中包括通过同一连接同时发送多个文件的能力。这避免了多个请求的开销。

3. 优化图像尺寸

许多网站大量使用图形。如果您的图像没有压缩，或者您使用的分辨率太高，它会降低您网站的性能。

例如，网站有时会使用 2 倍甚至 3 倍分辨率的图像，以便它们在视网膜屏幕等高密度显示器上显示良好。但是，如果您的用户不使用 HiDP 显示器，那么您只会浪费带宽并增加访问者的加载时间，尤其是当他们使用较慢的移动数据连接时。

您可以阅读此 MDN 指南以正确使用响应式图像。指定多个图像大小将允许浏览器根据屏幕分辨率选择合适的图像。

当您确定在所有设备类型上加载正确的分辨率时，就该优化图像的大小了。Shopify 有一个关于如何做到这一点的很好的指南。

确保您也使用正确的文件类型！对具有多种颜色的图像（例如照片）使用 JPEG，对更简单的图形使用 PNG。

4. 使用内容分发网络 （CDN）

提供静态文件可能会变得棘手。由于这不是 99% 网站的主要业务，因此将这部分基础设施外包给其他人是明智之举。幸运的是，有一些专门为此设计的服务：内容分发网络或 CDN。

CDN 将优化向访问者交付静态文件（例如 CSS、图像、字体和 JavaScript）。设置它们通常非常简单。

CDN 使用地理上分布的服务器。这意味着离访问者比较近的服务器将提供文件。因此，无论用户在哪里连接，例如图像的加载时间都将相同。通常，从您自己的服务器提供静态文件时，当用户物理上远离服务器时，加载时间会增加。

您可以使用 Sematext Experience 来监控 CDN 上托管的文件的性能，以便您可以实际衡量外包这部分基础设施是否有意义。当我们一次开始使用 CDN 为 Sematext Cloud 提供资产时，我们实际上使用了 Sematext Experience，这表明我们确实更快地为用户提供内容。

5. 编写移动优先代码

移动设备正在吞噬世界。至少我被告知。您应该检查您的用户正在使用 RUM 解决方案（例如 Sematext Experience）甚至您选择的网站分析工具（例如 Google Analytics），以防万一。

通常，开发人员在自己的桌面设备上编写和测试网站，然后才针对移动设备优化网站。这通常是一个痛苦的过程，具体取决于编写网站时所做的选择。

但是，如果在测试网站时我们使用移动设备（或模拟器）呢？这样我们就会首先为移动设备编写。默认情况下，该体验将针对移动设备进行优化。

然后为桌面设备调整网站将是一个更简单的过程。我们可以逐步增强具有更大功率和屏幕空间的设备的体验。请记住还要限制网络和 CPU，以更好地模拟移动用户的体验。

6. 更小化头一个字节的时间

头一个字节的时间 （TTFB） 是浏览器从服务器接收头一个字节数据所需的时间。因此，这是一个服务器端问题，但它对您网站的整体性能起着重要作用，因此您应该花一些时间来改进它。

在 TTFB 方面，您可以控制的主要因素是服务器处理时间。因此，您可以尝试 Google 推荐的一些技巧来改进 TTFB：

优化服务器的应用程序逻辑以更快地准备页面。如果您使用服务器框架，则该框架可能会提供有关如何执行此作的建议。

优化服务器查询数据库的方式，或迁移到更快的数据库系统。

升级您的服务器硬件以拥有更多内存或 CPU

低于 200 毫秒的 TTFB 被认为是很好的。200 毫秒到 500 毫秒的范围被认为是正常且正常的。需要调查持续高于 600 毫秒的 TTFB。Sematext Experience 可以帮助您实现这一目标，同时监控其他 Web Vitals 指标。

7. 选择合适的托管服务计划

这与上一点关于更小化头一个字节的时间有关。如果您使用的是共享网络托管服务提供商，那么整体性能很可能会低于标准。您应该考虑升级托管服务计划，或者如果您使用的是 WordPress，请考虑使用以稳定和高性能托管而闻名的托管服务。

您有三个主要托管选项（加上一个奖励选项）：

共享 – 传统上，便宜的托管选项是一种与其他客户共享服务器资源的方式。

VPS – 虚拟专用服务器比共享主机快得多，但它不是只使用一台机器，而是使用多台机器。

专用 – 专用服务器显然是三者中昂贵的，有了这个，您基本上可以租用一整台机器，通常可以根据您的疯狂的愿望进行配置。

无服务器 – 最近，无服务器在服务器空间中站稳了脚跟，因为它以极低的成本提供了无与伦比的可扩展性。

当然，与往常一样，您应该在进行转换之前先衡量您的表现。

8. 实现 Gzip 压缩

您应该在 HTTP 服务器上启用 gzip 压缩。Gzip 压缩可更大限度地减少某些文件类型的 HTTP 响应大小。它通常仅用于文本响应。这应该会减少加载时间并节省带宽。

9. 缩小和组合 CSS、JavaScript 和 HTML 文件

我已经提到过，您应该尝试在每个请求中加载 JS 和 CSS。这是通过将单独的 JS 和 CSS 文件缩小并组合成单个捆绑包来实现的。

浏览器对并行网络请求有限制，因此如果您的网站总共需要 3 个请求才能加载，它很可能比必须加载 30 个不同资源更快。开发人员可以使用 webpack 等工具，在开发网站时方便地使用多个文件，并在部署到生产环境时获得单个捆绑包的性能优势。但一般来说，合并文件的意思是，所有文件都按原样复制到一个文件中。

缩小是通过删除或缩短源代码中的符号来优化 JavaScript 和 CSS 文件大小的过程。输出在功能上是等效的，但不完全是人类可读的。不过，浏览器读取它没有问题，而且较小的文件大小加载速度会更快。

大多数优化的网站最终所做的是首先缩小 JavaScript 和 CSS 文件，然后将它们组合成单个捆绑包。

10. 异步加载 JavaScript

当浏览器达到 <脚本>标记，它将等待文件加载后再继续渲染网站。这称为同步加载。

如果您在 <脚本>标记，则浏览器将异步加载脚本。加载脚本时，它将继续解析页面。

我们还建议将脚本标签移动到页面底部，靠近结束标记。这样，不支持 async 属性的旧浏览器将在解析页面的其余部分后加载脚本。

11. 考虑使用预取、预连接和预渲染技术

您可以使用不同的预取和预加载技术来提示浏览器，在浏览器实际需要这些资源之前，需要哪些资源来呈现页面。

请考虑以下性能优化技术：

DNS 预取。您可以告诉浏览器，某些域名需要解析为 IP 地址，然后浏览器才能实际看到来自该域名的资源。这似乎是一个小的优化，但当您用尽其他技术时，它可能会有所不同。

<link rel="dns-prefetch" href="//sematext.com">

TCP 预连接。与 DNS 预取方法非常相似，预连接将解析 DNS，但它也会进行 TCP 握手，以及可选的 TLS 握手。

<link rel="preconnect" href="https://www.sematext.com">

预取。如果我们确定将来需要特定资源，那么我们可以要求浏览器请求该项目并将其存储在缓存中以供以后参考。

<link rel="prefetch" href="logo.png">

预渲染。当您真正知道用户将采取的下一步是转到某个页面时，这应该保留。您可以通过指定如下URL来指示浏览器预渲染整个页面，并下载所有必需的资产：

<link rel="prerender" href="https://www.sematext.com/next-page">

12.减少插件数量

插件是可重用的功能，通常用于 WordPress 或其他预建网站平台等内容管理系统。插件为网站所有者提供了额外的功能，例如分析或在博客文章上发表评论的能力。

但插件是有代价的。每个插件几乎肯定会加载额外的 CSS 和 JavaScript 文件。一些插件也会增加 TTFB 时间，因为它们需要在服务器上对每个页面请求进行额外处理。

因此，我建议您浏览您的插件列表并确保您确实需要每个插件。您应该删除任何对您的网站不重要的插件。

13.使用网站缓存

我已经简要提到了缓存，但我想解释一下它是什么。缓存是将文件版本保存在可以更快访问的临时存储位置（缓存）中的过程。启用浏览器缓存有很多优点，因为它可以减少带宽消耗、增加加载时间、减少延迟和服务器的工作负载。主要缺点是基本上在任何给定时间您的网站都会至少有两个版本。如果您正在运行依赖于准确数据的实时服务，这可能会导致问题，但即使这样也可以在某种程度上解决，从而在导入新数据时强制清除缓存的子部分。

14. 采用基于云的网站监控

提高网站性能的头一步是衡量它。衡量性能需要特定的工具，如果您希望在更改正在提高性能或性能随时间下降时收到警报，则必须持续监控。

网站监控有两种方法：综合监控和真实用户监控。如果您不确定它们的工作原理以及哪一种适合您的用例，请查看我们关于真实用户监控与综合监控的博客文章，其中我们比较了两种类型的监控。

无论哪种情况，我们都建议使用基于云的网站监控工具，这样您就可以专注于发展业务，而不是构建或管理自己的工具。Sematext Cloud 提供综合监控和真实用户监控的解决方案。免费试用 14 天！

总结：

提高网站性能可能具有挑战性，尤其是在设备、连接、浏览器和作系统方面存在巨大差异的情况下，但如果您的企业依赖您的网站作为接触客户的主要渠道之一，这将对您的业务产生重大的积极影响。

另外，请记住，这是一个没有明确定义的起点和终点的过程。您不必立即实施所有建议的更改。花一些时间查看监控工具的结果，在网站上进行更改，然后比较更改前后的性能。

如果您正在市场上寻找一种工具来帮助您提高网站性能，请务必查看 Sematext Cloud 及其网站监控工具。Sematext 确保对应用程序所有组件的端到端可见性，以帮助您保持网站的性能和可用性。有 14 天的免费试用期供您试用其所有功能。试一试！