案例三：字体加载引起的布局抖动

推荐做法包括： 使用 font-display: optional 或 font-display: swap 配合 size-adjust @font-face属性进行微调

案例一：图片和视频未预留空间

例如，一篇文章页通常使用 aspect-ratio: 16 / 9 的容器包裹封面图，保证图片加载前容器就已占据对应高度

控制插入时机 ：将动态内容的加载推迟到页面主体内容完全稳定渲染之后，并使用 requestAnimationFrame 确保布局已经“锁定”

更多精选文章

案例一：图片和视频未预留空间 某资讯类网站网页CLS值高达0

综合优化建议与百度搜索适配

观看动画、译制片或是有声影视剧时，🎯出色的配音会大幅提升代入感，即便看不到面部表情，也能被角色的情绪深深感染

理解CLS：从累积布局偏移到用户体验

CLS过低意味着用户在阅📌读或操作时，页面元素突然发生位移，导致点击失误或阅读中断

案例二：动态内容插入未预留锚点

百度算法更新后，CLS已被纳入搜索排名考量因素，直接影响到页面在搜索结果中的可见权

将图片标签置于容器内，并提前设定容器的 min-height

林琬婷

5 和 letter-spacing ，确保即使字体未加载，行高依然与自定义字体渲染后的高度接近