使用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/