nginx fastcgi キャッシュによる サイトの高速化

Webサーバー サイトの構築
PageSpeed Insights Webサイトの高速化
その-5 キャッシュによる サイトの高速化

Nginx-Wordpressで fastcgi cacheの設定
 
PageSpeed Insights で指摘された「改善できる項目」の中から、
 その-1 テキスト圧縮の有効化
 その-2 レンダリングを妨げるリソースの除外
 その-3 Font Awesomeを ローカル使用に変更する
 その-4 サーバー応答時間の短縮(TTFB)。
と、ページ読込時間の短縮対策を打ってきた。
サイトの速度が上がると、それに比例してアドセンスの収益も上がってきたので、さらに改善すべく『キャッシュの有効化』に挑戦した。
 
fastcgi cache
 
以下、Nginxの fastcgi cacheを設定した記録。
 
 

 

スポンサー リンク

 

 
 
 
 
 
1. fastcgi cache とは
 
Nginxには、2つのタイプのキャッシュ機能がある。
①.リバースプロキシによる proxy cache
②.fastcgi cache
 
①.リバースプロキシによる proxy cache とは。
 
リバースプロキシによる proxy cache
 
リバースプロキシによる【proxy cache】は、Nginxがバックエンドのサーバーに処理を回し、返ってきたレスポンスをキャッシュして、Nginx(Proxy)がキャッシュを返すことでパフォーマンスを上げる仕組み。もうひとつの「HTTPサーバー(Webサーバー)」が必要で、HTTPのレイヤーが二段構成になる。
 
②.fastcgi cache とは。
fastcgi cache
 
【fastcgi cache】という機能(HttpFcgiModule)は、バックエンドのFastCGIのレスポンスをキャッシュする機能で、【proxy cache】と同じ効果を1台の「HTTPサーバー(Webサーバー)」で実現できるので、構成がシンプルになる。
 
 
CGI とは: Common Gateway Interface
あらかじめ用意された HTML ファイルを表示するだけの通常ページに対して、色々な処理をした後ホームページのファイルを作って渡すのがCGI。
このCGIを改良して、一度起動したプログラムは、一定期間メモリ上に展開しておく仕組みが、FastCGI
 
 
 
 
2. サイト環境とキャッシュの設定目標
 
①.バーチャルホストが3つ設定されている。
「WordPress」の稼働環境
 
②.Let's Encrypytを利用して、SSL化(HTTPS通信)にしている。
 
arakan60の例。
http://arakan60.com
https://arakan60.com
http://www.arakan60.com
https://www.arakan60.com
 
③.バーチャルホスト毎にFastCGIキャッシュを設定する。
 
④.WordPress用に、特定のページをキャッシュしないように設定する。
 
⑤.携帯およびモバイル機器からのアクセスの場合・・・どうすればいいのか?
→ PCとモバイルで表示内容(見え方)を別にしているわけでは無いので、今回は対応せず。
 
PCとモバイル(スマホ)で、キャッシュを分ける方法。
fastcgi_cache_key で、PCとモバイルのキャッシュのキーを分ける
 
 
 
3. nginx.conf での設定要領
 
nginx.conf には、【FastCGI Cache】のキャッシュを保存する場所 (path) と、キャッシュのキーを設定するだけで良いが、関連の項目『 fastcgi_xxx 』も追加設定した。
 
nginx.confの編集。
sudo nano /etc/nginx/nginx.conf
 
nginx.confの設定例。
user  nginx;
worker_processes auto;
worker_rlimit_nofile 100000;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections 1024;
    multi_accept on;
    use epoll;
}

