好的...所以我正在运行一个小测试,试图从Google PageSpeed获得100/100。我们有以下网站 - https://redwing.media
我还有一件事要做,那就是将CSS从脑海中取出(作为其渲染阻塞内容(,允许加载内容,然后使用JavaScript拉入CSS。如果我根本不加载 CSS,我会得到 100/100 的页面速度。我已经把我所有的关键CSS都放在了脑海中。
<style>
BODY { background-color: #1B1719; }
BODY > * { display: none; }
</style>
因此,我使用Google建议的方法在内容加载后加载CSS(见此处( -
<noscript id="deferred">
<link rel="stylesheet" type="text/css" href="assets/css/screen.css">
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred");
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 洞察时,我直接回到了 85/100 的移动页面速度,因为我的屏幕.css显然是渲染阻塞......
这是怎么回事?我正在使用谷歌推荐的解决方案!
这是我正在构建的网站 - https://redwing.media/
Css 始终是渲染阻塞,因此,您做得很好,您正在以最佳方法加载外部 css 文件。
提高页面速度的唯一方法是将css文件内容内联到html的头部,这样做,您将节省一点时间,节省浏览器搜索外部文件的时间,但这将是一个很小的改进。