图片优化使用Google PageSpeed Insights和Apache mod_pagespeed [英] Image Optimization Using Google PageSpeed Insights and Apache mod_pagespeed

问题描述

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

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

如下图所示，原生图像尺寸为500x500但渲染为327x327，问题是这些图像是响应式的，因此根据视图端口，它们可以是从210x210到500x500的任何地方。 Google正在抓取这些图片以267x267呈现的网站，我在下载Google PageSpeed优化内容时发现了这一点。但根据视口，此图像可能需要为500px x 500px。

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

非常感谢任何帮助。顺便说一句，没有这些图像，我得分为96-98 / 100

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 #This缓存本地存储中的脚本和图像，因此要刷新缓存，也要刷新本地存储。 
 ModPagespeedEnableFilters local_storage_cache 
< / IfModule> 
  

解决方案

您的问题可能是由于您的图片未经优化正确。

我最近为PHP网站开发了一个BULK图像优化器，它完全符合Google Insights的指导原则。

唯一的要求是你已经在你的网络服务器上安装了想象力。

你可以在这里下载优化器：
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/

这篇关于图片优化使用Google PageSpeed Insights和Apache mod_pagespeed的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！