消除 CSS 渲染阻塞，最好的方法

Question

我想消除我网站上的渲染阻塞，但我做不到。 我不使用外部 css 文件或字体，只使用一个大 css 文件。 当我从头 AllcontentCSS 中的 css 文件中复制所有内容时，渲染阻止从 Google Page Insights 中消失 有没有办法消除渲染阻塞并在头部包含带有链接的 css 文件，而不是复制样式标签中的所有 css 或者将 css 插入 body 标签中？

Answer 1

您最有可能在寻找：

<link rel="stylesheet" href="yourFile.css" media="none" onload="if(media!='all')media='all'">

但是，在继续之前，请阅读以下资源，详细介绍该技术及其局限性：

• initial article by Keith Clark
• follow up 泰勒亨特。

确保您还浏览了 Taylor Hunt 提供的链接。您可能想使用来自 Filament Group 的 loadCSS function/polyfill。

但请注意，此技术会导致您的页面出现 FOUC。你应该把你的 CSS 分成两部分：

• 布局基础（正常加载 - 渲染阻塞），
• 异步样式（加载异步）。