商智C店H5性能优化实战

前言

商智C店，是依托移动低码能力搭建的一个应用，产品面向B端商家。随着应用体量持续增大，考虑产品定位及用户体验，我们针对性能较差页面做了一次优化，并取得了不错的效果，用户体验值（UEI）从一般提升到良好。本文详细记录了优化思路及过程，期望给正在或打算做用户体验提升的小伙伴提供一些参考。

一、性能优化概览

从宏观方面讲，前端性能优化主要包含两个层面：

•快速的首屏响应

指的是从用户输入URL到页面完整渲染出来的过程中，通过减少资源请求时长、合理化页面渲染等方式，让页面内容尽快呈现到用户面前，达到舒适的展示效果。

•流畅的交互体验

指的是在资源加载且页面渲染完成后，用户与页面的交互反馈及时且动效流畅，没有卡顿、掉帧等情况。

本文重点介绍前者，性能监测工具依赖烛龙平台（性能指标来自LightHouse性能工具）。

二、性能分析

1、Lighthouse工具

Lighthouse 是 Google Chrome 推出的一款开源自动化工具，它可以搜集多个现代网页性能指标，分析 Web 应用的性能并生成报告，为开发人员进行性能优化提供参考方向。

1.1 性能指标

•FCP

首次内容绘制（First Contentful Paint），是指测量在用户导航到页面后浏览器呈现第一段 DOM 内容所花费的时间。DOM 内容包括页面上的图像、非白色元素和 SVG 等，不包括 iframe 内的任何内容。

•LCP

最大内容绘制（Largest Contentful Paint）：测量视口中最大的内容元素何时呈现到屏幕上，这近似于页面的主要内容对用户可见的时间。

•SI

速度指数（Speed Index），反映了网页内容填充的速度。页面解析渲染过程中，资源的加载和主线程执行的任务会影响到速度指数的结果。

•CLS

累积布局偏移（Cumulative Layout Shift），主要测量可见元素在可视区域内的移动情况。该指标需要重点关注，随着Lighthouse的版本迭代，该指标占比一直呈上升趋势，也是页面性能优化容易忽略的方面。以下为Lighthouse不同版本中CLS指标的占比情况：

•TBT

总阻塞时间（Total Blocking Time），是指测量页面被阻止响应用户输入（例如鼠标点击、屏幕点击或键盘按下）的总时间。它是通过添加 FCP 和 TTI 之间所有长任务的阻塞部分来计算总和，任何执行时间超过 50 毫秒的任务都是长任务。

各指标表现评价标准：

1.2 UEI计算规则

UEI指的是用户体验值，烛龙平台底层使用的是Lighthouse性能统计工具。其中，单页面的得分统计规则与其保持一致（性能指标分数的加权平均值）。针对多页面应用，整体评分计算规则为，每个页面得分的加权平均值：（页面A * A访问量 + 页面B * B访问量 …）/ (A访问量 + B访问量 + …)。

2、Chrome调试工具

Chrome的Performance面板，可以记录页面加载时\运行时的所有活动，方便我们找出页面的性能瓶颈。

以上为performance面板的概览图，通过对页面加载过程的录制，查看视图面板的主线程工作过程，我们能够找到页面阻塞的长任务，从而优化TBT指标；交互阶段存在的动画卡顿等问题，也可以通过该面板进行分析和优化。

三、实战

1、项目介绍

商智C店，是依托移动低码搭建的面向B端商家的应用。根据烛龙数据统计，优化之前，用户体验值在58分左右。我们期待通过本次优化，将烛龙统计得分提升到体验良好的水平（75分及以上）。从下图可以看出，页面的CLS、TBT分数很低，LCP指标分数位于性能良好与性能较差之间，这三个指标是我们接下来进行优化的重点。

<