尽管被延迟，但非关键 CSS 在 FCP 之前加载答案

【问题标题】：Non-critical CSS is loaded before FCP despite being deferred尽管被延迟，但非关键 CSS 在 FCP 之前加载
【发布时间】：2021-12-30 03:32:36
【问题描述】：

我有一个网站，我试图推迟加载非关键样式表。

根据各种在线建议，我正在使用以下行来实现此目的：

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

当我在 <header> 的末尾添加它并通过 Lighthouse 查看结果时，样式表始终在 FCP（首次内容绘制）之前加载，尽管 various articles 声明不应该是这种情况。

如果我尝试在我的部分末尾插入同一行，我会得到“预期”的结果，因为我的 CSS 是在 FCP 之后加载的。但是，我的理解是这种插入形式是无效的。

我的 css 插入是否需要以某种方式进行修改才能在插入到标头时起作用？

【问题讨论】：

【解决方案1】：

FCP 与 onload 事件不同。在加载缓慢的标题图像的情况下，FCP 可能在 onload 事件之后。把这个 CSS 文件移到页脚怎么样？

【讨论】：

这也是我的想法，因为它似乎解决了我遇到的问题。问题主要是我的理解是在
部分（即技术上在部分中放置具有延迟样式表的标签被认为是“不好的做法”。但我不确定是否有这样做有什么实际的负面后果吗？
我觉得放在页脚就好了。