前端性能提升必备技巧

性能对流量的影响

网页应以多快速度加载？根据 skilled.co，47% 的客户希望网页在 2 秒或更短时间内完成加载。同样来自 skilled.co 的数据，AI 医疗保健软件公司 mPulse Mobile 的测试发现：

• 页面加载时间为 2.4 秒以内时，其转化率为 1.9％
• 3.3 秒时，转化率为 1.5％
• 4.2 秒时，转化率为不到 1.1％
• 超过 5.7 秒时，转化率为 0.6％

其他公司也获得类似的结果：

• 沃尔玛发现，页面加载时间每减少 1 秒，转化数就会增加 2％
• COOK 通过将页面加载时间减少 0.85 秒，使转化数提高了 7％
• Mobify 发现，首页加载时间每减少 100 毫秒，转化率就会提高 1.11％

性能模型

RAIL

RAIL是一种以用户为中心的性能模型，它提供了一种考虑性能的结构。该模型将用户体验分解为关键操作（例如，点击、滚动、加载），并帮助您为每个操作定义性能目标。

RAIL 代表 Web 应用程序生命周期的四个不同方面：响应、动画、空闲和加载。用户对这些上下文中的每一个都有不同的性能期望，因此性能目标是根据上下文和用户如何感知延迟的 UX 研究来定义的。

RAIL性能模型的4个部分

Response响应：在 50 毫秒内处理事件

目标是在 100 毫秒内响应输入，那么为什么我们的计划是实现 50 毫秒？这是因为除了输入处理之外，通常还有其他工作要做，并且这些工作占用了可接受输入响应的部分可用时间。如果应用程序在空闲时间内在推荐的 50 毫秒块中执行工作，这意味着如果输入在这些工作块之一期间发生，则它最多可以排队 50 毫秒。考虑到这一点，可以安全地假设只有剩余的 50 毫秒可用于实际输入处理。下图显示了这种效果，该图显示了在空闲任务期间收到的输入如何排队，从而减少了可用的处理时间

空闲任务如何影响输入响应

Animation 动画：在 10 毫秒内生成一帧

• 在 10 毫秒或更短的时间内生成动画中的每一帧。从技术上讲，每帧的最大预算为 16 毫秒（1000 毫秒/每秒 60 帧≈16 毫秒），但浏览器需要大约 6 毫秒来渲染每帧，因此每帧 10 毫秒的准则。
• 以视觉平滑为目标。用户会注意到帧速率何时发生变化。

Idel空闲：最大化空闲时间

最大化空闲时间以增加页面在 50 毫秒内响应用户输入的几率。

Load 加载：页面内容应在 5 秒内可以互动

当页面加载缓慢时，用户注意力会游移，用户会认为任务已损坏。加载速度快的网站具有更长的平均会话、更低的跳出率和更高的广告可见度。

web vitals

核心 Web 指标是适用于所有网页的 Web 指标子集，每位网站所有者都应该测量这些指标，并且这些指标还将显示在所有 Google 工具中。每项核心 Web 指标代表用户体验的一个不同方面，能够进行实际测量，并且反映出以用户为中心的关键结果的真实体验。

核心 Web 指标的构成指标会随着时间的推移而发展 。当前针对 2020 年的指标构成侧重于用户体验的三个方面——加载性能、交互性和视觉稳定性——并包括以下指标（及各指标相应的阈值）：

Largest Contentful Paint (LCP)

最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。

First Input Delay (FID)

首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。

Cumulative Layout Shift (CLS)

累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少。

为了确保您能够在大部分用户的访问期间达成建议目标值，对于上述每项指标，一个良好的测量阈值为页面加载的第 75 个百分位数，且该阈值同时适用于移动和桌面设备。

CLS = 影响分数 * 距离分数

影响分数

前一帧和当前帧的所有不稳定元素的可见区域集合（占总可视区域的部分）就是当前帧的影响分数。

在上图中，有一个元素在一帧中占据了一半的可视区域。接着，在下一帧中，元素下移了可视区域高度的 25%。红色虚线矩形框表示两帧中元素的可见区域集合，在本示例中，该集合占总可视区域的 75%，因此其影响分数为0.75 。

距离分数

距离分数指的是任何不稳定元素在一帧中位移的最大距离（水平或垂直）除以可视区域的最大尺寸维度（宽度或高度，以较大者为准）。

在上方的示例中，最大的可视区域尺寸维度是高度，不稳定元素的位移距离为可视区域高度的 25%，因此距离分数为 0.25。

所以，在这个示例中，影响分数是0.75 ，距离分数是0.25 ，所以布局偏移分数是0.75 * 0.25 = 0.1875 。

指标收集

推荐使用 web-vitals

• 在 JavaScript 中测量 LCP
• 在 JavaScript 中测量 FID
• 在 JavaScript 中测量 CLS

问题分析

常用工具

lighthouse

Lighthouse可在 Chrome DevTools、web.dev/measure、Chrome 扩展、Node.js 模块和 WebPageTest 中使用。你给它一个 URL，它模拟一个 3G 连接速度较慢的中端设备，在页面上运行一系列审计，然后给你一份负载性能报告，以及如何改进的建议。

Chrome 开发者工具

Chrome DevTools对页面加载或运行时发生的一切进行深入分析。请参阅开始分析运行时性能以熟悉性能面板 UI。

WebPageTest

WebPageTest 是一个 Web 性能工具，它使用真实的浏览器来访问网页并收集计时指标。在webpagetest.org/easy上输入一个URL，以获取有关页面在具有慢速3G 连接的真实Moto G4 设备上的负载性能的详细报告。您还可以将其配置为包含 Lighthouse 审核。

performance-bookmarklet（个人推荐）

该插件可以看到瀑布流顺序、各域名资源调用顺序、资源分类等有帮助的信息

导航计时瀑布

• 如果您使用User Timing API (performance.mark和performance.measure)设置标记，它还会显示标记和度量
• 将鼠标悬停在条形上以查看包含精确毫秒/持续时间的工具提示

导航计时 API 详细信息

参考文章

• https://github.com/GoogleChro...
• https://web.dev/rail/
• https://github.com/micmro/per...