如果您通过Google PageSpeed Insights分析网站的速度,您可能会收到一条警告,即消除首屏内容中的渲染阻止JavaScript和CSS,如下所示。

此警告包含两个部分,即“优化 CSS 交付”和“删除呈现阻塞 JavaScript”。

- 此功能仅修复删除渲染阻止JavaScript警告。
- 此功能不会修复优化CSS交付警告。
它是如何运作的
你可以找到很多教程,这些教程正在讨论添加“延迟”或“异步”的属性,或者在页面加载后加载js。这是非常简单的方法,但它不能解决问题。
所有脚本标记都将移动到页脚。
条件注释
HTML 注释可能存在于您的 html 中,如下所示。
<!--[if lt IE 9]>
<script src="http://www.wpfastestcache.com/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.wpfastestcache.com/style.css" media="all"/>
<style>#something{display:none;}</style>
<![endif]-->
在本例中,首先我们将它们分开,仅将脚本标记移动到底部。
<!-- First Css Sources -->
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="http://www.wpfastestcache.com/style.css" media="all"/><![endif]-->
<!--[if lt IE 9]><style>#something{display:none;}</style><![endif]-->
<!-- Second Js Sources -->
<!--[if lt IE 9]><script src="http://www.wpfastestcache.com/jquery.js"></script><![endif]-->
排除 Js 源
如果你想排除一些js源,首先你需要确保js源不受任何其他js源的影响。其次,您需要添加data-wpfc-render=“false”属性,如下所示。
<script data-wpfc-render="false" src="http://www.wpfastestcache.com/jquery.js"></script>
<script data-wpfc-render="false">
var number = 5;
</script>