html - 优化 Wordpress 主题中的 CSS 交付

Question

使用页面速度洞察时，我收到此警报

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking CSS resources. This causes a delay in rendering      your page.
Approximately 3% of the above-the-fold content on your page could be    rendered without waiting for the following resources to load. Try to defer or   asynchronously load blocking resources, or inline the critical portions of those   resources directly in the HTML.
Optimize CSS Delivery of the following:
http://www.mysite.co.uk/wp-content/themes/mytheme/css/m.min.css

注意:删除了 url，因为它是我工作场所的工作站点。

我已经尝试按照 google 的建议进行操作并使用

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

但这并没有解决问题。我试过删除 css 链接，但它告诉我也删除 js 文件和 Font Awesome 文件。

我目前在页面速度洞察力方面的得分为 97/100，因此非常感谢任何帮助。

Answer 1

消除呈现阻塞 CSS 的最佳方法是仅提取呈现页面所需的“首屏”或“关键”CSS，然后将其内联到您的 HTML 中。然后，您可以从那里异步加载加载页面其余部分所需的剩余 CSS。

这背后的想法是，您可以通过 HTML 页面一次往返服务器获得所需的所有资源。对于任何剩余的或“非关键”资源，您将异步加载。有关详细信息，请参阅 this article在 Google Developers 网站上。

我发现用于提取关键 CSS 的最佳工具实际上是 Grunt名为 grunt-critical. 的插件如果您以前从未在 Wordpress 中使用过 Grunt，那么有一个 great tutorial在 tuts+ 网站上将引导您完成它。

除此之外，您可以使用 HTML async attribute 异步加载您的 JavaScript .