Nginxでブラウザのキャッシュを活用する

nginx_expires

画像やCSSやJSなどの静的なファイルはgzipによる圧縮のほかに、ブラウザ側のキャッシュも有効にしたほうがいいらしいです。Nginxなら簡単に設定できました!

PageSpeed Insights

GoogleのPageSpeed Insightsでサイトを診断してもらったら「ブラウザキャッシュを活用しましょう」と言われてしまいました。

それぞれの静的なファイルの有効期限を7日以上設定していないファイルは注意されてしまうらしいので、backendの設定部分にexpiresの設定を追加しました。

/etc/nginx/sites-available/default

server {
	listen 8080;
	server_name <%= node['wp_install']['server_name'] %>;
	root <%= node['wp_install']['server_root'] %>;
	index index.php index.html index.htm;
	charset utf-8;

	access_log /var/log/nginx/fastcgi_access.log combined;
	error_log /var/log/nginx/fastcgi_error.log warn;

	location / {
		if (!-e $request_filename) {
			rewrite ^.+?($/-.*) $1 last;
			rewrite ^.+?(/.*\.php)$ $1 last;
			rewrite ^ /index.php last;
		}
	}

	location ~ \.php$ {
		fastcgi_pass unix:/var/run/php5-fpm.sock;
		fastcgi_index index.php;
		fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
		include fastcgi_params;
		fastcgi_pass_header "X-Accel-Redirect";
		fastcgi_pass_header "X-Accel-Expires";
	}

	location ~ .*\.(jpg|gif|png|css|js|ico|woff) {
		expires 10d;
	}
}
location ~ .*\.(jpg|gif|png|css|js|ico|woff) {
	expires 10d;
}

この部分で、画像ファイルやCSS,JSファイルの他にWOFFファイルの有効期限も10日で設定しました。

設定後は、外部js以外は有効期限が10日に設定されて注意されなくなりました。
まだ注意される項目が多いので改善していきたいと思います。

追記:2014/01/05

静的ファイルの設定部分をバックエンド(8080)からフロントエンド(80)に移動しました。
今まで静的ファイルもバックエンドで処理していました・・

server {
	listen   80;
	server_name <%= node['wp_install']['server_name'] %>;
	root <%= node['wp_install']['server_root'] %>;
	index index.php index.html index.htm
	charset utf-8;

	access_log /var/log/nginx/front_access.log combined;
	error_log /var/log/nginx/front_error.log warn;

	location / {
		proxy_pass http://backend;
		proxy_cache zone;
		proxy_cache_key $scheme$proxy_host$uri$is_args$args;
		proxy_cache_valid  200 1d;
	}

	location ~ .*\.(html?|jpe?g|gif|png|css|js|ico|woff) {
		access_log off;
		expires 10d;
	}

	location /wp-admin {
		proxy_pass http://backend;
	}
	location /wp-login.php {
		proxy_pass http://backend;
	}

	location ~ /\.ht {
		deny all;
	}
}

以下をフロントエンド設定部分に追加して、バックエンド部分からは削除しました。
ついでに静的ファイルの場合はアクセスログを書き込まないようにする設定も追加しました。

location ~ .*\.(html?|jpe?g|gif|png|css|js|ico|woff) {
	access_log off;
	expires 10d;
}
  • matsu

    > location ~ .*.(jpg|gif|png|css|js|ico|woff) {

    ここの所、

    > location ~ .*.(jpg|gif|png|css|js|ico|woff)$ {

    とすべきです。

    拡張子が.jsonのファイルがマッチしてしまいました!