【高速化・コピペOK】「.htaccess」を使ってブラウザキャッシュの保存期間を指定する

トップ
技術
【高速化・コピペOK】「.htaccess」を使ってブラウザキャッシュの保存期間を指定する

2019年10月01日

技術

WEBサイトの表示速度の改善は様々な方法がありますが、キャッシュを使った速度改善方法はポピュラーです。

そのキャッシュを使った方法の中でも、ブラウザにWEBサイトの画像やcss、javascript等のファイルを記憶させ、次回訪問時のページの表示速度を改善させる方法を紹介します。

設定準備

キャッシュの保存期間の指定以外に、ページ速度対策では大切な「gzip圧縮」についても紹介します。

WEBサイトのルートディレクトリより、.htaccessファイルをダウンロードしてください。
念のため、バックアップを取っておいたほうが良いでしょう。

また、サーバーによっては以下に対応していないと設定できません。

キャッシュの保存期間を指定するにはApacheサーバーのmod_expiresが有効
gzip圧縮はApacheサーバーのmod_deflateが有効

設定方法

.htaccessファイルに以下の内容を追加してください。

<IfModule mod_expires.c>
    ExpiresByType text/css "access plus 1 weeks"
    ExpiresByType text/js "access plus 1 weeks"
    ExpiresByType text/javascript "access plus 1 weeks"
    ExpiresByType image/gif "access plus 1 weeks"
    ExpiresByType image/jpeg "access plus 1 weeks"
    ExpiresByType image/png "access plus 1 weeks"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 weeks"
    ExpiresByType application/javascript "access plus 1 weeks"
    ExpiresByType application/x-javascript "access plus 1 weeks"
    ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>

「ExpiresByType text/css “access plus 1 weeks” 」の箇所はCSSについての指定なので、もし頻繁にCSSを変更したり検収期間などの場合は任意の期間に変更した方がいいでしょう。

Gzip圧縮の設定

ページ速度調査ツール等で調べてみると、よく指摘されるのが「gzip圧縮」です。
こちらも、.htaccessの編集から設定でき、ファイルを圧縮することによって、転送するデータ量を少なくし表示速度の改善に期待できます。

<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-woff
    AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

上記の内容を.htaccessファイルに追加してください。