.htaccessでできるウェブサイト高速化対応

.htaccessのみで簡単にできるウェブサイト高速化をご紹介します。

httpsによる高速化
コネクション継続（Keep-Alive）の有効
Etagを無効にする
ブラウザキャッシュの有効
キャッシュコントロールヘッダーの有効
gzip圧縮の有効
まとめ

httpsによる高速化

「RewriteEngine On」より下に以下を追加しましょう。

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

これだけで、常時SSLページとなります。（そもそも証明書が取得していないサーバの場合は、取得し設定しましょう）

SSLはGoogleでも推奨しており、検索順位にも影響します。また、HTTP/2対応のサーバであれば、多少なりのウェブサイト高速化が見込めます。

※ HTTP/2とは、「Hypertext Transfer Protocol version 2」の略で、今まで使ってきたHTTP/1.1のバージョンだと１リクエスト送信したら結果が待つのに対し、HTTP/2では次から次へとリクエストを送信して結果を待つため、大量の複数ファイルを読み込むウェブページでは以前よりも高速に表示することができます

コネクション継続（Keep-Alive）の有効

コネクションヘッダにKeep-Aliveを設定することで、１度接続したコネクションを再利用し接続処理を削減することで高速化を図ることが可能です。しかし、サーバ側はいつコネクションが使用されなくなったか分からず、いつまでも開いたままになってしまうため、アクセスが多いウェブサイトだと逆にコネクションが多くなりサーバが圧迫されサイト全体が重くなってしまうので注意が必要です。

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

Etagを無効にする

通常はLast-Modified（最終更新日）でブラウザキャッシュとサーバファイルが異なるかをチェックしますが、EtagはURLごとにユニークIDを生成することで最終更新日より柔軟にファイル更新チェックするため、動的かつ更新頻度が高いサイトでは有効な機能になります。

しかし、Etagはサーバごとに異なるIDが生成されるため、複数サーバで生成されたウェブサイト環境では、あまり意味がなく余計な処理となってしまうため無効にした方が良いです。

<ifModule mod_headers.c>
    Header unset ETag
</ifModule>
FileETag None

ブラウザキャッシュの有効

ブラウザキャッシュを有効にすることで、一度訪れたサイトは、表示速度が向上します。

<IfModule mod_headers.c>
<ifModule mod_expires.c>
  ExpiresActive On

  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 weeks"
  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 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 weeks"
  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-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>

キャッシュコントロールヘッダーの有効

上記のブラウザキャッシュでExpiresを設定している場合、Cache-Control: max-ageを設定すると無駄になるので省きます。

<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>

gzip圧縮の有効

画像、CSS、JS、フォントなどのコンテンツファイルを圧縮してから配信することで、トラフィックが軽減され、表示速度が大幅に向上します。

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE

  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

  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>

まとめ

.htaccessの上記設定だけでも、高速化が図れ、GoogleのPageSpeed Insightsでも点数が良くなるのでやっておいた方が良いと思います。ブラウザキャッシュとgzipだけでも効果はありますので是非、お試し下さい。

BLOGブログ