共计 2534 个字符，预计需要花费 7 分钟才能阅读完成。
性能对流量的影响
网页应以多快速度加载？依据 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…