这是我的问题。
我正在使用 Google Page Speed Insights 分析我的页面。 它告诉我删除头部(浮线上方)的 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 结果有 2 个选项卡。通过将 css 链接放在文档的末尾，我在移动选项卡上得分为 100%。但是，我仍然在计算机部分收到相同的消息，就好像无论我把它放在哪里，它仍然被加载到 float 线上方。我不明白，因为我可以看到页面在没有 css 的情况下加载了几分之一秒。
所以我想知道加载 CSS 的最佳方式是什么？
我应该在标题中放置样式标签吗？
我应该在元素上添加样式标签吗？ <-- 我宁愿不要。
那么加载我的 css 的最佳方式是什么？
谢谢。
最佳答案
恕我直言，Insight 总是认为加载外部 CSS 文件效率较低，因为，来自Google Developers - OptimizeCSSDelivery
Optimize CSS Delivery
This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay the time to first render.
这对于小型 CSS 代码可能是正确的，但对于大型 CSS 代码则不然，这样做的另一个缺点是如果您决定更改 CSS 中的某些内容，那么您将需要转到每个页面并执行一次更改，而不是一次更改。
此外，与内联代码不同，外部 CSS 文件可以被缓存，同时考虑到网页大小会增加或每个页面，因为您将它内联在每个页面中。
Should i add a style tag on the elements? <-- I would rather not
永远不会!，这会让您很难维护和概括您的 CSS，并且具有最高优先级，所以您会用头撞墙想知道为什么要更改外部文件或 head 中的 CSS 部分没有生效。
关于html - 有效地在我的页面中加载 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34911188/