Question

我是一个WordPress用户，有很多脚本和样式都是渲染阻止的。

谷歌的PageSpeed Insights告诉我，我有大量的脚本，但当我在我的控制台中查看时，它们正被加载到/ body标签的正上方。

例如，在结束体标记上方加载的最后一个脚本如下所示：

  <script type="text/javascript" src="https://mysite.com/wp-includes/js/comment-reply.min.js?ver=3.9.2"></script>
  <div id="wpadminbar" class="" role="navigation"></div>
  <div id="tiptip_holder" style="max-width:290px;"></div>
  <iframe id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" style="display: none;"></iframe>
  <div id="window-resizer-tooltip" style="display: none;"></div>
</body>

最后一个脚本是如何考虑的？

Answer 1

您可能希望使用javaScript函数来加载外部javaScript代码然后使用

window.onload = function;

其中＆＃34; fucntion是加载函数的名称。

当然，请检查<head>其他js。

您应该为页面加载生成HAR HTTP存档。您可以使用谷歌Chrome的时间线录音机。有一个使用时间轴重新排序的在线指南，但有一个相当陡峭的学习曲线。它将为您提供所需的每一个细节以及更多。

如何录制：Link to How to Record

更简单，但细节较少，使用webpagetest.org为您生成HAR。获得Page Speed测试摘要后，在右上角有一个标有＆＃34; Export HTTP Archive（.har）＆＃34;的链接。

然后使用PHP来分析HAR。这是相当粗糙的，但它快速而简单。

$data = @file_get_contents($path);
$json = json_decode($data,true);
echo '<pre>
var_export($json );
echo '</pre>

您要观察的是当您的.js相对于其他内容开始加载时加载。

google pageSpeed Insights，javascript是在WORDPRESS下面加载的

1 个答案: