优化CLS：消除意外的页面跳动

减少渲染阻塞 移除或内联关键的CSS，使用 async 或 defer 属性加🔥载JavaScript，避免它们阻塞主线程

优化字体加载策略 使用 font-display: swap 或 optional 属性，配合预先连接的字体URL，可以减少因字体切换导致的文字重排

吴琪智

如果这两项指标不达标，不✅仅用户可能流失，搜索引擎的排名也可能受到影响

使用 aspect-ratio 属性确保响应式布局下空间比例一致

如果必须插入，尽量在视口下方或使用固定定位

更多精选文章

提升服务器响应速✅度 使用CDN加速： 将静态资源分发到离用户最近的节点，减少网络延迟

为所有媒体元素预留空间 图片与视频： 始终在HTML或CSS中明确定义 width 和 height 属性

理解Core Web Vitals：为什么LCP与CLS至关重要

优化CLS🔥：消除意外的页面跳动 CLS衡量页面在加载过程中内容偏移的程度，理想值应小于0

对于动画或过渡效果🍀，使用 transform 或 opa💪city 属性，避免触发布局重新计算

常见问题与误区 “只要用了CDN，LCP一定快”： 不一定

常见问题与误区

优先加载LCP候选元素 预加载关键资源： 使用 <link r🎉el="preload"> 提前加载LCP元素引用的图片、字体或🎊CSS文件

大部分CLS问题源于未设置尺寸的图片、广告、👍动态🌺嵌入内容或自定义字体加载延迟

通常来说，只要做好 资源预加载、尺寸预留、服务器加速 这三件事，大多站点都能达标