レスポンス向上のため、PageSpeed Insightsを利用してみた

前回の続き。
現在作っているWebアプリの問題として、レスポンスが悪かったようなので、
どの辺があかんのか、~~PageSpeed Insights~~を使って調べてみた。
けど、Bootstrapのsampleをベースに作っていたので、そんなにたくさんの指摘はなかったんだよね。

主な指摘は以下の通り。

・文字セットを指定する
・重複するリソースは 1 つの URL から提供する
・圧縮を有効にする
・ブラウザのキャッシュを活用する
・JavaScript を縮小する

このうち、「文字セットを指定する」は指定してあるんだけど、PageSpeedのバグなのか表示が消えなかったので気にしない事に。
また、「JavaScript を縮小する」はソースコード量が少なくて、あまり効果がなさそうなのでパス。
「重複するリソースは・・」は諸事情により致し方ないのでパス。
と、言うわけで他の2つを実施。

圧縮を有効にする

・apacheのhttpd.confで、以下のモジュールを使用可能に。

LoadModule deflate_module modules/mod_deflate.so

・「.htaccess」を作成し、以下を記述


AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php

これでもう一度PageSpeedを確認すれば消えているハズ・・・と思ってたら消えておらず。
原因を調べてみたら、ブラウザのキャッシュを消していなかった。
キャッシュを消して再確認してみると・・消えた！！
これだけの事に、けっこうな時間ハマりました。

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

・apacheのhttpd.confで、以下のモジュールを使用可能に。

LoadModule expires_module modules/mod_expires.so

・「.htaccess」に、以下を追記


ExpiresActive On
ExpiresByType image/jpg "access 1 week"
ExpiresByType image/jpeg "access 1 week"
ExpiresByType image/gif "access 1 week"
ExpiresByType image/png "access 1 week"
ExpiresByType text/css "access 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType image/x-icon "access 1 week"
ExpiresByType audio/mp3 "access 1 week"

こちらはスムーズにいくかと思いきや、なぜかmp3の指摘だけが消えず。
これもけっこうはまったけれど、MimeTypeの指定がいけなかったようで。
こんな感じで修正すると、うまくいった。

ExpiresByType audio/mpeg "access 1 week"

本当は、CSSやらJavascriptは開発が面倒になるから、
あんまりキャッシュしたくないんだけどね。
回避策もなくはないんだけど、めんどいし。
キャッシュをクリアすればよいかなと。
さて、これでどのくらいレスポンスが向上するのやら。