誰でもできるWordPressを高速化する7つの方法

WordPressでブログやサイトを運営していると、「ページが重い!」という悩みがあります。ページが重いと、ユーザーの離脱につながります。また、Googleはページの表示速度をランキングに利用していると宣言しており、遅いサイトはSEOにも不利です。

モッサリしたサイトよりも、サクサク見れるサイトのほうが良いですよね!

今回は、WordPressの表示速度を高速化するために、誰でも出来て、効果のある7つの方法を紹介します。設定が難しいプラグインや、サイトのレイアウトが崩れてしまう可能性があるプラグイン、効果が微妙な方法は除外してあるので、安心して試してください。

WordPressに特化したレンタルサーバー、「大量アクセスにも対応したWordPress専用の高速レンタルサーバー『wpX』」もおすすめです。

目次

  1. サイトの速度を測定する
  2. 不要なプラグインやCSS、Javascriptを削除する
  3. 画像を圧縮する
  4. ファイルの圧縮を有効にする
  5. キャッシュの有効期限の設定する
  6. mod_pagespeedを有効にする
  7. CDNを利用する

1. サイトの速度を測定する

まずは、サイトの速度を測定しましょう。

測定には、Googleの公式サービス「Google PageSpeed Insights」を使います。測定結果をスコアで表示して、改善点を挙げてくれます。

cap3

速度改善の施策を行って、実際に改善されたかどうか、改善前後でスコアを比較することが大切です。

サイトの速度を測定できるツールには、他にも「Pingdom Website Speed Test」や「GTmetrix」などがあります。

2. 不要なプラグインやCSS、Javascriptを削除する

基本中の基本として、まずは使っていないプラグインやCSS、Javascriptがないか、見直してみましょう。プラグインは入れれば入れるほど、サイトが重くなります。最小限のものだけ利用するようにしましょう。

3. 画像を圧縮する

WordPressに限らず、サイトが重い場合、その原因の多くは「画像の重さ」にあります。大きな画像を使ったサイトや、写真がたくさん掲載されたページが増えてきましたが、画像をそのままアップすると、回線を圧迫してしまいます。

まずは、画像を圧縮して、サイズを小さくすることが、速度改善の一番の近道です。

WordPressで画像を圧縮するには、「EWWW Image Optimizer」という便利なプラグインがあります。プラグインをインストールしておくだけで、画像をアップロードすると、自動的に圧縮を行なってくれます。また、過去にアップロードした画像の一括圧縮もできる優れものです。

cap05-1-650x209

個別に画像を圧縮したい場合は、「TinyPNG」などのサービスを利用しましょう。

参考:画像をもっと軽くしよう!おすすめ画像圧縮サービス3選

4. ファイルの圧縮を有効にする

「mod_deflate」という仕組みを利用することで、サーバーでhtmlやcssなどのファイルを圧縮して、転送量を減らすことができます。

mod_deflateを利用するには、「.htaccess」に下記を記述します。(※利用しているサーバーによっては、mod_deflateが使えないことがあります。)

<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
  
  # gifやjpgなど圧縮済みのコンテンツは再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
  
  # htmlやcssなどは圧縮
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

参考:Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法 | OXY NOTES

5. キャッシュの有効期限を設定する

画像やCSS、JSに対して、キャッシュの有効期限を設定しておくと、一度ブラウザで読み込んだファイルは有効期限までは同じファイルを再利用します。ファイルの転送量を削減できます。

Googleでもキャッシュの有効期限を設定することが推奨されています。

ブラウザのキャッシュを有効にするには、.htaccessに下記を記述します。(※利用しているサーバーによっては、mod_expiresが使えないことがあります。)

<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/javascript "access plus 1 weeks" 
  ExpiresByType application/javascript "access plus 1 weeks" 
  ExpiresByType application/x-javascript "access plus 1 weeks"
  ExpiresByType text/html "access plus 1 weeks"
  ExpiresByType image/x-icon "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 application/pdf "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>

キャッシュの有効期限が設定できたかどうか確認する方法は、「Chromeのデベロッパーツールでキャッシュの有効期限を調べる方法」を参考にしてください。

6. mod_pagespeedを有効にする

「mod_pagespeed」はGoogleが開発した、Webサイトの速度を向上するための仕組みです。

mod_pagespeedを有効にすると、ファイルの圧縮、キャッシュの有効期限設定など、上記で紹介した施策を自動で行ってくれます。

mod_pagespeedを有効にすると、下記の処理が実施されます。

  • CSSファイル、JavaScriptファイルなどの圧縮
  • 最適な画像タイプへの変換、軽量化
  • 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
  • CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
  • 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

mod_pagespeedを有効にするには、.htaccessに下記を記述します。(※利用しているサーバーでmod_pagespeedが使えるかどうか、事前に確認しておきましょう。新しい仕組みなので、デフォルトで利用できるサーバーは、まだ多くありません。)

ModPagespeed On

参考:mod_pagespeed設定について | エックスサーバー

7. CDNを利用する

サイトのアクセス数が増えてきたら、「CDN(コンテンツデリバリーネットワーク)」を利用しましょう。

CDNは、画像やCSSなどを自前のサーバーから配信するのではなく、世界中にある専用ネットワークから配信する仕組みのことです。

閲覧者に近いネットワークから配信されるので、自前のサーバーの負担が軽くなり、高速な配信が可能になります。

ただし、CDNを利用すると、ファイルの圧縮や有効期限の設定が、配信を行うCDN側の設定になってしまい、コントロールができなくなってしまいます。

また、通常、アクセス数が少ないうちは自前のサーバーの性能で充分なので、あまり利用するメリットがありません。アクセス数が多くなってきて、自前のサーバーのスペックでは対応できないという時に利用しましょう。

WordPressにも幾つかCDNのプラグインがありますが、一番のおすすめは「Jetpack by WordPress.com」というプラグインの「Photon」という機能です。

cap5

JetpackはWordPress公式プラグインのようなもので、複数の便利な機能がJetpack という一つのプラグインにまとまって入っています。

その中に「Photon」という機能があります。Photonを有効にすると、WordPress.comのCDNから、画像を配信することができます。画像という一番ネットワークを使用するファイルをCDNから配信することができるので、効果が出やすいです。

Jetpackをインストールしたら、Jetpack > 設定 から、「Photon」を有効化するだけで利用できます。細かい設定は必要ありません。

cap4

まとめ

WordPressの高速化で大切なのは、施策の効果が出ているかどうか、一つ一つ計測することです。検索をすると、色々な施策が紹介されていますが、サイトとの相性で効果が出にくいもの、速度が遅くなってしまうものもあります。

最初に紹介したサイトの速度を計測できるサービスを利用して、効果があるかどうか、きちんと確かめながら、速度改善に取り組みましょう。