LBank 活动中心性能与抖动审计

这是一份给人看的汇报版,对应 Markdown:docs/GrowthX/new-popular-events-performance/lbank-new-popular-events-performance-map.md。范围是活动中心和列表里的 13 个活动详情页,PC 与手机都已采集。

采集日期 2026-05-25PC 1365×768手机 375×812Chrome headless原始 JSON 已归档
最严重页面
Mega Points
PC LCP 4428ms,CLS 0.3556;手机 LCP 4316ms。
活动中心资源
93 张图
PC/手机冷加载都请求 93 个图片资源。
最大单图问题
2.2MB
Elite Lead Trader PC banner 导致 LCP 3760ms。
源码定位
已对应
映射到 BannerContainer、pointMall 视频模板和活动卡片图片处理。

先看结论

1. Mega Points 必须优先修

视频/PAG、双 poster、视频宽度初始化、奖品面板占位同时出问题,是 LCP 和 CLS 的主要异常样本。

2. Banner 缺尺寸治理

普通活动详情页共享 BannerContainer 只做 webp 格式转换,没有统一 resize,遇到 2MB banner 就直接拖垮 LCP。

3. 活动中心资源太多

活动中心 LCP 不差,但首屏图片数和全局脚本/接口明显超出当前页面必要范围。

13 个活动详情页对比

判断标准:LCP 超 2.5s、CLS 超 0.05、滚动新增 CLS 超 0.1 记为明显风险;滚动新增 CLS 0.02-0.1 记为需关注。

状态页面PC LCP / CLS手机 LCP / CLS图片数 PC/手机滚动新增 CLS PC/手机人话结论
资源异常 Activity Center
打开页面
1596ms
CLS 0.0116
1332ms
CLS 0.0062
93/93 0.0000 / 0.0000 活动中心 LCP 正常,但 PC/手机都冷加载 93 张图,首屏资源控制不足。
通过 $20,000 In $RVV Rewards & Futures Bonus
打开页面
1236ms
CLS 0.0000
1156ms
CLS 0.0000
10/9 0.0000 / 0.0000 当前采样 LCP 和 CLS 在目标范围内,后续套用统一 banner resize 和动态模块占位规范。
需关注 Tokenized Stocks Lucky Spin
打开页面
1304ms
CLS 0.0000
1248ms
CLS 0.0000
18/18 0.0000 / 0.0474 手机滚动新增 CLS 0.0474,接近阈值。
高风险 Mega Points Celebration
打开页面
4428ms
CLS 0.3556
4316ms
CLS 0.0195
9/14 0.0000 / 0.7685 最严重:PC/手机 LCP 都超 4s;PC 视频宽度初始化导致 CLS 0.3556;手机滚动新增 CLS 0.7685。
高风险 Invite Friends & Share World Cup Prizes
打开页面
1224ms
CLS 0.0000
1164ms
CLS 0.0000
9/8 0.1246 / 0.0000 冷加载稳定,但 PC 滚动新增 CLS 0.1246,需排查懒加载模块高度。
通过 Forex Futures Launch Carnival
打开页面
1300ms
CLS 0.0000
1340ms
CLS 0.0000
10/9 0.0000 / 0.0000 当前采样 LCP 和 CLS 在目标范围内,后续套用统一 banner resize 和动态模块占位规范。
高风险 Elite Lead Trader Challenge
打开页面
3760ms
CLS 0.0000
1996ms
CLS 0.0000
9/8 0.0010 / 0.0000 PC banner 约 2.2MB,导致 LCP 3.76s;布局本身稳定。
通过 OG Reunion Gala
打开页面
1244ms
CLS 0.0000
1136ms
CLS 0.0000
9/8 0.0043 / 0.0000 当前采样 LCP 和 CLS 在目标范围内,后续套用统一 banner resize 和动态模块占位规范。
通过 Pizza Day Trading Bash
打开页面
1784ms
CLS 0.0000
2188ms
CLS 0.0000
10/9 0.0000 / 0.0000 当前采样 LCP 和 CLS 在目标范围内,后续套用统一 banner resize 和动态模块占位规范。
通过 Futures Grid Trading: New User Growth Program
打开页面
1128ms
CLS 0.0000
1308ms
CLS 0.0015
10/9 0.0000 / 0.0000 当前采样 LCP 和 CLS 在目标范围内,后续套用统一 banner resize 和动态模块占位规范。
通过 CTR Pre-Market Trading Protection
打开页面
1260ms
CLS 0.0000
1448ms
CLS 0.0000
9/8 0.0000 / 0.0000 当前采样 LCP 和 CLS 在目标范围内,后续套用统一 banner resize 和动态模块占位规范。
高风险 Copy Trading Invitation#2
打开页面
1416ms
CLS 0.0000
1128ms
CLS 0.0649
14/14 0.0000 / 0.0000 手机页面主体从 y=48 下移到 y=104,CLS 0.0649。
高风险 2026 Fiat Goal Bonanza: Kickoff Your Crypto Journey!
打开页面
1320ms
CLS 0.0000
1168ms
CLS 0.0000
19/19 0.0000 / 0.1155 手机滚动新增 CLS 0.1155,重点看抽奖/任务模块占位。
通过 Deposit & Pay for the Vietnam Holiday!
打开页面
1280ms
CLS 0.0000
1152ms
CLS 0.0000
9/9 0.0000 / 0.0000 当前采样 LCP 和 CLS 在目标范围内,后续套用统一 banner resize 和动态模块占位规范。

