使用Google PageSpeed Insights和Apache mod_pagespeed进行图像优化

Question

我正在寻找尽可能接近100/100页面的速度得分。

防止这种情况的唯一问题是图像。

如下图所示，本机图像尺寸为500x500，但以327x327渲染，问题在于这些图像具有响应性，因此根据视口的不同，它们的大小可以在210x210至500x500之间。 Google正在抓取以267x267呈现这些图像的网站，我在下载Google PageSpeed优化内容时发现了这一点。 但根据视口，此图像可能需要为500px x 500px。

我该如何解决这个问题？ 理想情况下，我想使用mod_pagespeed解决此问题，因此我可以在服务器上重用此解决方案。 但是，在这一点上，我对允许通过编程使此图像的大小有所变化的任何解决方案都持开放态度，即不为每种尺寸创建图像，除非可以在没有用户参与的情况下动态地完成此操作。

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

有问题的站点 Magento响应站点/ Apache，带mod_pagespeed

Google PageSpeed结果链接

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网站开发了BULK图像优化器，该图像优化器100％符合Google Insights的准则。

唯一的要求是您在网络服务器上安装了imagick。

您可以在此处下载优化器： https : //www.genius-webdesign.com/image-optimizer/