http {
    server_tokens off;
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    access_log off;
    keepalive_timeout 10;
    client_header_timeout 10;
    client_body_timeout 10;
    reset_timedout_connection on;
    send_timeout 10;
    limit_conn_zone $binary_remote_addr zone=addr:5m;
    limit_conn addr 100;

    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

	##
	# SSL Perfect Forward Secrecy(PFS)を有効にする Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	# 安全でない暗号化スイートはサポートしない
	# ssl_ciphers  'ECDH !aNULL !eNULL !SSLv2 !SSLv3';
	ssl_ciphers "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA RC4 !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !RC4";

	#HTTP Strict Transport Security --- HSTSの設定
	add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload';

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    gzip  on;
    gzip_vary on;
    gzip_proxied any;
    gzip_min_length 1024;
    gzip_comp_level 6;
    gzip_types text/plain
		 text/xml
		 text/css
		 text/javascript
		 image/gif
		 image/png
		 image/jpeg
		 application/javascript
		 application/x-javascript
		 application/json
		 application/xml
		 application/xml+rss
		 application/font-woff
		 application/font-tff
		 application/octet-stream;

    open_file_cache max=100000 inactive=20s;
    open_file_cache_valid 30s;
    open_file_cache_min_uses 2;
    open_file_cache_errors on;

server_names_hash_bucket_size 128;

    proxy_buffering       on;
    fastcgi_buffer_size     8k;
    fastcgi_buffers         100 8k;
    fastcgi_temp_path       /var/cache/nginx/temp 1 2; 
    fastcgi_connect_timeout 60;
    fastcgi_read_timeout    90;
    fastcgi_send_timeout    60;
    fastcgi_cache_valid     200 2h;
    fastcgi_cache_valid     302 2h;
    fastcgi_cache_valid     301 4h;
    fastcgi_cache_valid     any 1m;

# fastcgi cache on arakan60.com
fastcgi_cache_path /var/cache/nginx/arakan60 levels=1:2 keys_zone=arakan60:30m max_size=512M inactive=600m;

# fastcgi cache on arakoki70.com
fastcgi_cache_path /var/cache/nginx/arakoki70 levels=1:2 keys_zone=arakoki70:30m max_size=512M inactive=600m;

# fastcgi cache on mydns.jp
fastcgi_cache_path /var/cache/nginx/mydns levels=1:2 keys_zone=mydns:30m max_size=512M inactive=600m;

fastcgi_cache_key "$scheme$request_method$host$request_uri";

# cache 404 or other
fastcgi_ignore_headers Cache-Control Expires Set-Cookie;

# return old cache if PHP crashes
fastcgi_cache_use_stale error timeout invalid_header http_500;

    include /etc/nginx/conf.d/*.conf;
}
 
『fastcgi_cache_path』で、キャッシュを保存する場所への【path】を設定する。ドメイン毎に設定。
# fastcgi cache on arakan60.com
fastcgi_cache_path /var/cache/nginx/arakan60 levels=1:2 keys_zone=arakan60:30m max_size=512M inactive=600m;
 
 
キャッシュを保存する場所(ディレクトリ)をドメイン名(分かりやすい名前)で作成した。
cd /var/cache/nginx
 
sudo mkdir arakan60
sudo mkdir arakoki70
sudo mkdir mydns
 
sudo chown -R nginx:nginx arakan60
sudo chown -R nginx:nginx arakoki70
sudo chown -R nginx:nginx mydns
 
ls -l /var/cache/nginx/
 
 
『levels』:cacheディレクトリの構成とフォルダに付ける名前の桁数を設定。
cacheディレクトリの構成
 
『keys_zone』:キャッシュのゾーン名(名前は自由)と、ゾーンに使用するメモリを設定する。(1m=1MB)
 
『max_size』:FastCGI Cacheで生成される、全キャッシュの最大量の制限を指定する。
 
『inactive』:アクセスの無いファイルを、自動削除する時間を指定する。
 
キャッシュのキーを設定。
fastcgi_cache_key "$scheme$request_method$host$request_uri";
 
 
 
4. バーチャルホストでの設定要領
 
バーチャルホストでの【server設定】は、【location】ディレクティブに、具体的なキャッシュの使用条件を追記するのみである。
 
conf.d/ドメイン名.conf の編集。
sudo nano /etc/nginx/conf.d/ドメイン名.conf
 
【location】ディレクティブのサンプル。
	location ~ \.php$ {
		fastcgi_split_path_info ^(.+\.php)(/.+)$;
		fastcgi_pass unix:/var/run/php/php7.3-fpm.sock;
		#fastcgi_pass 127.0.0.1:9000;
		fastcgi_index index.php;
		fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
		include fastcgi_params;

# 以下、fastcgi_cache 用に追加した項目

		set $do_not_cache 0;

		#  -- POST or HEAD ?
		if ($request_method != "GET") {
		set $do_not_cache 1;
		}

		#  -- Login or Comment or Post Editting ?
		if ($http_cookie ~ ^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$) {
		set $do_not_cache 1;
		}

		fastcgi_cache arakoki70;
		fastcgi_cache_valid 200 60m;
		fastcgi_no_cache $do_not_cache;
		fastcgi_cache_bypass $do_not_cache;
		add_header X-F-Cache $upstream_cache_status;
	
	}
 
キャッシュしない条件フラグのリセット。
set $do_not_cache 0;
 
WordPressでの、キャッシュしない条件の設定。
・post処理中の場合
if ($request_method != "GET") { set $do_not_cache 1; }
・cookie条件:コメント中、記事作成中、ログイン中の場合
if ($http_cookie ~ ^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$) { set $do_not_cache 1; }
 
FastCGIのキャッシュ用設定。
・キャッシュの保存先指定
fastcgi_cache arakoki70;
・キャッシュの有効期限
fastcgi_cache_valid 200 60m;
・ヘッダーの X-F-Cache にキャッシュの状態を表示
add_header X-F-Cache $upstream_cache_status;
 
 
 
 
5. fastcgi_cacheが効いているか調べる方法
 
nginxのfastcgi cacheが効いているかを調べるには、上記で設定した【$upstream_cache_status】の値がヘッダーの「X-F-Cache」に出力されるので、レスポンスヘッダーを確認すればよい。
 
Google Chromeのデベロッパーツールを起動し、「Network」を選択する。
Google Chromeのデベロッパーツールを起動し、「Network」を選択する
 
ページのリロードを行って、「Name」の中の先頭にあるページIDを選択する。
ページのリロードを行って、「Name」の中の先頭にあるページIDを選択する
 
「Headers」を選択する。
「Headers」を選択する
 
「Response Headers」の最後にある、「X-F-Cache」の値を確認する。
”HIT”となっていれば、FastCGIのキャッシュが利用されている
 
”HIT”となっていれば、FastCGIのキャッシュが利用されている。
 
”BYPASS”:キャッシュを返すかどうかの判定で、「返さない」になった場合。
”BYPASS”:キャッシュを返すかどうかの判定で、「返さない」になった場合
 
”EXPIRED”:キャッシュが存在するが、期限切れの場合。
”EXPIRED”:キャッシュが存在するが、期限切れの場合
 
 
 
6. fastcgi キャッシュの効果:arakan60.com の場合
 
『PageSpeed Insights』の評価スコア:まだ「50」ポイントを越えない。
『PageSpeed Insights』の評価スコア
 
ラボデータ:First Paint の値が3秒以下になった。
ラボデータ
 
改善できる項目:画像の次世代フォーマットでの配信だけになった。
改善できる項目
 
対策以前からfastcgi キャッシュによる改善までの、『PageSpeed Insights』の評価スコアの変化。
fastcgi キャッシュの効果
 
fastcgi キャッシュの効果は、「8」ポイントの向上に留まったが、当初からすれば大きく改善された。
 
 
 
 PageSpeed Insights 【Webサイトの高速化】 対策
 
 
参考:
 
以上。
(2019.12.12)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください