如何获得图像＆＃34;在首屏以上＃34;对

Question

我的图像高于折叠，很难得到它们＃34;正确＆＃34;对于Google Pagespeed。

标记大致看起来像这样（删除srcset和一些不相关的CSS）

<img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D&#039;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&#039; viewBox%3D&#039;0 0 748 429&#039;%2F%3E"
 data-lazy-type="image"
 data-lazy-src="../disaster-girl.jpg"
 width="748" height="429"
 class="lazy lazy-hidden"/>
<noscript>
  <img src="../disaster-girl.jpg" width="748" height="429" />
</noscript>

稍后加载异步加载的JavaScript会交换属性，以便显示图像。这些课程仅用于选择目的。

以下屏幕截图来自Chrome Devtools，其中包含从页面中删除的所有外部JavaScript和CSS。因此，这就是我期望PageSpeed看到的东西：

相反，它抱怨并且事实上，这就是Pagespeed所看到的东西：

图标字体是内联的。不知道为什么Pagespeed没有看到它。但是图像根本没有出现的事实确实让我很困惑。我理解通过内联JavaScript设置src属性和改组第一张图像的显示CSS可以使逻辑变得更好，但我想得到＆＃34; basic＆＃34;东西第一。 :)

首先要做的事情是：为什么图像会在PageSpeed中崩溃？