延迟非关键导致高 CLS

Question

我推迟了非关键的 CSS/JS 并预加载了网站的基本 CSS。PageSpeed Insights上的每个实验室数据都变得更好。“最大内容绘制”和“累积布局变化”除外。特别是，CLS 从 0.002 增加到 1.148！

网站上的图像设置为background-image我认为不会出现“图像没有尺寸”的问题。我也尝试使用 修复字体font-display，但 CLS 仍然相同。

我可以使用其他任何技术来优化 CLS 吗？

Answer 1

CLS优化

我的回答解决了您问题的第二部分，即有关可用于优化 CLS 的技术。

从广义上讲，我的解决方案隐藏了 CSS 中的有问题的元素，并让它们在 javascript 中再次可见。布局移位是一个问题，并且会影响 CLS 分数，前提是它对用户可见；当它不可见时，它不会对 CLS 分数产生影响。具体实现如下。

首先，创建一个“antiCls”类并将其添加到您的自定义 CSS（在 HEAD 元素中），如下所示：

.antiCls { 
    visibility: hidden;
}

接下来，将以下代码添加到自定义 JS 文件的末尾（位于 BODY 元素的底部）。一、JQUERY版本：

$(document).ready(function(){

...
existing jquery code
...

    $(window).on("load", function() 
                                                
        $('.antiCls').css("visibility", "visible"); 

    });
});

这是普通的 javascript 版本，没有 jquery：

var cls = document.getElementsByClassName('antiCls'),
    i = cls.length;
    
for (i = 0; i < cls.length; i++) {
    cls[i].style.visibility = "visible";
    } 

接下来，您需要确定将应用新的“antiCls”类的元素。在该页面的 Google“PageSpeed Insights”下，查看“诊断”部分，然后展开子标题“避免较大的布局变化”。在那里，您会发现列出了有问题的（非零）DOM 元素：这些元素可能是图像，但其他元素（包括整个 div）也可能在那里列出。

对于图像，将新的 antiCls 类应用于父 div，而不是图像本身。对于在一个父 div 下分组在一起的元素，请将新的 antiCls 类应用于父 div。需要进行一些实验，但使用此技术通常可以轻松获得零的 CLS 分数。

CLS 分数是否应该为零是另一个问题。为了有效，antiCls 类需要应用于“折叠上方”，即应用于出现在视口中而不滚动的元素。重要的是，至少有一些元素保留在未应用antiCls 类的页面顶部：这些元素通常包括徽标，可能还包括一些导航。这样，向用户呈现某些关键内容（“首次内容绘制”）的速度就不会受到负面影响。

在我自己的测试中，我发现这种 CLS 优化技术对页面显示的速度没有明显的影响；这意味着可以以几乎为零的性能成本实现低 CLS 分数或零 CLS 分数。