如何解决Google Funding Choices引发的CLS数值过高问题

问题核心为页面渲染初期未给Google Funding Choices的logo预留匹配尺寸的空间，logo异步加载完成后突然插入/撑开容器触发布局偏移，可通过以下方案解决：
CLS的合格阈值为0.1，你当前0.31的数值已超出合格线3倍，优化后即可满足Core Web Vitals要求

1. 为容器预占固定空间 #

找到你站点中Funding Choices的挂载父容器，给它设置匹配logo实际尺寸的最小宽高，避免元素加载后撑开容器导致布局偏移，CSS示例如下：

/* 将选择器替换为你站点内Funding Choices实际的父容器选择器 */
.funding-choices-wrapper {
  min-height: 60px; /* 替换为你的logo加载完成后的实际高度 */
  min-width: 200px; /* 替换为你的logo加载完成后的实际宽度 */
  margin: 0;
  padding: 0;
}

2. 启用资源预加载配置 #

在Funding Choices的初始化代码中添加preload: true参数，让logo资源更早被加载，避免在页面渲染中后期才插入元素触发偏移。

3. 固定logo元素的宽高比 #

给logo元素本身设置aspect-ratio属性，提前占住对应比例的空间，哪怕图片还未加载完成也不会导致布局变化，CSS示例如下：

/* 将选择器替换为Funding Choices logo的实际元素选择器 */
.google-funding-logo {
  aspect-ratio: 4/1; /* 替换为你的logo实际的宽高比 */
  width: 100%;
  height: auto;
}

4. 延后组件加载时机 #

如果以上方案都不生效，可以将Funding Choices的加载时机推迟到页面核心内容渲染完成后，此时核心布局已经固定，后续插入的元素不会影响到核心内容的CLS计算。

内容的提问来源于stack exchange，提问作者Peter Minárik