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

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

此时唯一能防止这种情况发生的问题是图像.

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

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

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

mod_pagespeed 设置

############################################## mod_pagespeed<IfModule pagespeed_module>ModPageSpeed 开启ModPagespeedDisallow "*index.php/admin/*"ModPagespeedCriticalImagesBeaconEnabled trueModPagespeedEnableFilters insert_image_dimensionsModPagespeedEnableFilters insert_dns_prefetchModPagespeedEnableFilters 迂腐ModPagespeedEnableFilters priority_critical_cssModPagespeedRewriteLevel CoreFiltersModPagespeedEnableFilters defer_javascriptModPagespeedEnableFilters sprite_imagesModPagespeedEnableFilters rewrite_imagesModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webpModPagespeedEnableFilters resize_rendered_image_dimensionsModPagespeedEnableFilters collapse_whitespace,remove_commentsModPagespeedAddOptionsToUrls on#这会将脚本和图像缓存在本地存储中，因此要刷新缓存，也要刷新本地存储.ModPagespeedEnableFilters local_storage_cache</IfModule>

解决方案

您的问题可能是您的图片没有正确优化造成的.

我最近为 PHP 网站开发了一个 BULK 图像优化器，它 100% 符合 Google Insights 的指南.

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

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

I'm looking to get as close to a 100/100 page speed score as possible.

The only issue preventing this is images at this point.

As seen in the below image, the native image size is 500x500 but rendered at 327x327, the problem is that these images are responsive, so depending on view port they can be anywhere from 210x210 to 500x500. Google is crawling the site where these images are rendered at 267x267, I found this out when downloading the Google PageSpeed optimized content. But depending on viewport this image may need to be 500px x 500px.

How do I go about solving this problem? Ideally, I'd like to use mod_pagespeed to solve this problem, so I can reuse this solution across my servers. However, at this point, I'm open to about any solution that allows me to have this image vary in size via programming i.e. not creating an image for every size, unless this can be done dynamically without user involvement.

Any help would be greatly appreciated. BTW, without these images I score a 96-98/100

Site in Question Magento Responsive Site / Apache w/ mod_pagespeed

Google PageSpeed Results Link

mod_pagespeed Settings

############################################
## 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>

解决方案

Your problem may be caused by your images not being optimized properly.

I have recently developed a BULK image optimizer for PHP websites that is 100% compliant with Google Insights´ guidelines.

The only requirement is that you have imagick installed on your webserver.

You can download the optimizer here: https://www.genius-webdesign.com/image-optimizer/