今年 5 月将有 Google 更新，其中 CLS（累积布局转移）将成为重要的排名因素。在我们的网站上，我们嵌入了一些 iframe（主要是实时行情代码等）。在某些时候，我们对这些 iframe 使用固定的高度和宽度值，但这不是最佳解决方案，因为这些 iframe 的内容会定期更改。当它是一个显示体育赛事比赛日数据的 iframe 时，要么当天只有一场比赛时有大量空白，要么当天有 9 场比赛时被切断。因此，我们使用 pym 脚本实现了 iframe 调整大小解决方案。这使得网站看起来更好并且可用性更高。有些 iframe 更具交互性，并且具有选项卡导航等，并且当前的 iframe 大小调整也适用于此 - 然后高度也会调整。由于这是由用户交互引起的，因此谷歌不应该对此进行惩罚。嵌入和实现工作如下：http://blog.apps.npr.org/pym.js/
我做了一些研究，但不幸的是找不到一个解决方案来保持可用性但摆脱 CLS。有谁有一些提示、有用的链接或知道如何解决这个问题？
这是一个老问题，但我们最近遇到了同样的问题，我们的性能指标被降低了。
不幸的是，当您使用 iFrame 时，没有一种简单且无成本的方法可以消除布局变化，这背后有充分的理由。但仍然有一些技巧可以让它发挥作用。
如果您知道 iFrame 的内容，您可以在服务器上预先计算其大小并将高度属性设置为适当的值。
将 iFrame 高度属性设置为某个合理的值以使内容可见。在这种情况下，用户必须在 iFrame 内滚动才能看到完整内容。
做出用户期望的布局转变。
关于最后一个选项。如果页面布局变化发生在用户交互（例如点击）后 500 毫秒内，则将被视为预期变化，并且不会破坏您的 CLS 分数。
因此，为了使其正常工作，您将 iFrame 包装成一个具有固定高度的块，并将“溢出”设置为“隐藏”。此外，您还添加“展开”按钮和一滴 JS 将包装器的高度设置为“自动”。
在这种情况下，“展开”按钮单击将被计为用户交互，并且以下包装器高度更改不会破坏页面 CLS 分数。