Question

我到处都在搜索这个，但我认为还没有写任何东西。

每个星期我都会优化1到2个Shopify和WordPress网站。当Google在机会部分的“推迟屏幕外图像”中显示图像时，我通常在shopify中添加https://github.com/aFarkas/lazysizes。

我有时甚至注意到一件事，即使在向图像添加惰性处理后，Google仍在机会部分的“延迟离屏图像”中显示了一些图像，但它不应该显示它们。

我确定如果您优化了多个站点的速度，您也会注意到此问题。

Answer 1

问题不在于Google Page Speed Insights，而在于您的实现/您的插件。

以以下示例（品牌形象部分的一部分）为例：-

<td>
    <a href="https://www.primemassagechairs.com/collections/ultracomfort-america" title="UltraComfort America">
        <div style="text-align: left;">
            <img src="//cdn.shopify.com/s/files/1/2444/6637/files/UltraComfort_Logo_Home_Page_Image.jpg?v=1553734908" alt="Ultra Comfort Lift Chairs" width="" height="" style="float: none;">
        </div>
    </a>
</td>

插件无法将其识别为要延迟加载的图片（或者您尚未按照插件上的说明对其进行延迟加载的调整-我对插件不熟悉，无法知道您在这里打算做什么）。

为此图像设置了src后，它将正常下载，这就是为什么Page Speed Insights将其标记为问题。

据我所知，正确的格式应该是

<img data-src="//cdn.shopify.com/s/files/1/2444/6637/files/UltraComfort_Logo_Home_Page_Image.jpg?v=1553734908" class="lazyload" alt="Ultra Comfort Lift Chairs" width="" height="" style="float: none;"/>

使用图像URL为data-src和一类lazyload，以便插件正常工作且未设置href。

手动调整它或找到另一个插件。

作为最后的想法-该插件的实现方式意味着，如果该站点没有JavaScript，则根本不会加载图片，可能值得探索一个更好的选项，为图片提供<noscript>后备（或自己添加）。

为什么Google PageSpeed Insight即使在图像上添加了延迟加载后仍会在机会中显示一些图像

1 个答案: