前端性能优化

一、速度为什么很重要?

1.效果关乎留存用户

BBC 发现其网站的加载速度每增加一秒,就会额外损失 10% 的用户。

2.效果关乎转化次数的增加

速度较快的网站可以提高转化率并改善业务成果。

3.性能关乎用户体验

对网页加载速度延迟的压力反应类似于观看恐怖电影或解决数学问题,并且比在零售店排队等候的压力更大。

二、HTML 性能的一般注意事项

该 HTML 的初始请求需要经历多个步骤,每一步都需要一些时间。减少在每个步骤上花费的时间,可加快至第一字节的时间 (TTFB)。虽然 TTFB 不是您在网页加载速度方面应该关注的唯一指标,但较大的 TTFB 确实会导致难以达到 Largest Contentful Paint (LCP) 和 First Contentful Paint (FCP) 等指标的指定“良好”阈值。

1.尽量减少重定向

重定向会降低网页加载速度,因为它需要浏览器在新位置发出额外的 HTTP 请求,以检索资源。

2.缓存 HTML 响应

缓存 HTML 响应很困难,因为响应可能包含指向其他关键资源(如 CSS、JavaScript、图片和其他资源类型)的链接。这些资源的文件名中可能包含唯一指纹,该指纹因文件内容而异。这意味着,缓存的 HTML 文档可能会在部署后过时,因为它包含对过时子资源的引用。
较短的缓存生命周期(而不是无缓存)具有诸多优势,例如允许在 CDN 中缓存资源,减少从源服务器传送的请求数量,并在浏览器中允许资源重新验证而不是再次下载。此方法最适合在任何上下文中不会更改的静态内容,并且您可以将缓存资源的适当时间设置为您认为合适的分钟数。为静态 HTML 资源分配 5 分钟是一种安全选择,可确保定期更新不会被注意到。

3.衡量服务器响应时间

与可立即传送静态网页(无需在后端花费大量计算时间)相比,提供动态生成的响应(例如从数据库提取数据)的网页的 TTFB 可能更高。
如果用户在“字段”中遇到 TTFB 缓慢的问题,您可以使用 Server-Timing 响应标头公开有关在服务器上的时间停留的时间的信息:

Server-Timing: auth;dur=55.5, db;dur=220

4.压缩

应压缩 HTML、JavaScript、CSS 和 SVG 图片等文本响应,以缩减通过网络传输的数据量,加快下载速度。最常用的压缩算法是 gzip 和 Brotli。Brotli 比 gzip 提高了大约 15% 到 20%。

5.内容分发网络 (CDN)

内容分发网络 (CDN) 是一个分布式服务器网络,从您的源服务器缓存资源,进而从物理上距离用户更近的边缘服务器传送资源。由于靠近用户的物理位置可以缩短往返时间 (RTT),而 HTTP/2 或 HTTP/3、缓存和压缩等优化技术可让 CDN 更快地提供内容(与从源服务器提取内容相比)。在某些情况下,使用 CDN 可以显著改善您网站的 TTFB。

三、优化资源加载

1.渲染阻塞

CSS 是一种阻塞渲染的资源,因为它会在构建 CSS 对象模型 (CSSOM) 之前阻止浏览器渲染任何内容。浏览器会阻止呈现,以防止出现无样式内容闪烁 (FOUC)。一旦页面的 CSS 从网络加载完毕,系统便会应用所有样式,并且页面的无样式版本会立即替换为样式化版本。需要通过对 CSS 进行优化来最大限度地缩短其持续时长。

2.解析器屏蔽

解析器阻止资源会中断 HTML 解析器,例如没有 async 或 defer 属性的

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