Question

作为了解有关优化网站的更多信息的测试，我一直试图让我的网站在PageSpeed Insights上获得满分。到目前为止，除了CSS交付之外，一切都很顺利。

我确实通过使用preload标签获得了完美的结果，但由于某些原因，没有为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>

这看起来非常有效，但是页面速度并没有提升，所以它只给了我85分的评分。

当我在头部使用<link rel="stylesheet" href="~/css/site.min.css" media="none"/>而在身体末端使用<link rel="stylesheet" href="~/css/site.min.css">时也是如此。

然后我尝试用这样的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没有拿起它给我一个糟糕的评价。有什么理由为此？因为上面的代码可以在他们的网站上找到！

Answer 1

根据我使用google pagespeed的经验，为了优化css交付，你必须编写网页第一个折叠的内联css代码。因此它可以快速绘制，而你可以在外部文件中写入其余的css。最小化和连接页面中使用的css文件。有关详细信息，请参阅此链接optimize css delivery

Answer 2

这就是我在</body>之前使用的，并且工作正常。

＆＃13;

	<script type="text/javascript">

	function downloadAtOnload() {
	// Dynamically load CSS
	var ls = document.createElement("link");
 	ls.rel="stylesheet";
 	ls.href= "css/my-css-file.css";
 	document.getElementsByTagName("head")[0].appendChild(ls);

	}
	if (window.addEventListener) window.addEventListener("load", downloadAtOnload, false);
	else if (window.attachEvent) window.attachEvent("onload", downloadAtOnload);
	else window.onload = downloadAtOnload;
	</script>

＆＃13;

如何以正确的方式加载css异步？

2 个答案: