我想这已经被问过一次又一次了，但我还没有看到我正在寻找的答案。
我正在用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' />
这里有一个链接，指向页面上的洞察速度测试。我知道该网站正在运行wordpress。如果您查看页面源代码，它的使用方式与我上面使用的完全相同。
而且它们根本不是渲染阻塞...如何？
我在 https 上使用 cloudflare，我的样式表被压缩，只有大约 24 字节，我仍然得到渲染阻塞。
- 为什么？
- 如何避免？
作为外部请求加载的 CSS 始终是渲染阻塞，您无法避免它。关于pagespeed见解的建议是，在加载内容之前不要执行任何css请求，以避免无样式的效果，他们建议您在折叠之前内联显示内容所需的CSS。
您的示例上的页面正是这样做的，它们内联了一些 css 内容(检查源代码并搜索style标签(，然后，当内容加载时，他们添加一个带有 javascript 的外部样式表。
综上所述，这是一个建议，如果您对页面的性能感到满意，可以忽略它，如果您想遵循该建议，您可以应用一些技术以自动化方式实现这一目标。
与往常一样，在css技巧中，您对这些技术有一个很好的介绍帖子：https://css-tricks.com/authoring-critical-fold-css/
Google PageSpeed洞察的关键是首屏渲染阻塞。如果您检查您链接的网站作为页面速度测试参考，则没有严格的内联样式 - 您是对的。但是，他们的<head>内部有一个<style>...</style>块，可以为首屏内容设置所有最重要的样式。这意味着这些样式会立即呈现，所有其他支持样式将在不久后加载 - 但您的访问者(和Google PageSpeed(不会注意到差异。