Shopify 顶部公告条与广告位造成 CLS 怎么修

现象#

页面加载时内容突然往下跳，CLS 0.25，主要是顶部公告条与延迟加载的广告位把布局顶开。

原因#

• 公告条由 JS 异步插入，插入前不占位
• 广告位或推荐模块加载后才撑开高度
• 图片/iframe 没有预设尺寸

处理步骤#

1. 公告条改为服务端渲染，或预留 min-height
2. 广告位容器写死 aspect-ratio 或 min-height
3. 所有 iframe 与图片设置宽高属性
4. 字体加载用 size-adjust 与 font-display: swap 减少文字重排

验收标准#

Lighthouse CLS 低于 0.1，加载过程中主要内容位置不跳动。