根据德勤的说法：
“61% 的客户会停止从某个公 牙医数据库 司购买产品，因为竞争对手提供了更好的体验。”
最令人沮丧的事情之一是由于布 局变化而导致的误点击，它会立即让访问者离开。
布局移位示例
那么，CLS 优化工具箱中：
1. 微调后备字体
为了进一步减少意外的布局转变，您可以使用字体描述符使后备字体更好地匹配网络字体。
这可以通过使用size-adjust、ascent-override、descent-override来实现：
size-adjust缩放后备字体以更好地匹配 Web 字体的 x 高度，有助于减少两者之间切换时的视觉差异。
ascent-override允许您为后备字体指定自定义上升指标，使其高度与 Web 字体的高度更加紧密地对齐，以最大限度地减少布局偏移。
descent-override为后备字体设置自定义 业过剩库存是指个月内可 下降指标，确保其下降与 Web 字体的下降更准确地对齐，以进一步减少布局偏移。
后备字体
2. 不要延迟加载首屏 CSS
某些主题的典型模式是将部分 CSS 分解为特定部分的文件，然后在该部分内添加 CSS 链接。
这会导致浏览器将 CSS 视为渲染阻塞，进而导致无样式或半样式的闪烁。正如您可能猜到的，这通常也会导致布局偏移。
为了解决这个问题，请使 加拿大电子邮件线索c 用WebPageTest之类的工具来分析和简化你的代码。
3. 为延迟加载的图像保留空间
延迟加载屏幕外图像是大幅提升页面实际和感知性能的最佳方法之一。
但是，为了在快速初始加载和无缝用户体验之间取得适当的平衡，您需要为所有延迟加载的图像保留足够的空间。
为什么？
一般来说，访问者会浏览页面，快速向下滚动浏览内容。
如果用户在图像加载之前快速滚动，其周围的内容可能会发生变化。
如何改善与下一次绘画的交互
2024 年 3 月，INP 正式取代 FID，近 60 万个网站的核心网络生命力指标从通过变为未通过。
这清楚地表明，新的响应能力指标要求网站所有者和网络开发人员对他们的网络性能优化进行微调。
如何调试 INP？
使用 Google 的长动画帧 (LoAF) API 来识别影响您的 INP 分数的慢动画帧。
了解更多 →
这引出了我们最后三个核心网络生命力策略：
1.减少DOM大小
DOM 大小是指 DOM 树中的元素数量。较大的 DOM 大小会对网络性能产生负面影响，因为浏览器必须处理、渲染和更新更复杂的结构。
DOM 树
减少网站的 DOM 大小是基本的INP 优化技术之一。
但是，以下三种方法扩展了我们在博客中已经提到的一些策略：
附加多个元素时使用文档片段
不要逐个将每个新元素添加到 DOM，而是使用文档片段作为临时容器。此方法允许您将多个更改分组，然后一次性将它们添加到 DOM。这样做可以减少页面重新渲染的次数，从而使流程更快、更高效。
文档片段示例
文档片段示例
通过简化和限制选择器来降低 CSS 选择器的复杂性
复杂的 CSS 选择器会显著减慢渲染过程，因为浏览器必须针对 DOM 中的每个元素评估每个选择器。
通过简化选择器并限制其深度和特异性，浏览器可以更快地将样式与元素匹配。
这种复杂性的降低加快了渲染速度并使 CSS 更易于维护和调试。
利用屏幕外元素的内容可见性来减少渲染工作
CSS 中的内容可见性属性允许开发人员指定某些屏幕外元素在进入视口之前不应被渲染。
应用 content-visibility: auto 后，浏览器可以优化渲染工作负载。通过推迟渲染不可见内容，content-visibility 可显著缩短初始加载时间并减少主线程的工作负载，从而加快渲染速度并提高网页响应能力。
