css - 渲染阻塞和 CSS

Question

我想这已被多次询问，但我还没有看到我正在寻找的答案。

我用 HTML 文件和 CSS 文件做了一些简单的测试，试图阻止页面渲染阻止 CSS，通过页面洞察力运行网站(谷歌)

现在我看到了这样的答案:

<link rel="stylesheet" href="style.20180530.css?ver=1.0" media="none" onload="if(media!='all')media='all'">

我见过这样的答案:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="preload" onload="this.rel='stylesheet';this.removeAttribute('onload');" as="style">

对于谷歌字体，我都很好!但是对于页面的主要样式来说，我认为看到一个没有样式的页面然后突然加载它们并不是一个好的用户体验。

显然，您可以通过将所有样式粘贴为内联样式来消除对 CSS 的任何阻塞，但我再次认为这不是好的做法，您将所有样式输出到 HTML 页面而不是通过样式表加载它们.

我见过网站实际上是这样加载样式的:

<link rel='stylesheet' id='main-css'  href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />

Heres页面洞察力速度测试的链接。我知道该网站正在运行 wordpress。如果您查看页面源代码，它使用的与我上面使用的完全相同。

而且它们根本不是渲染阻塞...如何？

我在 https 上，我正在使用 cloudflare，我的样式表被压缩并且只有大约 24bytes 并且我仍然遇到渲染阻塞。

1. 为什么？
2. 如何避免？

Answer 1

作为外部请求加载的 CSS 总是渲染阻塞，你无法避免。 pagespeed insights 的建议是在加载内容之前不要执行任何 css 请求，为了避免无样式的效果，他们建议您在折叠之前内联显示内容所需的 CSS。

您示例中的页面正是这样做的，它们内嵌了一些 css 内容(检查源代码并搜索 style 标记)，然后，当加载内容时，它们添加了一个外部样式表使用 JavaScript。

总而言之，这是一个建议，如果您对页面的性能感到满意，可以忽略它，如果您想遵循建议，可以应用一些技术以自动化的方式实现这一点。

一如既往，在 css-tricks 中，您有一篇关于这些技术的精彩介绍:https://css-tricks.com/authoring-critical-fold-css/