如何克服消除PageSpeed Insight中的呈现阻塞CSS

Question

我使用WordPress对我的网站进行了PageSpeed Insights测试。

它在上面的内容中显示消除呈现阻塞JavaScript和CSS

当我删除style.CSS文件时，错误消息消失了，它是我的核心CSS文件，包含7000行代码。

<script>
var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'small.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
</script>

Answer 1

您是否可以异步加载CSS，或者是否有必要的媒体查询？

最好的做法是内联一些媒体查询内容，这样每个查询都是从HTML执行的--这将消除呈现阻塞。

然而，我会声明，如果你的页面加载速度在Chrome中显示较低，可以忽略Pageinsights。不是百分之百。这是你真正想关注的地方，因为谷歌给你的用户反馈比它的机器人质量得分更多。如果你能把它削减到0.5秒的负载，用户会弹得更少。