一切没有指标的性能优化都是扯淡
核心指标
- LCP : 最大内容绘制, 记录页面从开始加载到最大块文本或图片被渲染的时间.用于确定关键加载路径的核心指数
- CLS : 累计布局转换, 从页面开始加载到页面生命周期变为hidden,通过相加计算得到的每个独立布局变化的得分得到的总分.最终会落地到重绘重排需要注意的问题
- INP : 从交互到下一次渲染的延迟,主要以click / keypress事件为主,如果过长就是有长任务或长任务没有切割,是交互期是否丝滑的核心指标
原因及解决方案
CLS不佳的原因
- 替换元素没有设置宽高
- 添加动态的节点信息
降低LCP
-
消除资源加载延迟
- LCP资源应与网页加载的第一个资源同时开始加载,如果LCP资源加载时间晚于第一个资源,则有改进的空间
- 影响要素:
- 发现资源的时间
- 资源的优先级 ( 但也不要设置多个high )
-
消除元素延迟渲染
确保LCP元素可以在其资源完成加载后立即渲染
-
减少阻塞渲染的样式表或将其内嵌 ( 减小样式表大小,将样式表嵌入html中来避免额外的网络请求 (需要样式表小))
css会阻塞渲染,如果css太大,其加载时间比LCP资源长,则会阻止LCP渲染,即使其资源已完成加载也是如此
-
使用SSR
-
拆分长任务
-
-
缩短资源加载时长
减少资源通过网络传输到用户设备所花费的时间
- 缩减资源大小 ( 压缩图片大小等 )
- 缩短资源传输距离 ( 使用CDN )
- 减少网络带宽争用 ( 分配较高的fetchpriority 并尽早开始加载该资源 )
- 完全消除网络时间 ( 使用缓存等 )
-
缩短加载第一个字节所需的时间
尽快的提供初始HTML
INP不佳的原因
优化互动阶段
- 输入延迟时间 : 从用户发起与网页互动开始,到互动事件回调开始运动结束
- 处理时长 : 事件回调允许到完成所需的时间
- 渲染延迟时间: 浏览器展示包含互动视觉结果的下一帧所需的时间
优化因JS导致的INP不佳
- 找出并减少输入延迟
- 一般指网路加载模块,使用预加载
- 优化事件回调
- 拆分事件回调中的工作为单独的任务
- 手动推迟代码执行
- 使用web worker在浏览器主线程外运行js
优化因呈现导致的INP不佳
-
避免强制同步布局和布局抖动
-
缩小样式计算范围并降低其复杂性
- 用class代替复杂样式
- 减少要计算样式的元素数量
- 衡量样式重新计算的开销
-
DOM大小
- 减少DOM深度和DOM数量
