18/11/2022
jpg,pngのwebp（ウェッピー）化を行うにあたって、ワードプレスには EWWW Image Optimizer という大変便利なプラグインが用意されています。 webpは次世代画像フォーマットということで、グーグルさんも推奨しているわけですが、静的なアセットと効率的なキャッシュ ポリシーの配信 においてブラウザキャッシュがされないという問題が出てしまい、そこの修正対応です。※今回はnginxのみ まず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への記述は多分③②の順位置で記述すると問題は起きないかと思います。 結構悩みましたがご参考までｍｍ
jpg,pngのwebp（ウェッピー）化を行うにあたって、ワードプレスには EWWW Image Optimi
