什么是 CLS？怎么解决CLS 谷歌优化
新闻 2024-9-21编辑：深圳网站建设阅读（）标签：
CLS
谷歌优化
ＣLS（累积布局偏移【yí】）是 Google 衡【héng】量网页加载【zǎi】和交互【hù】时发生的布局【jú】偏移总【zǒng】量，即意外移动网页主要内容的布局偏移数量。这些变【biàn】化会影响用户正确阅读内容和与页面交【jiāo】互【hù】的能力【lì】。Google 建议 CLS 分数为 0.1 或【huò】更低。 这个因素和其他两【liǎng】个核心 Web 要素【sù】，即首次【cì】输【shū】入延迟(FID) 和最大【dà】内【nèi】容绘【huì】制【zhì】(LCP)一起【qǐ】判断整【zhěng】体页【yè】面体验。
CLS简点【diǎn】的的理解就是位移错位【wèi】．这【zhè】样更容易【yì】理解【jiě】，就是网【wǎng】页错位了【le】，一般【bān】图片没有指定大小，无尺寸的广告、嵌入和 iFrame容易引起，良好的 CLS：低于 0.1,需要改进 CLS：介于 0.10 和 0.25 之间差 CLS：高于 0.25
什么是 CLS？
在【zài】一页上进行多次内容转换会导致【zhì】 CLS 分数更差。理【lǐ】想的【de】页面体验是具有【yǒu】最少 CLS 的页面【miàn】。
布局转换或内容转换是指页面【miàn】上的某些内【nèi】容在框架内的位【wèi】置发生明显【xiǎn】变【biàn】化【huà】的任何时【shí】候。
这可以是文本【běn】字体更改【gǎi】、图【tú】像加载缓慢【màn】以及在页面加载时【shí】移动页面【miàn】的弹出窗口等任【rèn】何内容。
以下是 CLS 数量不足的示例：
2021 年夏【xià】季，Google 确【què】认三个核心 Web 要素现在是【shì】页面体【tǐ】验排名因素【sù】的一部分。
因此，重【chóng】要的是要确【què】保您的网页【yè】的核心网络要【yào】素都【dōu】在【zài】以下 Google 认为【wéi】“良好”的范围内。
好 需要改进 差
LCP ≤2.5s ≤4s >4s
外国投资署 ≤100ms ≤300ms >300ms
CLS ≤0.1 ≤0.25 >0.25
如果您的生【shēng】命体征【zhēng】衡量在需求改善或【huò】较【jiào】差的范围【wéi】内，您的排名可能【néng】会受到【dào】影响，建议您【nín】解决该问题。
如何检查累积布局偏移
有【yǒu】很【hěn】多方法可【kě】以检查页面的累积布局偏移 CLS。您【nín】可以使用 Google 的工【gōng】具，例如【rú】Lighthouse或【huò】 Google Search Console 中的 Core Web Vitals 报告。
定义好的或差的 CLS
Google 官方将 CLS 分数定义为以下范围：
良好的 CLS：低于 0.10
需要改进 CLS：介于 0.10 和 0.25 之间
差 CLS：高于 0.25
什么导致 CLS 不佳？
如上所述，布局变化【huà】可能由【yóu】很多【duō】原因引【yǐn】起。最常【cháng】见的罪魁祸首是：
怎么解决CLS
没有尺寸的图像
无尺寸的广告、嵌入和 iFrame
动态注入的内容
导致FOIT/FOUT 的Web 字【zì】体（不可见文本闪【shǎn】烁【shuò】和无样【yàng】式文本闪烁）
什么导致了差的 CLS
所有这些原因【yīn】都存在于您页面的代【dài】码中，只需几分钟的【de】检查即可【kě】确定。
对于【yú】没有尺寸的图像和【hé】嵌入，只需识别这些图【tú】像，然后【hòu】将已知【zhī】尺寸添加到您【nín】的代【dài】码中将【jiāng】有助于避免布局【jú】偏移。如果你不知道
如何修复和避免布局偏移
要修复【fù】累积布局偏移，您首先【xiān】需要【yào】确定导【dǎo】致偏【piān】移的元素。
然后，您的开【kāi】发人员【yuán】可以采取多种措施【shī】来解决问题并优化【huà】页面【miàn】速度【dù】。
如何修复和避免布局偏移
Lighthouse 有一【yī】些【xiē】建议可以【yǐ】帮【bāng】助【zhù】您和/或您的开【kāi】发团队应对变化，例如：
避免非合成动画
确保文本在 webfont 加载期间保持可见
修复没有明确宽度和高度的图像元素
如何检查CLS
要优化 CLS，您需要了解导致转变的原因。
有两种方法可以查看确切的变化：
在【zài】 Lighthouse 的性能审计【jì】中使【shǐ】用【yòng】名为“避【bì】免大的布局偏移”的特别建议
使用跟踪
在这两种变体【tǐ】中，如【rú】果您【nín】通过 Lighthouse 启动性【xìng】能审计会【huì】很容易。
要打开 Lighthouse，请右【yòu】键单击网页【yè】上的任意位置并选【xuǎn】择“检查【chá】”。
避免大的布局变化
找到并【bìng】打开建议【yì】“避免大的布【bù】局变化”。如果【guǒ】在【zài】加载过程【chéng】中至少有一个【gè】任务转移，它在 Lighthouse Performance 审计中可用。只需向下滚动即可【kě】找到【dào】它。
如果您展开该项目，您可以检查每个元素的“CLS 贡献”。
例如，如果【guǒ】您看到一【yī】个元素【sù】的 CLS 贡献为 0.001，请【qǐng】不要担心，因为它【tā】不会【huì】真正损害用【yòng】户体验。
我【wǒ】们知道，Google 会将总移【yí】动量高达 0.010 的页【yè】面标记为“好”页【yè】面。
查看原始轨迹
要找出时间线中页【yè】面【miàn】的【de】哪个部分发生了变【biàn】化，您可以在【zài】 Lighthouse 中查看原始【shǐ】轨迹。
首先，单击 Lighthouse 报告中的 View Original Trace。这将【jiāng】打【dǎ】开性能选【xuǎn】项【xiàng】卡。
查看【kàn】体验【yàn】跟踪或 Web Vitals 跟踪，了解这【zhè】些转变发生的时间。
放大并查找布局【jú】偏移【yí】 (LS) 以查看页面的【de】哪个部【bù】分在加载期间进行了【le】这【zhè】些【xiē】偏移。
