当您在外部文件中阻止CSS时，Google Pagespeed会抱怨。在HTTP / 1中这可能是有道理的，但现在使用HTTP / 2呢？
如果您内联关键CSS（在首屏之上），那么在文档渲染之前，所有字节仍然需要下载，解析和其他所有内容。
使用HTTP / 2，不需要进行另一个连接，因为可以重复使用它，因此这不是开销。此外，通过服务器推送，您甚至可以在请求之前推送CSS文件。
所以......推荐关键的CSS仍然是推荐的东西吗？
我同意在重型网站中，您可能不想下载所有CSS。例如，如果您正在访问图库，您只需要gallery.css，而不是profile.css，而不是forum.css等。但是这可以通过块和其他技术进行管理（并且仍然使用外部css文件，无需内联它们）
内联也使CSS无法缓存。
我遗失了什么？
这与可能重复的问题无关。将此标记为重复的人不知道什么是关键的CSS，或者甚至没有读过这个问题。
答案 0 :(得分：1)
是的它仍然有用。很多。
当您下载HTML时，您仍然需要等待下载，然后处理它，然后再发出CSS文件请求并等待下载。
虽然在HTTP / 2下下载额外资源的速度更快，但在使用时需要下载大量额外资源时没有太大的瓶颈，因此仍然无法请求CSS文件直到HTML文件已下载并已处理。此外，CSS文件通常由浏览器划分优先级，因为它会呈现阻塞，因此通常是请求的第一个资源之一，这意味着避免HTTP / 2的行头阻塞对CSS资源不利。
当HTTP / 2推送变得更加普遍时，它可能没有那么大的影响，因为对HTML页面的请求也可以推送所需的CSS文件，但这增加了复杂性并且仍然存在关于它将如何工作的一些问题（例如，如果浏览器已经有CSS文件，那么服务器应该知道不要推送它。）
如果您想了解更多详细信息（这是在HTTP / 2网站上），我写了一篇关于此主题的博客文章：https://www.tunetheweb.com/blog/inlining-css-is-not-for-me/。我仍然不是这个过程的忠实粉丝，正如我在那篇文章中解释的那样......
答案 1 :(得分：1)
只需使用HTTP / 2 Push即可确保浏览器尽早获取CSS。
最坏的情况HTTP / 2推送会多次推送资源，但浏览器会重置推送的流，他们认为这些流在缓存中是新鲜的（使用etags）。所以最糟糕的情况是HTTP / 2推送仍然比内联略好。
HTTP / 2 Push的缓存问题在很大程度上使用缓存摘要polyfill进行衰减（直到浏览器中可用的东西为止）：
我们在生产中使用它，我们非常满意。
作为一般说明，请自动优化建议，直到完成向HTTP / 2的转换。
答案 2 :(得分：1)
我遗失了什么？
对于现代浏览器和http 2，你是正确的。对于移动和旧浏览器，对于gprs或其他慢速高延迟连接 - 不完全一样。在某些情况下，您可以通过内联.css获得更少文档下载和提高浏览器解析速度的优势。另外，如果你动态添加.css并出现问题，内联.css仍然有效，同样适合任何可以在html中内联的资源。
答案 3 :(得分：0)
它并不是真的要下载所有文件，它是关于下载这些文件需要多长时间。
如果您正在使用关键CSS，则会直接显示CSS（设计），因此它首先下载CSS文件的速度要快得多，因为CSS直接位于您页面的<head>中，因此页面直接显示阻止资源（例如下载大的CSS文件）。
如果您的CSS文件大小为示例5MB，则浏览器首先必须下载此文件，直到显示“设计”。