使用和PageSpeed mod_pagespeed进行图像优化

Question

我希望获得尽可能接近100/100的页面速度分数。

阻止这一点的唯一问题是图像。

如下图所示，原生图像大小为500x500，但渲染大小为327x327，问题是这些图像具有响应性，因此根据视口的不同，它们可能在210x210到500x500之间的任何位置。谷歌正在抓取这些图像以267x267渲染的网站，我在下载谷歌PageSpeed优化的内容时发现了这一点。但根据视口的不同，此图像可能需要500px 500px。

我该如何着手解决这个问题？理想情况下，我希望使用mod_pagespeed来解决这个问题，这样我就可以在我的服务器上重用这个解决方案。然而，在这一点上，我对任何允许我通过编程改变图像大小的解决方案持开放态度，即不为每种大小创建图像，除非这可以在没有用户参与的情况下动态完成。

任何帮助都将不胜感激。顺便说一句，如果没有这些图片，我的得分是96-98/100

Site in Question Magento响应式站点/ Apache，带mod_pagespeed

Google PageSpeed Results Link

​

​

​

​

mod_pagespeed设置

############################################
## mod_pagespeed

<IfModule pagespeed_module>
    ModPageSpeed on
    ModPagespeedDisallow "*index.php/admin/*"
    ModPagespeedCriticalImagesBeaconEnabled true
    ModPagespeedEnableFilters insert_image_dimensions
    ModPagespeedEnableFilters insert_dns_prefetch
    ModPagespeedEnableFilters pedantic
    ModPagespeedEnableFilters prioritize_critical_css
    ModPagespeedRewriteLevel CoreFilters
    ModPagespeedEnableFilters defer_javascript
    ModPagespeedEnableFilters sprite_images
    ModPagespeedEnableFilters rewrite_images
    ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
    ModPagespeedEnableFilters resize_rendered_image_dimensions
    ModPagespeedEnableFilters collapse_whitespace,remove_comments
    ModPagespeedAddOptionsToUrls on
    #This caches scripts and images in your local storage, so to flush you cache, flush your local storage as well.
    ModPagespeedEnableFilters local_storage_cache
</IfModule>

Answer 1

您的问题可能是由于您的镜像没有正确优化而导致的。

我最近为PHP网站开发了一个批量图像优化器，它100%符合Google Insights的指导方针。

唯一的要求是你在你的The服务器上安装了imagick。

你可以在这里下载优化器：https://www.genius-webdesign.com/image-optimizer/