LCP 构成分析：点我前往

现状分析

目前 TP75 的 LCP 时间分布

通过上图，可以看出主要有以下卡点：

1. HTML 加载时间长
2. 部分资源需要同步加载
3. 部分接口需要同步加载对于 HTML 加载时间长的问题期望通过 ServiceWorker 代理 HTML 返回解决，但实际表现效果不佳，具体分析可查看：https://shimo.im/docs/9030Jew0BxfxgXkw

对于资源加载，目前 TP75 在 50ms 以内，可提升空间不大

资源加载时间 TP 75 50ms 以内

接口加载按现流程需要进行同步加载，加载时间分别为 500ms 及 500ms

queryClockRecord tp75 500ms 左右

queryRuleAndAttendanceInfo tp75 500ms 左右

优化策略

方案一

进行请求并行的策略预计可减少其中一个接口的请求时间，大概 500ms：

下图红色区域请求并行，可减少一个阶段

方案二

目前静态资源做了懒加载处理，启用懒加载后首屏加载资源 GZIP 后约 749kb

不使用懒加载 GZIP 后为 1.1MB

如果不使用懒加载还需要实现以下功能：

• 拆包
• hash 稳定性且按照目前 TP75 的资源文件加载速度也不会有较大提升，ROI 较低