第五步：利用工具监测与验证修复效果

网络字体导致的布局变化 ：如果使用了自定义字体，且未设置后备字体或字体加载方式不当，字🔥💎体渲染前后的字宽差异可能引发文本块整体位移

即便第三方内容加载🎵失败，页面也不会因为缺少内容而塌缩

第四步：合理管理网络字体加载 自定义字体加载不稳定时，建议使用 font-display: swap 属性，让浏览器先用后备字体渲染文本，待网络字体加载完成后再切换到目标字体

第二步：为所有媒体元素设置固定的宽高比

未预留空间的嵌入对象 ：例如地图、视频播放器或社交媒体插件，如果页面加载时没有预先🚀分配容器尺寸，它们激活后同样会造成布局晃动

例如： 在图片标签中添加 width="800" height="450" 属性，或者在CSS中使用 aspect-ratio: 16/9; 属性

虽然 swap 有时会出现短📌暂的字体重绘，但相比字体加🌈载前页面完全空白或元素大幅度移位，它对CLS的影响更小