我们正在尝试将CSS内联到网站<head>中以减少页面加载时间。因为我们使用的CMS允许非常灵活的内容管理，所以只能内联关键＆＃39; CSS不是一个选项，因为我们无法在编译时知道将使用什么标记（并因此在首屏上显示＆＃39;）晚些时候。
因此，我们正在研究将main.css文件的整个内容内联到主页<head>然后预取main.css的选项，以便它是当用户导航到网站上的另一个页面时，缓存中可用。
这会减少网站最常见入口点的页面加载时间，同时仍然可以为后续页面访问缓存CSS。
我想我有几个问题，但他们感觉内在联系，所以我想把它们都包括在这里，而不是将它们分成单独的SO问题。
将main.css的全部内容嵌入主页<head>是否有任何弊端？我主要担心的是文件大小，但是当gzip压缩时，使用/不使用内联CSS的差异非常小，无论哪种方式，都必须在html文件或CSS文件中的某些时候下载样式。 / p>
预取实际文件的最佳时机是什么时候？实际上，需要考虑的是预取是否会在解析时触发对服务器的同步请求，这将计入并行连接的限制，从而可能阻止其他请求。如果是这样，我想<link>应该位于文档的底部，或者异步写入DOM。如果没有，我认为在<link rel="stylesheet">中居住<head>的地方最合适。
答案 0 :(得分：1)
<强> TL; DR：
将main.css转换为base64并添加到主页的<head>。然后在正文关闭代码main.css
</body> 添加预取链接
这个答案可能有点非正统，但是，这里有。
是的，你可以完全按照你的描述做;但是，您将在主页上两次下载CSS。
<强>考虑：
还有兴趣吗？好的
main.css文件css清洁工具压缩和优化 css内容main.css文件的副本main.css文件转换为base64 base64字符串将以下内容添加到文档的<head>
<link rel="stylesheet" type="text/css" href="data:text/css;base64,###" />
为您的base64文件添加main.css字符串，代替"###"
上面代码的结尾
这包括在您的主页上内联CSS。
如果您正确执行此操作，
您可以为主页加载整个css，而无需任何其他请求。 它将成为主页的一部分 html
<强>考虑：
浏览器不会缓存此CSS 的大块 ，除非您的
服务器配置为提供缓存的html页面
只有这样才会将其作为主页html的一部分进行缓存。
只会为主页缓存。 此CSS块无用
任何后续页面
现在，对于后续页面
main.css文件rel="prefetch"链接 - - 链接到该文件。这就是主页的html应该是这样的：
<head>
<link rel="stylesheet" type="text/css" href="data:text/css;base64,###" />
/* stuff */
</head>
<body>
/* stuff */
<link rel="prefetch" href="main.css">
</body>
结论：
如果做得正确;浏览器将：
css。Prefetch 可缓存 css文件用于后续页面 加分：
您可以更进一步：将您拥有的任何字体文件更改为base64，然后将其插入main.css文件，然后再将其转换为{{ 1}}
这将进一步减少请求数量。
<强>代价：
base64并且几乎支持它
93％的浏览器符合Can I Use 最后的话：
.woff Gzip文件服务缩小。