nginxでのjpg,pngのwebp化:wordpress

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がブラウザキャッシュされないという問題が発生w

これは結構マズイ状態でして、静的なアセットと効率的なキャッシュ ポリシーの配信 に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への記述は多分③②の順位置で記述すると問題は起きないかと思います。

結構悩みましたがご参考までmm

 

 COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

AMP for WPの脆弱性について

NO IMAGE

OS層のハードディスク、sda等においてVolGroup-lv_rootのパーテ...

NO IMAGE

ワードプレスのSuperCache切れ直後、メインに記事ページが?の対応

nginxでworker_connectionsを1024以上に!

NO IMAGE

特定サイズ以上のファイル検索

NO IMAGE

memcachedでUDPをオフにする方法