jpg,pngのwebp（ウェッピー）化を行うにあたって、ワードプレスには EWWW Image Optimizer という大変便利なプラグインが用意されています。
webpは次世代画像フォーマットということで、グーグルさんも推奨しているわけですが、静的なアセットと効率的なキャッシュ ポリシーの配信 においてブラウザキャッシュがされないという問題が出てしまい、そこの修正対応です。※今回はnginxのみ+CentOS7
まずは必要なものをyumでインストール
yum -y install libjpeg optipng gifsicle libwebp-tools
その後nginx.confのhttpに下記を追加
http {
##WebP対応##
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
##
nginxのconfには元々ブラウザキャッシュの設定として下記を入れていました。
①
location ~* \.(css|gif|ico|jpeg|jpg|js|png|webp|woff|woff2|fon|fot|ttf|svg|mp4|webm|otf)$ { add_header Cache-Control "s-maxage=2592000";
webp化にあたってのconf設定として追記したものは下記です。
②
location ~* ^.+\.(png|jpe?g)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}
webp設定は、index index.php index.html; 記述の真下に記述していました。
とりあえずこれでwebp化はされるものの、今度はjpg、pngがブラウザキャッシュされないという問題が発生ｗ
これは結構マズイ状態でして、静的なアセットと効率的なキャッシュ ポリシーの配信 にjpg,pngが全て引っかかってしまうと思われます（TT）
よって、②の箇所をきちんとcache-controlされるように修正。
③
location ~* ^.+\.(png|jpe?g)$ {
add_header Cache-Control "s-maxage=2592000";
try_files $uri$webp_suffix $uri =404;
}
シークレット+デベロッパーモードで確認したところ、max_age=2592000となり、きちんとブラウザキャッシュされるようになってました。
confへの記述は多分③②の順位置で記述すると問題は起きないかと思います。
結構悩みましたがご参考までｍｍ
