Google PageSpeed Insights优先考虑可见内容

时间:2015-08-28 19:19:48

标签: javascript jquery html css pagespeed

我正在进行一些测试on one of my random domains,当我通过Google PageSpeed Insights运行域时加载了以下JavaScript:

$("[data-min-height]").each(function() {
     var dataHeight = $(this).data("min-height");
     var dataPercent = dataHeight / 100;
     $(this).css("min-height", function() {
          return $(window).height() * dataPercent;
     });
});

我收到错误优先显示可见内容。如果我拿走了JavaScript,我就不会再收到错误了。我正在使用matthiasmullie/minify将所有JavaScript压缩在一起。目前我有jQueryPaulSpr/jQuery-Flex-Vertical-Centerliabru/jquery-match-height。一切都被编译成一个名为path.js的文件。我在关闭的body元素之前加载该文件,并使用defer。

因此,如果有人对上述JavaScript在PageSpeed上导致此错误的原因有任何想法,那将非常感激。谢谢。

2 个答案:

答案 0 :(得分:2)

path.js的所有内容直接嵌入HTML文档中。

Read here about Prioritizing Visible Content

您的脚本可能用于呈现内容

答案 1 :(得分:0)

出现此错误的原因是因为jQuery的每个函数。我重建了同样的东西,但只使用JavaScript for循环(没有jQuery),错误就消失了。

<div class="container">
    <div class="col-sm-2">
        <div class="x a">
            short<br>text
        </div>
    </div>
    <div class="col-sm-10 pull-right">
        <div class="x b">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
        </div>
    </div>
    <div class="col-sm-2 clearfix">
        <div class="x c">
            short<br>text
        <div>
    </div>
</div>