CLS优化指南：如何解决图片/广告/字体导致的页面布局跳动

时间：2025-09-28

编辑：tance.cc

烦人的“页面跳动”：什么是CLS，以及如何彻底消灭它？》

你打开一个新闻网站，看到一条你很感兴趣的标题。你的目光精准地锁定了它，你的手指移动着鼠标，正准备在那条链接上，完成一次完美的点击。

但就在你按下鼠标左键的前0.1秒，页面顶部，一个“加载缓慢的广告横幅”突然出现了！

它像一个粗鲁的、迟到的壮汉，猛地一下挤进了队伍的最前面。你眼前页面上所有的内容——包括你原本要点击的那条新闻——都在瞬间，被这股力量向下猛推了一截。

最终，你的鼠标，精准地点击在了那条刚刚“跳”到你光标下的、另一条你毫无兴趣的新闻上。

你是什么感觉？

愤怒、沮´丧、感觉被戏弄了。

这个因为页面元素在加载过程中，后期出现而导致的“布局意外移动”的糟糕体验，就是谷歌在其“核心网页指标”中，最关注的那个“用户体验杀手”——CLS (Cumulative Layout Shift)，累积布局偏移。

CLS到底是什么？—— 一座“摇摇欲坠”的“积木塔”

比喻： 我们可以把一个正在加载的网页，想象成一座正在搭建的“积木塔”。

一个CLS低的、体验好的网站： 就像一位专业的建筑师在搭塔。他在放每一块积木之前，都已经提前规划和预留好了空间。整个塔平稳、可预测地向上增长。
一个CLS高的、体验差的网站： 就像一个醉汉在搭塔。他先把小积木都堆好，然后，突然想起来，要在塔的中间，硬塞进去一块巨大、沉重的积木。结果就是，那块新积木上方的所有部分，都突然向上“跳”了一下；而它下方的所有部分，则被压得向下“猛地一沉”。

CLS这个指标，就是用来量化，在你的网页整个加载生命周期中，这种“意外的、不受用户控制的布局晃动”到底有多严重。谷歌认为，一个优秀的网站，其CLS分数应该低于0.1。

一个高的CLS分数，不仅会让用户感到烦躁，更会被谷歌的搜索引擎，判定为“用户体验差”，从而直接影响你的SEO排名。

“头号通缉犯”：导致“页面跳动”的四大元凶

好了，现在我们知道了问题的严重性。是时候拿出我们的“工程师”工具，去揪出那些在幕后，把我们的“积木塔”推来搡去的“元凶”了。

元凶一号：没有“尺寸”的图片

这是导致CLS问题的最常见、最主要的原因，没有之一。

犯罪过程： 浏览器开始加载你的网页，它先看到了文字，于是就把文字一段段地“铺”好。接着，它看到代码里有一张图片，于是开始下载。但问题是，你的代码里没有告诉浏览器，这张图片到底有多宽、多高。所以，浏览器只能先不给它留任何空间，继续往下铺其他的文字。几秒钟后，那张500像素高的图片终于下载完了。浏览器大喊一声“都给我让开！”，然后硬生生地在已经铺好的文字中间，挤出了一个500像素高的空间。于是，这张图片下面的所有内容，都“轰隆”一下，向下移动了500像素。一次剧烈的“页面跳动”就此诞生。
解决方案： 永远、永远、永远，为你的<img>标签，加上width和height属性！
实战代码：

（错误示范）<img src="/images/hero.jpg">
（正确示范）<img src="/images/hero.jpg" width="800" height="450">

进阶解读： 你可能会问：“我加上了固定的宽高，那在手机上，图片不就显示不全了吗？” 问得好！你依然需要用CSS来控制它的响应式表现，比如 img { max-width: 100%; height: auto; }。但是，浏览器会非常聪明地，利用你在HTML里提供的width="800"和height="450"，提前计算出这张图片的“宽高比”（Aspect Ratio）。这样，即便图片还没开始下载，浏览器也已经在布局中，为你预留好了一个正确比例的、空白的“占位符”。等图片驾到时，它只会优雅地“填充”进这个预留空间，而不会推开任何邻居。

