如何克服PageSpeed Insight

Question

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

显示在首屏内容中消除渲染阻止JavaScript和CSS

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

参考Optimize CSS Delivery，我将这行编码应用到我的<script>

中

<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>

应用此方法会导致更多阻塞资源。

我可以知道如何克服这个问题吗？感谢。

P / S：请提供一个理由，如果你downvote。所以下次我可以提高质量问题。

Answer 1

您可以异步加载CSS还是有必要的媒体查询？

要做的最好的事情是内联一些媒体查询内容，以便每个查询都是从HTML完成的 - 这将消除渲染阻止。

但是，如果您的页面加载速度低于chrome，我将说明可以忽略Pageinsights。这不是100％。这是你真正想要关注的地方，因为谷歌为你提供了更多的用户反馈信用，而不是机器人的质量得分。如果您可以将其削减到0.5秒负载，用户将会减少反弹。