htaccessでSEO対策！意外と見落としがちなキャッシュ設定でサイトの高速化

投稿日
2022年06月21日
更新日
2022年06月21日
SEO

この記事のレベル

初心者向け
4
難易度
1

htaccessに貼るだけでサイトの高速化!

どうも。HIROです。

ブログを初めてサイトの高速化の難しさに直面している今日このごろですが、
皆さまも日々サイトの高速化に勤しんでいることと思います。

さて、最近のサーバーですと、サーバーのコントロールパネルなどで操作できますが、XSERVER等を利用している場合は自分で設定しないといけません。
そこで、.htaccessを使ったサイトの高速化を解説させていただきます。

解説する前に、webサイトでは全てキャッシュさせれば良いというものでもありませんので、注意ください。

更新頻度が低く量量が大きいファイルは.htaccessにブラウザキャッシュを設定して高速化しましょう。
逆に更新頻度が高いファイルはユーザーのためにキャッシュをさせないでおくべき（無効化）ですね。

Apacheの「mod_deflate」というモジュールを使用するので、Apacheウェブサーバー（完全互換のLiteSpeedウェブサーバーも可）でしか使えません。

ETags(Configure entity tags) を無視する設定

ETagは、ブラウザのキャッシュと、サーバーのファイルを内容や更新日などが同じかどうかを比較するデータです。

ETag はリクエストごとにブラウザから送信されるので、そのたびにサーバーは ETag 情報を生成し比較しています。

余計な処理が増えるので除去してしまった方が高速化します。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Enable Keep-Aliveを設定

設定しておくと、GTmetrix の成績が向上しますｗ

<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>

プロクシキャッシュの設定（画像とフォントをキャッシュ）

Web にアクセスしてきた人の通信経路にプロクシサーバーがあった場合のキャッシュ設定です。

画像やフォントファイルなどを設定しています。

<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|webp|gif|svg|swf|pdf|ttf|woff|otf|eot)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

MIME Type 追加

MIMEタイプとは、Webサーバーとブラウザがデータのやりとりをするときに、ファイルの種類を識別するための文字列のことです。

PC上や人間は「.html」や「.jpg」などの拡張子でファイルを識別しますが、Webサーバーとブラウザ間では拡張子ではなくMIMEタイプでファイルを識別します。

<IfModule mime_module>
AddType image/x-icon .ico
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
AddType application/x-font-opentype .otf
AddType application/vnd.ms-fontobject .eot
</IfModule>

ブラウザキャッシュの設定

キャッシュを設定しておくことで、1度読み込んだファイルをブラウザ側で保持することができます。

サーバーを経由する必要がないので、すばやくWebサイトが表示されます。

<IfModule mod_headers.c>
<ifModule mod_expires.c>
ExpiresActive On
# キャッシュ初期化（1秒に設定）
ExpiresDefault "access plus 1 seconds"
# MIME Type ごとの設定
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/webp "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>
</IfModule>

Gzip圧縮の設定

念のため、Mozilla 4系など古いブラウザで Gzip の圧縮をしない設定を追加してます。

<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
# プロクシサーバーが間違ったコンテンツを配布しないようにする
Header append Vary Accept-Encoding env=!dont-vary
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE image/svg+xml
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
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

まとめ

いかがですか？

開発度に若干書き方は変わりますが、XSERVERを利用されている方はこれ一発でPageSpeed Insightsのスコアも向上するはず！？

是非、.htaccessでのキャッシュ設定をお済みでない方は、是非試してみてくだささい～

.htaccessを上書きする前に、必ずバックアップを取る事を忘れずに！

サーバーから.htaccessファイルを削除してしまうと、設定が初期設定に戻るサーバーもあるのでご注意ください

コードまとめ

# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
    Header unset ETag
</ifModule>
FileETag None
# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>
# MIME Type 追加
<IfModule mime_module>
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>
# プロクシキャッシュの設定（画像とフォントをキャッシュ）
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|otf|eot)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>
# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
    ExpiresActive On
    # キャッシュ初期化（1秒に設定）
    ExpiresDefault "access plus 1 seconds"
    # MIME Type ごとの設定
    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/webp "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>
</IfModule>
# Gzip圧縮の設定
<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
    # プロクシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    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
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

おすすめの記事

新着記事