Welcart カスタマイズ ブログ

ブラウザのキャッシュを活用して、表示速度アップ

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

WordPress用に、表示速度を上げるキャッシュ系プラグインは数多くあります。しかし、Welcartではセキュリティ上の観点から、キャッシュ系プラグインは気軽に取り入れるべきではありません。

キャッシュ系のプラグインは、一度動的に生成されたウェブページを静的ページとして圧縮して、サーバー上の別の場所に保管し、次にアクセスがあった場合に表示させます。保存されたページがWelcartの会員ページであった場合、他の閲覧者から会員情報が見えてしまうといったことが、実際に起きているそうです。

一方、ブラウザのキャッシュ機能は、閲覧者のローカルのパソコン上に、閲覧者が一度開いたページを記録する「一時ファイル」とも呼ばれるものです。

閲覧者が同じページを一定期間内に2回以上訪問する際、以前のデータがパソコンに残されているため、表示が早くなる、といった仕組みです。

.htaccessを設定

ウェブサイトをブラウザにキャッシュさせるには、.htaccessに以下の文言を書き込むだけです。

（参考）ページの表示速度を改善する Web Design Leaves

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 30 minutes"
ExpiresByType text/html "access plus 10 seconds"
ExpiresByType image/jpg "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
</ifModule>

• サーバーが「mod_expires」に対応している必要があります。
• 期間はサイトの運用状況によって要変更とのこと。

上記サイトが詳しいので、是非ご覧になってみて下さい。

.htaccessファイルは、パーマリンクを変更する際に自動的に生成されます。WordPressのインストールフォルダ直下またはWordPressフォルダと同じ階層にあります。

私の場合はドメイン直下にWordPressをインストールしており、.htaccessはWordPressフォルダと同じ階層に生成されますので、それを使っています。

.htaccessがない場合は、テキストエディタで内容が空のまま「.htaccess」というファイル名で保存して作成します。

PageSpeed Insightsの推奨事項

GoogleのPageSpeed Insightsでは、キャッシュの保存期間を最低1週間の設定を推奨していますので、上記の例では1週間以上としています。

しかしながら、「ページの更新が頻繁で、古いページがお客様に表示されてしまっては困る・・・」という場合には、1週間以下でも大丈夫とのことです。

（参考）Leverage Browser Caching

ブラウザのキャッシュの活用の設定後のPageSpeedスコア

このサイトで、.htaccessに上記内容を記載する前・後の、PageSpeed Insightsのスコアを比較してみました。

.htaccess設定前 モバイル：71・パソコン：83

.htaccess設定後 モバイル：77・パソコン：90

ブラウザのキャッシュの設定を.htaccessに加えるだけで、PageSpeed Insightsの評価が劇的に改善されました。

同じことの繰り返しになりますが、ブラウザのキャッシュはローカル環境にウェブサイトのデータを保存します。ユーザーが一定期間内に2回目以降にサイトに訪れた際に、表示スピードが早くなる仕組みです。

画像を軽くする「画像を最適化する」方法とは違い、一見さんにとっては体感的に読み込み速度が速く感じられるものではないと思います。

しかしながら、ブラウザキャッシュの活用についてGoogleは、読み込み速度を速くさせる要因として評価し検索順位に反映させているようですので、サーバーのスペックが許せば是非取り入れたい対策方法です。

• WelcartのSEO対策
• セキュリティー

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook