作为了解更多关于优化网站的测试，我一直在努力让我的网站在 PageSpeed Insights 上获得满分。到目前为止一切都很好，除了 CSS 交付。
我确实设法通过使用预加载标签获得了完美的结果，但由于某些原因没有为 Firefox 加载。所以我尝试使用其他解决方案。
然后我切换到这个:
<link rel="stylesheet" href="~/css/site.min.css" media="none" onload="if(media !== 'all')media='all';">
<noscript><link rel="stylesheet" href="~/css/site.min.css"></noscript>
这看起来非常有效，但 pagespeed 没有接受它，所以它只给了我 85 分。
当我使用 <link rel="stylesheet" href="~/css/site.min.css" media="none"/> 时同样发生了在头部和<link rel="stylesheet" href="~/css/site.min.css">在我 body 的尽头。
然后我尝试像这样用 Javascript 加载我的 css:
<noscript id="deferred-styles">
<link rel="stylesheet" href="~/css/site.min.css"/>
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement);
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame ||
mozRequestAnimationFrame ||
webkitRequestAnimationFrame ||
msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
但这也有同样的效果! Pagespeed 没有接受它并给了我不好的评价。有什么原因吗？因为上面的代码可以在他们的网站上找到!
最佳答案
根据我使用 google pagespeed 的经验，为了优化 css 交付，你必须在网页的第一页编写内联 css 代码。这样它就可以快速绘制，其余的 css 可以写在外部文件中。最小化并连接页面中使用的 css 文件。有关详细信息，请参阅此链接 optimize css delivery
关于javascript - 如何以正确的方式加载 css 异步？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45413879/