渲染阻塞和 CSS
Render blocking and CSS
我想这已经被问过一次又一次了，但我还没有看到我正在寻找的答案。
我正在使用 HTML 文件和 CSS 文件做一些简单的测试，试图阻止页面呈现阻止 CSS，运行 网站通过页面洞察力( google )
现在我看到了这样的答案：
<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">
对于 google 字体，我都很好！但是对于页面的主要样式来说，我认为看到一个没有样式的页面然后突然加载它们并不是一个好的用户体验。
显然，您可以通过将所有样式粘贴为内联样式来消除 CSS 的任何阻塞，但我再次认为这不是一个好的做法，您正在将所有样式输出到 HTML 页面而不是通过样式 sheet 加载它们。
我见过网站实际上是这样加载样式的：
<link rel='stylesheet' id='main-css' href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />
Heres一个link到page insight speed test上了。我知道该站点是 运行 wordpress。如果您查看页面源代码，它使用的与我上面使用的完全相同。
而且它们根本不是渲染阻塞...怎么办？
我在 https 上，我正在使用 cloudflare，我的风格 sheet 被压缩了，只有大约 24 字节 ，我仍然遇到渲染阻塞。
- 为什么？
- 如何避免？
作为外部请求加载的CSS总是渲染阻塞，你无法避免。 pagespeed insights 的建议是在加载内容之前不要执行任何 css 请求，为了避免无样式的效果，他们建议您在 CSS 之前内联显示内容所需的内容折叠.
您示例中的页面正是这样做的，它们内嵌了一些 css 内容（检查源代码并搜索 style 标记），然后，当加载内容时，它们添加javascript.
的外部样式表
综上所述，这是一个建议，如果您对页面的性能感到满意，可以忽略它，如果您想遵循建议，您可以应用一些技术以自动化的方式实现这一点。
一如既往，在 css-tricks 中，您很好地介绍了 post 这些技巧：https://css-tricks.com/authoring-critical-fold-css/
Google PageSpeed 见解的关键是首屏呈现阻止。如果您检查您链接的网站作为您的页面速度测试参考，没有严格的内联样式 - 你是对的。但是，他们在 <head> 中有一个 <style>...</style> 块，用于设置首屏内容的所有最重要的样式。这意味着这些样式会立即呈现，所有其他支持样式将很快加载 - 但您的访问者（和 Google PageSpeed）不会注意到差异。
我想这已经被问过一次又一次了，但我还没有看到我正在寻找的答案。
我正在使用 HTML 文件和 CSS 文件做一些简单的测试，试图阻止页面呈现阻止 CSS，运行 网站通过页面洞察力( google )
现在我看到了这样的答案：
<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">
对于 google 字体，我都很好！但是对于页面的主要样式来说，我认为看到一个没有样式的页面然后突然加载它们并不是一个好的用户体验。
显然，您可以通过将所有样式粘贴为内联样式来消除 CSS 的任何阻塞，但我再次认为这不是一个好的做法，您正在将所有样式输出到 HTML 页面而不是通过样式 sheet 加载它们。
我见过网站实际上是这样加载样式的：
<link rel='stylesheet' id='main-css' href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />
Heres一个link到page insight speed test上了。我知道该站点是 运行 wordpress。如果您查看页面源代码，它使用的与我上面使用的完全相同。
而且它们根本不是渲染阻塞...怎么办？
我在 https 上，我正在使用 cloudflare，我的风格 sheet 被压缩了，只有大约 24 字节 ，我仍然遇到渲染阻塞。
- 为什么？
- 如何避免？
作为外部请求加载的CSS总是渲染阻塞，你无法避免。 pagespeed insights 的建议是在加载内容之前不要执行任何 css 请求，为了避免无样式的效果，他们建议您在 CSS 之前内联显示内容所需的内容折叠.
您示例中的页面正是这样做的，它们内嵌了一些 css 内容（检查源代码并搜索 style 标记），然后，当加载内容时，它们添加javascript.
综上所述，这是一个建议，如果您对页面的性能感到满意，可以忽略它，如果您想遵循建议，您可以应用一些技术以自动化的方式实现这一点。
一如既往，在 css-tricks 中，您很好地介绍了 post 这些技巧：https://css-tricks.com/authoring-critical-fold-css/
Google PageSpeed 见解的关键是首屏呈现阻止。如果您检查您链接的网站作为您的页面速度测试参考，没有严格的内联样式 - 你是对的。但是，他们在 <head> 中有一个 <style>...</style> 块，用于设置首屏内容的所有最重要的样式。这意味着这些样式会立即呈现，所有其他支持样式将很快加载 - 但您的访问者（和 Google PageSpeed）不会注意到差异。