Lighthouse Pagespeed 问题与适当大小的图像
Lighthouse Pagespeed issue with appropriately-sized images
我遇到了 Lighthouse Pagespeed 的一个问题,这是我以前从未遇到过的,并且无法在我管理的任何其他网站上复制。
我收到的错误消息是:
Serve images that are appropriately-sized to save cellular data and improve load time.
Screenshot from Pagespeed Insights
这是其中一张图片的源代码(为了便于阅读而格式化):
<img
width="300"
height="300"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
src="https://example.com/assets/c1-300x300.jpg"
srcset="https://example.com/assets/c1-300x300.jpg 300w,
https://example.com/assets/c1-600x599.jpg 600w,
https://example.com/assets/c1-902x900.jpg 902w,
https://example.com/assets/c1-100x100.jpg 100w,
https://example.com/assets/c1.jpg 938w"
sizes="(max-width: 300px) 100vw, 300px"
alt=""
loading="lazy"
/>
我发现了一个长期关闭的 GitHub 问题来解决此行为,开发人员回应说这是有意为之的,Lighthouse 故意使用 3.0 的设备像素比。这解释了为什么它选择三倍图像大小,但我仍然无法弄清楚我应该如何在代码中“修复”这个问题。
我已经尝试对图像进行进一步优化,但要么是无关紧要,要么是我优化不够。
有没有人有过同样的经历,或者至少能够在不同的网站上复制它?
如果能找出原因(因为错误消息并没有真正说明任何问题)和解决方案,那就太好了。
好的,我已经找到原因了。我在想我的最小图像尺寸足够接近最小的必要图像尺寸(至少根据 Lighthouse 的说法),但是,无论是它还是它的值乘以 3 都不是。
因此,解决方案是找出 Lighthouse Pagespeed 用于移动测试的屏幕宽度,即 425 像素,然后提供专门针对此屏幕尺寸的新图像尺寸以及 2x 和 3x 版本.
我努力确保在设备上加载正确的图像。我实际上发现这给了我更多的控制权,尤其是在与预加载响应图像结合使用时。例如,
<body>
<picture>
<source srcset="image-1200.jpg" media="(min-width: 992px)">
<source srcset="image-800.jpg" media="(min-width: 768px)">
<source srcset="image-500.jpg" media="(min-width: 0px)">
<img src="image-500.jpg" height="300" width="500" class="img-responsive" loading="eager" alt="Blah">
</picture>
</body>
我遇到了 Lighthouse Pagespeed 的一个问题,这是我以前从未遇到过的,并且无法在我管理的任何其他网站上复制。
我收到的错误消息是:
Serve images that are appropriately-sized to save cellular data and improve load time.
Screenshot from Pagespeed Insights
这是其中一张图片的源代码(为了便于阅读而格式化):
<img
width="300"
height="300"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
src="https://example.com/assets/c1-300x300.jpg"
srcset="https://example.com/assets/c1-300x300.jpg 300w,
https://example.com/assets/c1-600x599.jpg 600w,
https://example.com/assets/c1-902x900.jpg 902w,
https://example.com/assets/c1-100x100.jpg 100w,
https://example.com/assets/c1.jpg 938w"
sizes="(max-width: 300px) 100vw, 300px"
alt=""
loading="lazy"
/>
我发现了一个长期关闭的 GitHub 问题来解决此行为,开发人员回应说这是有意为之的,Lighthouse 故意使用 3.0 的设备像素比。这解释了为什么它选择三倍图像大小,但我仍然无法弄清楚我应该如何在代码中“修复”这个问题。
我已经尝试对图像进行进一步优化,但要么是无关紧要,要么是我优化不够。
有没有人有过同样的经历,或者至少能够在不同的网站上复制它?
如果能找出原因(因为错误消息并没有真正说明任何问题)和解决方案,那就太好了。
好的,我已经找到原因了。我在想我的最小图像尺寸足够接近最小的必要图像尺寸(至少根据 Lighthouse 的说法),但是,无论是它还是它的值乘以 3 都不是。
因此,解决方案是找出 Lighthouse Pagespeed 用于移动测试的屏幕宽度,即 425 像素,然后提供专门针对此屏幕尺寸的新图像尺寸以及 2x 和 3x 版本.
我努力确保在设备上加载正确的图像。我实际上发现这给了我更多的控制权,尤其是在与预加载响应图像结合使用时。例如,
<body>
<picture>
<source srcset="image-1200.jpg" media="(min-width: 992px)">
<source srcset="image-800.jpg" media="(min-width: 768px)">
<source srcset="image-500.jpg" media="(min-width: 0px)">
<img src="image-500.jpg" height="300" width="500" class="img-responsive" loading="eager" alt="Blah">
</picture>
</body>