seo - 如何克服在 PageSpeed Insight 中消除渲染阻塞 CSS

Question

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

它显示消除首屏内容中阻止呈现的 JavaScript 和 CSS

当我删除包含 7000 行代码的 style.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:如果您投反对票，请说明原因。所以下次我可以提高我的问题质量。

Answer 1

你能异步加载 CSS 还是有必要的媒体查询？

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

但是我会声明，如果您的页面加载速度在 chrome 中显示较低，则可以忽略 Pageinsights。这不是 100%。这是您真正想要关注的地方，因为 Google 对用户反馈的信任度高于机器人的质量得分。如果您可以将加载时间减少到 0.5 秒，用户将减少跳动。