重点问题拆解

Mega Points Celebration

PC 的 LCP 是 poster 图,4.4s 才出现;同时视频节点从 300px 宽扩到 1365px,造成 CLS 0.3556。手机同样 LCP 超 4s,滚动后新增 CLS 0.7685。

源码位置:growthx/shared/src/components/event/EventComWithStore/components/Banner/variants/pointMall

主要原因:desktop/mobile 两张 poster 都被渲染,视频/PAG/WASM 首屏参与加载,VideoAnimation 初始化尺寸不稳定,奖品面板没有稳定占位。

Elite Lead Trader Challenge

布局稳定,但 PC banner 资源约 2.2MB,LCP 3760ms。问题集中在资源体积,不是组件重排。

源码位置:growthx/shared/src/components/BannerContainer

主要原因:普通 banner 只追加 format,webp,没有按视口生成合适尺寸。

Copy Trading Invitation#2

手机首屏 CLS 0.0649,页面主体从 y=48 下移到 y=104。LCP 正常,问题是顶部空间后补。

判断方向:检查 header、公告条、限制态、活动状态条或 wrapper padding 是否 hydration 后才生效。

活动中心页面

LCP 正常,PC 1596ms,手机 1332ms。但冷加载都请求 93 张图,说明首屏资源策略不够收敛。

建议只 eager 首屏可见卡片图,其余 lazy;footer、行情、下载、复杂导航等非关键资源延后。

源码映射

活动中心列表卡片
growthx/bonus/src/app/[locale]/bonus/center/main-page/components/UnlockMorePlay/ActivityCard
问题:列表图只走 completeImageUrl(),绝对 URL 不会自动追加 resize。
普通活动详情 Banner
growthx/shared/src/components/BannerContainer
问题:只做 format,webp,没有统一 PC/手机尺寸裁剪。
Mega Points 视频模板
growthx/shared/src/components/event/EventComWithStore/components/Banner/variants/pointMall
问题:双 poster、视频/PAG/WASM 首屏加载、视频容器初始化尺寸变化。
活动详情页 Wrapper
growthx/event/src/app/[locale]/event/[slug]
问题:Copy Trading 手机端整体下移,需要查顶部占位和 hydration 后样式变化。

建议执行顺序

先修 Mega Points。 把 poster 改成分端加载并压缩,视频/PAG 延后到首屏稳定后,固定 video/canvas 容器尺寸,补奖品面板 skeleton。
修普通 Banner 图片规范。 给 BannerContainer 增加 PC/手机 resize 参数,Elite Lead Trader 先验证 PC banner 从 2.2MB 降下来后的 LCP。
修手机顶部下移。 针对 Copy Trading 检查 header/公告条/wrapper top offset,SSR 初始就预留最终高度。
收敛活动中心首屏资源。 列表图只加载首屏可见项,其他图片、footer、行情/合约、下载相关资源延后。
统一动态模块占位。 抽奖、任务、奖品、排行榜、视频/PAG/canvas 都要先有稳定容器高度,再 lazy 资源。

原始资料

Markdown 原文:docs/GrowthX/new-popular-events-performance/lbank-new-popular-events-performance-map.md

采集脚本:docs/GrowthX/new-popular-events-performance/audit-new-popular-events-performance.mjs

原始 JSON:docs/GrowthX/new-popular-events-performance/perf-artifacts/new-popular-events/*.json