八种快速提升Web应用性能的办法

web应用打开速度决定了用户对企业的第一印象。 更高的性能会帮助企业带来高回访率， 转化率，参与度等各方面的好处。 通过减少网页加载时间，能提升企业形象和用户更好的使用体验。

本文将教会你如何提升网站性能的一些方法。

网站打开速度的影响因素？

事实上导致网站加载速度缓慢的因素有很多。但最常见的因素，有以下几个：

• 大量使用 CSS 和 JavaScript
• 图片素材体积过大
• 不使用浏览器缓存
• 太多的三方插件
• 访问量过大
• 较旧的浏览器
• 网络连接速度慢（移动设备）

有了这些常见因素，我们可以做一系列优化措施来提高网站的加载性能。 但在做措施之前我们需要知道如何评估网站加载性能，并拿到初始评估数据。

如何评估网站性能？

作为web 开发者，您可以衡量许多指标，但我建议重点关注最大内容绘制（LCP）、首次输入延迟（FID）和累积布局偏移（CLS）。

这三个指标被 Google 定义为 Core Web Vitals。

同时 Google 对着三个指标的数据做了一个推荐的 好坏建议。

	Good	Poor
LCP	≤2500ms	>4000ms
FIP	≤100ms	>300ms
CLS	≤0.1	>0.25

我们可以通过 Chrome 开发者工具里的 lightHouse 扩展。来获得网站的性能数据。

网页性能优化的一些最佳时间

正如您所看到的，有很多因素会影响网站上每个页面的加载时间。但提高网站性能的方法也有很多。

这里就提供一些优化的最佳实践来帮助你提高你的网站性能。

1. 减少 Http 的请求数量

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

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

您要优化的第一步应该是消除不必要的请求。您的网站所需的最短渲染时间是多少？找出这一点，然后仅加载必要的外部资源。

您应该删除任何不必要的图像、JavaScript 文件、样式表、字体等。

当您做完，网站不必要素材资源加载之后。下一步要优化的事情，应该是压缩你的css 和 js 文件，以达到减小http 请求的目的。

2. 切换到 HTTP/2

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

解决此问题的一种方法是减少请求数量。这当然一个好方法。更少，体积更小的素材资源加载一定会带来网页性能的提升，但还有一种方法可以避免这种开销。

那就是切换到 Http2， 关于如何开启Http2 可以咨询您的运营商，或者运维同事。

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

3. 压缩图片尺寸

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

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

您可以通过， 指定 IMG 标签的 srcset 和 szie 属性来告知现代浏览器根据分辨率来加载不同大小的图片素材。

关于这两个属性的具体使用方式可以查询 MDN 官方文档。 https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

当您确定在所有设备类型上加载正确的分辨率时，就该优化图像的大小了。

4. 使用 CDN 网络

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

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

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

5. 减小 首字节加载时间

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

Google 推荐的一些改进 TTFB 的技巧：

• 优化服务器的应用程序逻辑以更快地准备页面。如果您使用服务器框架，该框架可能会提供有关如何执行此操作的建议。
• 优化服务器查询数据库的方式，或迁移到更快的数据库系统。
• 升级您的服务器硬件以拥有更多内存或 CPU

低于 200 毫秒的 TTFB 被认为是很好的。 200ms 到 500ms 的范围被认为是正常的。需要调查 TTFB 始终高于 600 毫秒。

6. 开启gzip , br 压缩技术

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

7. 异步加载 JavaScript

当浏览器到达从远程源加载 JavaScript 的 <script> 标记时，它将等待文件加载，然后再继续渲染网站。这就是所谓的同步加载。

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

我们还建议将脚本标签移至页面底部，靠近结束 </body> 标签。这样，不支持异步属性的旧浏览器将在解析页面的其余部分后加载脚本.

8. 使用网站缓存

缓存是将文件版本保存在临时存储位置（缓存）中的过程，以便可以更快地访问。

启用浏览器缓存有很多优点，因为它可以减少带宽消耗、增加加载时间、减少延迟和服务器的工作负载。

主要缺点是基本上在任何给定时间您的网站都会至少有两个版本。

如果您正在运行依赖于准确数据的实时服务，这可能会导致问题，但即使这个问题也可以在某种程度上得到解决，强制在导入新数据时清除缓存的一部分。

总结

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

另外，请记住，这是一个没有明确定义的起点和终点的过程。

您今天不必实施所有建议的更改。花一些时间查看监控工具的结果，在网站上进行更改，然后比较更改前后的性能。

如果感觉对您有帮助。 请点个赞吧。