Question

我们正在向＆＃39;身体添加背景图片。标签。图像是动态的，因此必须最后加载以允许将变量传递给它。

问题是，我们正在尝试改进我们的PageSpeed，在添加背景图片时，PageSpeed报告将大量脚本标记为渲染阻止。即便是我们的页脚。

据我所知，这不应该是渲染阻塞因为内容可以在没有它的情况下正常加载 - 而且确实如此 - 但是当调用背景图像时，它会变成渲染阻塞。

以前有人做过这样的事吗？任何解决方法？

我还花了大量时间尝试在页面加载完成后加载脚本，并且我已经在页面后加载了脚本，但渲染阻止内容仍然在报告中标记

我似乎无法理解这一切。任何指导都将不胜感激。

谢谢， bhtech

更新

<html>
<head>
<script src="/header.js"></script>
</head>
<body>
<script src="/footer.js"></script>
<script src="/loadbodyimage.js"></script>
</body>
</html>

当包含/loadbodyimage.js文件时，只有/header.js文件是渲染阻止的 - 这非常有意义。

但是当我包含/loadbodyimage.js（将背景图像添加到body标签）时，/ footer.js文件也会变成渲染阻塞。

这是一个非常愚蠢的版本，但有点说明了我所经历的事情。

更新

我已将以下代码添加到我的页面底部，该代码写入body标签并添加背景图像。它是简单的jQuery。

$(document).ready(function() {
$('body').css('background', 'url(/images/bgImage.jpg)');
});

这使得页面上的脚本（甚至在它之后）被标记为渲染阻止。如果我对此行进行注释，则脚本不再是渲染阻止。我希望这有助于解释我的问题。

Answer 1

我建议尝试一下名为head.js的脚本。它以异步方式并行加载JS。在尝试提高PageSpeed分数和初始页面加载时间时，我得到了很好的结果。

您可以下载head.js here。

用法：

<head>
 <script src="/head.load.min.js"></script>
 <script>
  head.js("/header.js");
  head.js("/footer.js");
  head.js("/loadbodyimage.js");
 </script>
</head>

向页面加载后添加元素的问题

1 个答案: