WordPressを高速化するための.htaccess設定のベストプラクティス

WordPressを高速化するための.htaccessのおすすめ設定を紹介します。

httpsにリダイレクト
MIME Typeの追加
ETags(Configure entity tags) を無視する設定
Enable Keep-Alive を設定
プロクシキャッシュの設定（画像とフォントをキャッシュ）
ブラウザキャッシュの設定
コンテンツ圧縮の設定
画像ファイルの.webp配信設定
まとめ

httpsにリダイレクト

GoogleはSSLの導入を推奨しています。サイトのhttps化は検索順位にも影響を与えます。WordPressを使った個人ブログでも、検索順位を重視する場合はhttps化を検討しましょう。

httpsにリダイレクトする場合は、.htaccessに以下の記述を追加します。場所は、WordPress基本設定の# BEGIN WordPressよりも上に記載します。www.example.comの部分は、サイトのドメインに置き換えてください。

# https にリダイレクト 
<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,QSA,L]
</IfModule>

MIME Typeの追加

.ico、.svg、.ttf、.woff、.otf、.eotなどの拡張子のファイルを使えるように、MIME Typeを追加します。

# 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>

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

ETagsはブラウザのキャッシュとWebサーバー上のオリジナルが一致しているかを判断するための仕組みです。同じような仕組みにLast-Modifiedというものがあり、通常はLast-Modifiedだけで十分なので、トラフィックを抑えるためにETAGは無効にします。

# ETags(Configure entity tags) を無視する設定
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
FileETag None

Enable Keep-Alive を設定

Enable Keep-Aliveを有効にすると、ブラウザとサーバー間のやり取りが軽減され、WordPressサイトの高速化に貢献します。

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
  Header set Connection keep-alive
</IfModule>

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

画像とフォントファイルのキャッシュを設定します。WordPressサイトの高速化に貢献します。

# プロクシキャッシュの設定（画像とフォントをキャッシュ）
<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>

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

ブラウザのキャッシュを設定します。WordPressサイトの高速化に貢献します。

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
  ExpiresActive On

  # キャッシュ初期化（1秒に設定）
  ExpiresDefault "access plus 1 seconds"

  # MIME Type ごとの設定
  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>

コンテンツ圧縮の設定

コンテンツをサーバー側で圧縮してから配信することで、トラフィック量が軽減され、WordPressサイトの高速化に貢献します。

# コンテンツ圧縮の設定
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE

  # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
  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>

画像ファイルの.webp配信設定

WebP（ウェッピー）はGoogleが開発した新しい画像のフォーマットです。JPGやPNGよりも軽量で、Webでの使用に適しています。サーバーに同じファイル名で、拡張子のみ異なる.jpg（もしくは.jpeg、.png）ファイルと.webpファイルが存在する場合、.webpファイルを優先して配信するように設定します。.webpファイルはEWWW Image OptimizerというWordPressプラグインで自動生成することができます。

# 画像ファイルの.webp配信設定
<IfModule mime_module>
　　AddType image/webp .webp
</IfModule>
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

まとめ

最後に、今回紹介した.htaccessの設定をまとめて紹介します。

www.example.comの部分は、サイトのドメインに置き換えてください。

# https にリダイレクト 
<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,QSA,L]
</IfModule>


# BEGIN WordPress
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.php [L]
</IfModule>
# END WordPress


# 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>


# 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>


# プロクシキャッシュの設定（画像とフォントをキャッシュ）
<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/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>


# コンテンツ圧縮の設定
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE

  # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
  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>


# 画像ファイルの.webp配信設定
<IfModule mime_module>
　　AddType image/webp .webp
</IfModule>
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>