我通过内容可见性将我的网站速度提高了 28 毫秒🤓

你可能会想，28毫秒算什么？如果你是提速网速的忠实拥护者，并且在Eleventy的speedlify仪表盘上获得满分，那这可真是太快了！

并不是说我做得不好，就像下面的截图所示。我只是想拿到满分100分，充分发挥我的网站的潜力。

利用内容可见性

我之前读过这个 CSS 属性，但一直没时间实现和测试。
直到今天，我们来看看它到底能做什么。

内容可见性有三个我们可以使用的值：

• visible（没有影响，基本和以前一样）
• hidden（display: none 和 visibility: hidden 的混合，它从 display hidden 开始，然后变为 visibility hidden）
• auto（这就是我们正在看的。只有浏览器需要时它才会渲染这个元素！）

那么我们如何将它添加到元素中？

.element {
    content-visibility:auto;
}

我已将其添加到我的主页上的文章列表和页脚元素中。

内容可见性之前

为了让您更好地理解，我在这些更改之前做了灯塔测试。

但更重要的是我们可以检查总时间的实际跟踪。

添加内容可见性后

然后，在将内容可见性添加到这两个元素后，我重新运行了测试。

并跟踪：

这意味着它原来是 443ms，现在是 415ms，也就是说胜利 +28ms！

结论：不添加“1”也没什么坏处auto。它只会对你的网站有益，即使数字很小也很重要。

使子页面更快

我甚至content-visibility在帖子页面上添加了我的，其中主要内容设置为auto。

以下屏幕截图是渲染之前的：

这是渲染后的效果：

正如你所见，它总体上提高了我的分数。
而且添加后，content-visibility交互时间缩短了 1.1 秒。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。