基础交流与PageSpeed Insight

Question

我开始使用Foundation Zurb主要是因为他们的交换插件可以基于媒体查询交换图像。我在页面顶部有一个大横幅，根据mq。

改变它的大小

我们可以这样使用

<img src="assets/img/interchange/small.jpg" data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]">

很酷的功能，但问题是Page Speed Insight通知我（优先显示可见内容部分），当我使用插件时，它只呈现50％的可见顶级内容。

Page Speed建议加载javascript异步。所以我在标题中有这样的东西：

<script async src="assets/js/app.js"></script>

我也开始像这样使用js的交换：

var $photoFrame = $('#baner');
var interchange = new Foundation.Interchange($photoFrame, {
  rules: [
    "[assets/img/interchange/small.jpg, small]",
    "[assets/img/interchange/medium.jpg, medium]",
    "[assets/img/interchange/large, large]"
  ]
});

但是如何使用它并不重要。 PageSpeed只是不明白该页面需要加载额外的jpg甚至异步。 如果我的javascript加载异步，那么它不应该影响渲染页面的时间。如果在src属性中有图像它应该渲染它并且在加载js之后它应该被交换。我也试过没有src，问题仍然存在。

也许我想知道PageSpeed想要告诉我什么，但如果我不能使它工作，我将不得不放弃交换并建立baner与背景图像和我现在使用它的方式，图像的分辨率决定了baner的分辨率和通过背景方法，它不会那么简单。