Question

我正在使用wordpress和主题并对此主题进行了一些更改，当我想提高页面速度时，Google Page Speed测试员表示我需要删除所有阻止脚本和样式。

我不知道什么是渲染阻挡，如何解决这个问题可以指导我解决这个重要问题。

由于

Answer 1

我解决了删除渲染阻止JavaScript的问题，如下所示：

<script src="filename.js"></script>
Replace with Following:  
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

Answer 2

让我们假设您的<head>部分看起来像这样

<!DOCTYPE html>
<html>
<head>

    <title>css - How to Remove render-blocking JavaScript and StyleSheet in wordpress? - Stack Overflow</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="//cdn.sstatic.net/Js/stub.en.js?v=6c41e89d8d17"></script>

</head>

只需将脚本文件移动到文档的底部，或者脚本文件，就像这样

<!DOCTYPE html>
<html>
<head>

    <title>css - How to Remove render-blocking JavaScript and StyleSheet in wordpress? - Stack Overflow</title>

</head>
<body>

<!-- all your other codes here -->

<!-- then your scripts right before the closing body tag -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.sstatic.net/Js/stub.en.js?v=6c41e89d8d17"></script>

</body>
 </html>

如果您将所有脚本移出头部并在</body>结束标记之前向右移动，则应该以谷歌页面速度消除该消息。

请注意，它可能仍然会给出关于CSS样式表的错误/消息已呈现阻止..好吧，我会忽略它，因为我希望我的css在文档之前呈现，所以我不会将其从<head>。

Answer 3

这些解决方案只是部分解决方案。内联方法，将脚本置于底层，使用异步或延迟不是最佳解决方案。如果你想首先加载页面然后加载js。

for JS将此代码放在＆lt; / body ＆gt; 标记

之后

<script type="text/javascript">
 function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "yourjavascripttoload.js";
  document.body.appendChild(element);
 }
 if (window.addEventListener)
  window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
  window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
</script>

Src：Patrick Sexton https://varvy.com/pagespeed/render-blocking.html

如何在wordpress中删除渲染阻止JavaScript和StyleSheet？

3 个答案: