好的...所以我正在运行一个小测试来尝试从 Google PageSpeed 获得 100/100。我们有以下网站- https://redwing.media
我还有一件事要做,那就是从头部取出 CSS(作为其渲染阻塞内容),允许加载内容,然后使用 JavaScript 拉入 CSS。如果我根本不加载 CSS,我将获得 100/100 PageSpeed。我已将所有重要的 CSS 放在头部。
<style>
BODY { background-color: #1B1719; }
BODY > * { display: none; }
</style>
因此,我使用 Google 建议的方法在内容加载后加载 CSS ( see here ) -
<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 的移动页面速度,因为我的 screen.css 显然是呈现阻塞...
这是怎么回事?我正在使用 Google 推荐的解决方案!
这是我正在 build 的网站 - https://redwing.media/
最佳答案
Css 总是阻塞渲染,所以你做得很好,你正在使用可能的最佳方法加载外部 css 文件。
提高页面速度的唯一方法是将 css 文件内容内联到 html 的头部,这样做可以节省浏览器搜索外部文件的时间,但是将是一个小的改进。
关于css - Google PageSpeed - 呈现阻塞内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42203320/