阅读 569

前端性能提升必备技巧

性能对流量的影响

image.png

网页应以多快速度加载?根据 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 研究来定义的。

image.png RAIL性能模型的4个部分

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

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

image.png 空闲任务如何影响输入响应

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

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

Idel空闲:最大化空闲时间

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

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

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

web vitals

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

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

image.png

Largest Contentful Paint (LCP)

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

First Input Delay (FID)

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

Cumulative Layout Shift (CLS)

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

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

CLS = 影响分数 * 距离分数

影响分数

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

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

距离分数

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

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

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

指标收集

推荐使用 web-vitals

问题分析

常用工具

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(个人推荐)

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

导航计时瀑布

image.png

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

导航计时 API 详细信息

image.png

参考文章

文章分类
前端