Astra 主题优化 CLS 分数的方法

CLS（Cumulative Layout Shift，累计布局偏移）是衡量网页加载稳定性的关键指标。较低的 CLS 值有助于提升页面加载表现，并在搜索结果中获得更好的位置。Astra 主题提供了多项针对 CLS 问题的优化方案，帮助网站提升页面结构的稳定性。

什么是 CLS

CLS 表示网页在加载过程中，视觉元素是否发生意外移动。例如图片、文字或按钮加载速度不一致，导致页面内容上下跳动，这种现象会增加 CLS 分数。分数越低，代表页面越稳定。

SVG logo 无固定高度

移动端头部显示不稳定

图片未设置尺寸

内容动态加载

iframe 无定义大小

传统字体加载会远程调用 Google 的服务器，存在延迟。Astra 提供本地加载功能：

路径：Astra > 设置 > 性能，启用“本地加载 Google Fonts”

启用后，字体资源储存在站点本地，减少加载时的抖动和等待。

字体预加载功能会让浏览器优先处理关键字体，避免页面初始渲染时出现文字延迟，减少排版突变现象。

将 Google 字体存储在本地后，无需远程请求，字体加载速度更快，有助于获得理想的 CLS 零分成绩。

SVG 图像本身不包含高度数据。如果未设置，加载后可能导致头部位置发生变化。Astra 会自动识别并为 logo 设置高度，保持页面头部稳定。

部分页面在移动设备加载时，头部区域会短暂闪动。Astra 采用静态样式和响应断点方案，避免这种情况发生，提升整体流畅度。

未设定尺寸的图片在加载时容易引发位置错乱。在使用 Astra 构建页面时，可在图像模块中设置宽度比例或手动输入像素值，确保图像在加载前就预留好空间。

常见的通知栏、订阅提示或推荐区块如果在页面中部或顶部插入，会因为延迟加载而导致内容跳动。建议将这类动态区域放置在页面底部，减少布局变动。

嵌入的内容如视频、地图、表单等 iframe 元素，如果没有预设尺寸，在加载过程中容易让页面结构发生变化。为每一个 iframe 添加具体宽高值，可以稳定其在页面中的占位效果。

优化 CLS 需要从字体加载、图像尺寸、头部结构、嵌入内容等多个方面同步处理。Astra 在主题设置中提供了相关功能模块，减少页面加载过程中元素移动带来的视觉干扰。保持页面结构清晰有序，有助于提升整体页面质量和访问效率。