css - Bootstrap 4 网格的累积布局移位

Question

在使用 Bootstrap (4.5) 网格进行两列布局并更改列顺序时，我遇到了高 CLS(内容布局移位)问题。
CLS是 Core Web Vital 指标。基本上，当页面加载时网页的部分正在移动时，Google 会发现问题。据说这个指标会影响 SEO。
在高分辨率上，我的布局由两列组成。右侧为主要内容，左侧为侧边栏。在较低分辨率下，侧边栏内容被推到主要内容下方。所以 HTML 看起来像这样:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8 order-lg-2">
        </div>
        <div class="col-lg-4 order-lg-1">
        </div> 
    </div> 
</div>

问题是页面在桌面上呈现的短暂时刻，主要内容出现在左侧，然后几毫秒后它转移到右侧的正确位置。对于简单的页面(使用简单的 DOM 或没有外部资源)，这种转变是不可察觉的。
我准备了一个 example of such page . ( source code is on github)。为了测量 CLS，我在 Chrome 中使用 Lighthouse。在我的情况下，当我刷新页面时，我可以看到列在移动，并且 Lighthouse 通知我 CLS 值为 0.326。结果可能取决于渲染资源，因此您可能会得到不同的结果。不过好像 Google Page Insight给出类似的结果:

无论如何，有没有办法在页面呈现时避免这种转变？

Answer 1

似乎问题与 flexbox 或 bootstrap 更相关。事实证明，该问题是由过早渲染引起的。 Chrome 的解析器“产生”(因此它会触发渲染):

读取 65536 字节数据后，

遇到<script>之后阅读 50 个“ token ”(我认为基本上是 html 标签)后的标签。

我提供的示例显示了第一种情况(但实际上我的真实网站经历了 CLS，因为第二种情况)。这两个案例都提交了与它们相关的“错误”: 1130290和 1041006 .
所以问题的答案是希望“错误”能够得到解决。同时根据实际原因，您可以限制文件大小或删除 <script>标签。