Html 在我的页面中有效地加载CSS

这是我的问题

我正在用谷歌页面速度洞察分析我的页面。 它告诉我删除头部（浮动线上方）的css链接，因为它阻止了我的页面加载

现在，我的文档头部有一个简单的链接：

<link rel="stylesheet" media="all" href="http://mydomain.we/css/my.css" /> 
 </head>

我已尝试将链接行放在文档底部。就在这一页的末尾

<link rel="stylesheet" media="all" href="http://mydomain.we/css/my.css" /> 
</body> 

再次运行Insight

Insight result有两个选项卡。通过将css链接放置在文档的en处，我在移动选项卡上获得100%的分数。然而，我仍然在计算机部件上得到相同的消息，就好像无论我把它放在哪里，它仍然被加载到浮动线之上。我不明白，因为我可以看到页面在没有css的情况下加载了一小部分秒

所以我想知道加载css的最佳方式是什么

我应该在标题中放置样式标记吗

---

我应该在元素上添加样式标记吗 这可能是由于

media=all

导致的，因为它用于识别所有媒体，其中as

media=screen

用于台式机。我会先尝试使用

media=screen

，如果不起作用，试着一起去掉媒体标签

可能的重复：

您应该可以保持CSS的原样。我从未见过有人建议将CSS文件链接到头部以外的任何位置。GooglePage Insights标准并不意味着它是最好、最优化的方式，每个网站都是不同的

---

最快的方法是使用

…

甚至内联CSS。但这并不意味着这是最佳实践。如果它只是几行CSS，你可以选择<代码> <代码>方法，但是如果不适合谷歌页面的见解，我就不会走你的路。

iMHO，Insight总是考虑加载外部CSS文件效率较低，因为，从

优化CSS交付
当PageSpeed Insights检测到页面包含渲染阻止外部样式表时，会触发此规则，这会延迟首次渲染的时间

这可能适用于小型CSS代码，但对于大型CSS代码，情况并非如此。这样做的另一个缺点是，如果您决定更改CSS中的某些内容，则需要转到每个页面并进行更改，而不是一次性更改

此外，与内联代码不同，可以缓存外部CSS文件，同时考虑到网页大小会增加或每页都会增加，因为您将其内联到每页中

---

我应该在元素上添加样式标记吗 解决方案是首先识别和分离用于初始页面显示的CSS，并将其移动到单独的文件中

---

在head部分加载这个初始css文件，并将剩余的css移到页面底部。

我已经尝试了这两种方法，但仍然得到相同的结果。现在它确实提出了一个问题。如果我使用一个链接的媒体=屏幕，另一个链接的媒体=全部。屏幕媒体链接是否会加载到移动设备上？我想我会在那里省一点钱。是的，我有点注意到大多数网站的得分都不超过65%，所以我想我会像谷歌建议的那样做一半和一半。它是将呈现页面的css放在样式标签中，其余的都放在一个链接中。我想这样我不会看到没有css的页面加载，我会尽量减少链接的加载时间。感谢您的回复什么是小css文件还是大css文件？到目前为止，我的文件有5K，甚至还没有压缩！就个人而言，我考虑的不仅仅是几个CSS规则，还有两个CSS属性，每个都是大的，也有外部CSS的其他优点，比如缓存，只需要在一个地方改变，我就不会在页面中包含任何内联CSS，经验法则，保持它的外部，最小化它并缓存它，你就很好了。这是我最好的答案。谢谢你。我不再问自己如何处理这个问题，我会接受Google Insight提供的97%。可能是重复的