元凶二号：没有“预留席位”的广告和嵌入内容

犯罪过程： 这和图片问题如出一辙。你的页面上有一个广告位。但广告通常是异步加载的，而且你也不知道这次会加载出来一个300x250的方块广告，还是一个160x600的摩天大楼广告。当广告脚本运行完毕，“决定”好要显示哪个广告后，这个广告就会“凭空出现”，粗暴地推开周围的元素。
解决方案： 为你的广告位，提前“预订”一个固定大小的“座位”。
实战代码：

在你的广告代码外面，包裹一个<div>容器。
用CSS，明确地为这个<div>容器，指定一个最小高度（min-height）。
（CSS代码示例）#ad-slot-1 { min-height: 250px; }

比喻： 这就像在餐厅里，虽然那位VIP客人（广告）还没到，但你已经在桌上放了一个“预留”的牌子，并为他留出了足够的空间。其他客人（网页内容）会自然地围绕着这个预留空间就座。当VIP驾到时，他只需坐进你为他留好的位置即可，整个餐厅的布局，都不会受到任何影响。

元凶三号：字体“变脸”引发的“连锁反应”

犯罪过程： 这是一个更隐蔽的“凶手”。浏览器为了让用户尽快看到文字，会先用一种你电脑里自带的“后备字体”（比如宋体、黑体、Arial）来显示你的文章。与此同时，它在后台，默默地下载你网站指定的、那个漂亮的“网页字体”（Web Font，比如思源黑体）。当那个漂亮的字体终于下载完成后，浏览器会立刻进行一次“字体替换”，把所有的文字，都从“宋体”变成“思源黑体”。但问题是，不同的字体，其本身的字形、宽度、高度，都有微小的差异。这次“集体变脸”，就可能导致整段文字的长度和高度发生变化，从而引发一次细微但恼人的“连锁跳动”。
解决方案： 让“后备字体”和“网页字体”，尽可能地“长得像”，并让“网页字体”更快地被加载。
实战行动：

预加载（Preload）关键字体文件： 就像我们优化LCP图片一样，使用<link rel="preload">，来告诉浏览器，优先下载你最重要的那个字体文件。
使用现代CSS字体属性： 利用size-adjust, ascent-override等最新的CSS属性，去微调你的“后备字体”，让它在字号、行高等指标上，与最终要加载的“网页字体”无限接近，从而将“变脸”时的“跳动感”降到最低。

元凶四号：从天而降的“顶部通知栏”

犯罪过程： 页面已经加载得很完美了。但在2秒钟后，一个JavaScript脚本运行了，它在页面的最顶端，“动态地插入”了一个“订阅我们的新闻，获取九折优惠！”的通知横幅。这个横幅的出现，就像在积木塔的顶上，又加了一块，导致整座塔，连同你的视口，都被向下推移了。
解决方案： 不要在现有内容的“上方”，动态插入任何新内容。
实战行动：

方案A（预留空间）： 如果你一定要在顶部加这个横幅，那就在页面的HTML里，从一开始就为它准备好一个空的、有固定高度的“占位容器”。让横幅的内容，加载到这个已经“预留”好的空间里去。
方案B（覆盖而非推挤）： 更好的方法是，不要让这个横幅去“推挤”原有的内容。你可以让它以“覆盖”（Overlay）或“固定定位”（Fixed Position）的方式，“漂浮”在页面内容的上方，这样它就不会对下方的布局，产生任何影响。

好了，工程师。现在，你已经掌握了识别并“逮捕”这四大“布局扰乱者”的全部技能。你学会了如何给图片“定尺寸”，为广告“预留席位”，为字体“调整姿态”，以及为动态内容“规划空间”。

你已经征服了谷歌“核心网页指标”中的两大高峰——LCP和CLS。你的网站，现在不仅拥有了“开场即爆炸”的速度，更拥有了“稳如泰山”的浏览体验。

我们为期四周、内容丰富的“网站运维与优化”学习计划，到这里，关于核心技术的部分，也就全部结束了。