css - 如何推迟非关键样式?

我正在使用 Chrome DevTools 来审核我的网站。在其中一个网页中,它说“资源正在阻止页面的第一次绘制。考虑内联交付关键的 JS/CSS 并推迟所有非关键的 JS/样式。了解更多。”。我尝试单击“了解更多”并转到这篇文章 https://developers.google.com/web/tools/lighthouse/audits/blocking-resources ,其中说对于javascript,可以使用defer/async,对于css,可以定义媒体类型。

但是,如果我的 css 不是关键的,但所有媒体类型都需要它怎么办。那么如何延迟这样的css呢?

谢谢

最佳答案

您可以将关键的 css 放在页面的头部,它将在正文部分之前加载,因为 css 样式表是阻塞的。

并且,您可以将非关键 css 放在主体的末尾,它将在 DOM 的所有元素之后加载。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/critical.css">
</head>
<body>
    ...
    <link rel="stylesheet" href="/nonCritical.css">
</body> ...

https://stackoverflow.com/questions/54922349/

相关文章:

python - 我想在我的第一个 python 环境中从第二个 python 环境调用函数。这可能

javascript - OpenRouteService Directions api 用法

python - Matplotlib png 输出在 reportlab 的 pdf 中出现 "b

python - PyCharm 导航到库源 - Typeshed Stubs\unittest 和

android-studio - adb.exe start-server failed——必要时手

neo4j - 是否可以为在 UNWIND 期间创建的每个节点动态设置可变节点名称?

vhdl - 是否可以为输出端口提供默认值,以允许在不需要端口的情况下调整大小?

vuejs2 - 为什么激活的生命周期钩子(Hook)在第一次访问时没有被调用

python - 以编程方式将图片导入 Apple Photos 并修改 Exif 数据

reactjs - 我如何将组件引用传递给 redux 存储