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

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

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

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

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

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

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

如何评估网站性能?

八种快速提升Web应用性能的办法_第1张图片

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

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

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

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

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

八种快速提升Web应用性能的办法_第2张图片

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

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

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

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 的

你可能感兴趣的:(前端性能优化)