[Tomcat] PageSpeed Insightsの提案に対応する -1-ブラウザのキャッシュを活用する [Java]

Googleアナリティクス(メニュー [行動] > [サイトの速度] > [速度の提案])で利用出来るPageSpeed Insightsを使うと、ご自身が管理しているWebサイトの速度を計測してくれ、問題点の指摘をしてくれます。
今回はこのツールで指摘される項目の中でも真っ先に対応すべきであろう項目の【ブラウザのキャッシュを活用する】に対応します。

0001_PageSpeedInsights

ラウザのキャッシュとは、画像ファイルやcss、Javascriptといった静的リソースをクライアントマシンに一時的に保存しておき、同じページ又はサイトで共通的に使用されるリソースをサーバから逐一取得する手間を省いて、クライアントに保存されているファイルを利用する事によりWebページを表示する時間を短縮する機能です。

このキャッシュを活用するには、サーバからのHTTPレスポンスヘッダに[Expires][Cache-Control]を書き込む必要があります。

キャッシュを意識してWebサイトを構築していないのであれば、上記ヘッダが存在しない為、キャッシュがコントロールされずPageSpeed Insightsに指摘されます。
ページの速度がGoogle検索結果に影響する事は明言されておりますので、これに対応する事もSEOの一環となるでしょう。

ここでは、キャッシュの対応をJava+Tomcatで実装しているWebアプリケーションに対して施します。
Javaで実装しているのであれば、レスポンスヘッダに[Expires][Cache-Control]を書き込むコードをAP内部に自前でコーディングしても対応出来ますが、今回はTomcat7から追加されたフィルタを利用します。

このフィルタは、Apacheでのキャッシュ対応で一般的に使われている「mod_expires」のTomcat版(ExpiresFilterクラス)です。

この対応で修正が必要となるファイルは1つ「web.xml」のみです。

まずは対応前の動作を確認してみましょう。

01css01image01js

のように、css、Javascript、画像の3種類の静的リソースのレスポンスヘッダには[Expires][Cache-Control]が書き込まれていないのが確認出来ました。
ここをPageSpeed Insightsは問題ありと判断してくれています。

次に、「web.xml」に対応コードを追記します。

web.xmlに下記フィルタを追加

<filter>
   <filter-name>ExpiresFilter</filter-name>
   <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
   <init-param>
      <param-name>ExpiresByType text/css</param-name>	<!--cssファイルの設定-->
      <param-value>access plus 10 minutes</param-value>	<!--仮に10分間キャッシュ有効-->
   </init-param>
   <init-param>
      <param-name>ExpiresByType application/javascript</param-name>	<!--Javascriptファイルの設定-->
      <param-value>access plus 10 hours</param-value>	<!--仮に10時間キャッシュ有効-->
   </init-param>
   <init-param>
      <param-name>ExpiresByType image</param-name>	<!--画像ファイルの設定-->
      <param-value>access plus 10 days</param-value>	<!--仮に10日間キャッシュ有効-->
   </init-param>
</filter>
<filter-mapping>
   <filter-name>ExpiresFilter</filter-name>
   <url-pattern>/*</url-pattern>
   <dispatcher>REQUEST</dispatcher>
</filter-mapping>

上記では、仮のキャッシュの設定として、cssファイルをアクセスから10分、Javascriptファイルをアクセスから10時間、画像ファイルをアクセスから10日間としています。

そして、上記対応後の動作を確認してみます。

02css02image02js

スポンスヘッダに[Expires][Cache-Control]が追加されているのが確認出来ます。
これで、cssは10分、Javascriptは10時間、画像は10日間有効なキャッシュとして保存されるようになり、対応完了です。
保存時間はそれぞれ適当な値に変更すべきでしょう。

細かい設定が面倒な方は、下記の設定で全リソース一律同じ値(ここでは1週間)の設定となりますので参考にしてください。
css、JavaScript、画像などの静的リソース全体に指定する場合

<filter>
   <filter-name>ExpiresFilter</filter-name>
   <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
   <init-param>
      <param-name>ExpiresDefault</param-name>
      <param-value>access plus 1 weeks</param-value>
   </init-param>
</filter>

<filter-mapping>
   <filter-name>ExpiresFilter</filter-name>
   <url-pattern>/*</url-pattern>
   <dispatcher>REQUEST</dispatcher>
</filter-mapping>

以上です。この対応によりPageSpeed Insightsのスコアは上がるでしょうし、実際にページ速度も速くなるはずですので、その結果Google検索の順位も良い方向に動くでしょう。

参考
Apache モジュール mod_expires
http://httpd.apache.org/docs/2.2/ja/mod/mod_expires.html

Apache Tomcat 7
http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#Expires_Filter

Tomcat ExpiresFilterクラス
http://tomcat.apache.org/tomcat-7.0-doc/api/org/apache/catalina/filters/ExpiresFilter.html


コメントを残す

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

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>