未考虑pagespeed_no_transform属性

Question

我正在使用Nginx PageSpeed模块，当涉及到使用jquery.matchHeight.js管理的图像时，我遇到了一个问题。我决定禁用对这些特定映像的优化，添加了pagespeed_no_transform属性(我也尝试了data-pagespeed-no-transform，但没有成功)：

<img src="https://example.com/image-icon_300.png" alt="Alt title" pagespeed_no_transform />

不幸的是，PageSpeed似乎没有考虑到这个属性。更糟糕的是，它纯粹是，删除了并进行优化。下面是呈现的代码：

<img src="https://example.com/image-icon_300.png.pagespeed.ce.gkz42_jTc5@2x.png" alt="Alt title" data-pagespeed-url-hash="627608977" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" width="240" height="200">

在cas中，这将与我的PageSpeed版本/配置相关，下面是我的Nginx：

# Header X-Page-Speed: 1.13.35.2-0
server {
  # Ansible managed
  pagespeed on;
  pagespeed FileCachePath /var/ngx_pagespeed_cache;

  location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
    add_header "" "";
  }
  location ~ "^/pagespeed_static/" { }
  location ~ "^/ngx_pagespeed_beacon$" { }
}

Answer 1

对于那些面临同样问题的人来说，这似乎是完美的！

PageSpeed对图像的几种优化，主要是：

• 转换(到PNG、JPEG或WebP)
• 再压缩
• 调整大小
• 内衬
• 缓存

当使用data-pagespeed-no-transform属性时，您告诉PageSpeed不要“转换”您的图像，，但这并不意味着它不会被缓存，这就是为什么您仍然看到https://example.com/image-icon_300.png.pagespeed.ce.gkz42_jTc5@2x.png URL。

要知道您的图像是否已被转换，您需要检查其URL：

• 仅缓存：image-icon_300.png.pagespeed.ce.gkz42_jTc5@2x.png
• 调整大小+缓存：150x150ximage-icon_300.png.pagespeed.ce.gkz42_jTc5@2x.png
• 转换+调整大小+缓存：ximage-icon_300.png.pagespeed.ic.gkz42_jTc5@2x.webp
• 内联：data:image/jpeg;base64,…