针对不同类型多媒体资源的优化策略

延迟加载（Lazy Loading）是💡一种常见的性能优化技术，其核心思路是：仅加载用户当前视口内可见的内容，而将视口之外的多媒体资源推迟到用户滚💡动到附近时再加载

0秒为良好 累积布局偏移（CLS🎯） 页面在加载过程中出现意外位移的评分 保持在0

避免常见的延迟加载误区

8秒 速度指数（SI） 页面内容可视填充的速度 小于3

理解图片与视频延迟加载的基本原理

预留足够的占位空间： 为延迟加载的图片和视频设置固定的宽高比🔥，防止页面在滚动过程🤔中出现内容跳动

实施延迟加载的常见方式

对于嵌入的第三方视频（如B站、YouTube），同样可以在 <iframe> 上添加 loading="lazy" 属性实现延迟加载

重点关注以下指标： 指标名称 说明 优化达标参考 首次内📢容绘制（FCP） 页面🎊第一个内容元素渲染完成的时间 通常应小于1

测试与验证

设置明确的宽高属性，避免图片加载过程中页面布局发生跳跃，从而影响累积布局偏移💡（CLS）指标