我想这已经被一次又一次地问过，但我还没有看到我正在寻找的答案。
我正在使用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 ，我仍然会被渲染阻止。
答案 0 :(得分：1)
作为外部请求加载的CSS总是呈现阻止，您无法避免。关于pagespeed见解的建议是，在加载内容之前不要执行任何css请求，以避免无格式效果，他们建议您在折叠之前内联显示内容所需的CSS。
您的示例中的页面正是如此，它们内联了一些css内容（检查源代码并搜索style标记），然后，在加载内容时，他们添加了一个带有javascript的外部样式表。
所有这些都是建议，如果您对页面的性能感到满意，可以忽略它，如果您想遵循建议，您可以应用一些技术以自动化方式实现这一目标。
与往常一样，在css-tricks中你会对这些技巧有一个很好的介绍：https://css-tricks.com/authoring-critical-fold-css/
答案 1 :(得分：0)
Google PageSpeed洞察力的关键是首屏渲染阻止功能。如果您检查链接的网站作为页面速度测试参考，则没有严格的内联样式 - 您是正确的。但是，他们在<style>...</style>内部有一个<head>块，可以为所有内容设置最重要的内容。这意味着这些样式会立即呈现，所有其他支持样式将很快加载 - 但您的访问者（和Google PageSpeed）将不会注意到差异。