【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

12Apr2012

WordPressの高速化テクニック 2012年版

WordPressはPHPで作られているので、アクセスの度にサーバーサイドで動的に生成されています。
その為、使用しているサーバーやサイト構成によって「静的ページに比べて表示が遅い!!」という事もしばしば。。

他にもサイト表示が遅くなる原因は様々あり、それらを改善するプラグインもリリースされています。

サイトパフォーマンスは検索順位に影響を与えると言われていますので、SEOにも効果があります。
SEOうんぬん以前に、表示の遅いサイトはユーザーに嫌われちゃいますよね^^;

今回はWordPressを高速化するテクニックをご紹介します。

もくじ

1. キャッシュ作成プラグイン

1.1. キャッシュを生成して、動的生成を回避する
1.2. Quick Cacheのインストールと設定
1.3. Quick CacheとWPtouchを同時に使う際の注意点

2. データベースもキャッシュする

2.1. データベースのクエリをキャッシュするプラグイン
2.2. DB Cache Reloaded Fixのインストールと初期設定

3. ヘッダーを整理整頓!

3.1. プラグイン「Head Cleaner」
3.2. インストールと初期設定

4. 画像を最適化する

4.1. 画像サイズを小さくするSmush.it
4.2. WP Smush.itのインストールと使い方
4.3. WP Smuch.itの効果と注意点

5. 更にマニアックな高速化を目指すなら

5.1. 一つのサイトからデータを取得するから遅くなる
5.2. 簡単な分散処理の手順

1. キャッシュ作成プラグイン

1.1. キャッシュを生成して、動的生成を回避する

WordPressが遅くなる原因の一つが冒頭でも触れた”動的生成”という件。

キャッシュ生成プラグインをインストールすると、サーバーにページのキャッシュを作成してくれます。
どういうこと?というと、静的なページを準備しておいてアクセスがあった時にそれを読み込むイメージです。
キャッシュ生成プラグインを導入すると、環境によっては劇的に表示速度が向上します。

キャッシュ生成プラグインで有名な物は以下の2つ。

WP Super Cache
Quick Cache

このサイト(ty’s empty f’log)は現在「Quick Cache」を使用しています。

1.2. Quick Cacheのインストールと設定

Quick Cache

インストールすると管理パネルの左メニューに「Quick Cache」という項目ができますので、そちらで初期設定を行います。

インストールした時点では無効になっているので、必ず有効にしてください。

Quick Cacheの初期設定

1.3. Quick CacheとWPtouchを同時に使う際の注意点

キャッシュの生成されたページは、以降キャッシュを読み込んで表示されます。

その為、スマホ表示プラグインWPtouchをインストールしている場合には少し問題が起きてしまいます。

PC用サイトのページがキャッシュされた場合はスマホでアクセスしてもPCサイトが表示されてしまい、またその逆の現象も発生します。

この問題を回避する為に、スマホからのアクセス時にはキャッシュを使わず必ず動的生成する、という設定を行いましょう!

Quick CacheとWPtouchを同時に使う場合の注意点

w3c_validator
BlackBerry
iPhone
Android

例ではBlackberryも登録してありますが、アクセス解析を見たところ当サイトのBlackberryからのアクセスは0です^^;

2. データベースもキャッシュする

2.1. データベースのクエリをキャッシュするプラグイン

“データベースのクエリ”が何の事だかわからないと思いますが、問題ありません 笑

要は、先ほどのキャッシュ系プラグインが「ページ」を準備しておくのに対して今回のプラグインは「データベース」を準備しておきます。
データーベースの中には”サイトの基本情報”など毎回毎回呼び出される”クエリ”がありますので、それを毎回データベースから引っ張り出さずに近い場所においておこう。という事です。

データベースをキャッシュすることで、サイト表示だけでなく管理画面の表示も高速化します!

2.2. DB Cache Reloaded Fixのインストールと初期設定

DB Cache Reloaded Fix

インストールしたプラグインを有効化します。

その時点ではプラグインは動作していませんので、設定画面で「有効」にチェックを入れます。

DB Cache Reloaded Fixのインストールと初期設定

3. ヘッダーを整理整頓!

3.1. プラグイン「Head Cleaner」

プラグイン「Head Cleaner」をインストールすると、<head>と<footer>内の整理整頓をしてくれます。

これまで紹介したキャッシュ系プラグインでは、サーバー側の処理の高速化でした。
今回のプラグインは、クライアント側の高速化に効果があります。

3.2. インストールと初期設定

Head Cleaner

※僕は手動で整理しているので実は使ったことのないプラグインです。無責任で申し訳ありませんが製作者様のサイトを参考にしてください^^;

作者”をかもと”さんのサイト: 
Head Cleaner (仮)
Head Cleaner (仮) で、なぜ速くなるのか?

4. 画像を最適化する

4.1. 画像サイズを小さくするSmush.it

画像ファイルには画像データ以外にメタデータと呼ばれる情報が含まれています。

・撮影したカメラ名
・撮影日時
・加工ツール名

など、はっきり言って余計なデータです。

米YahooのSmush.itというサービスを使うと、これらメタデータを削除してくれます。

このSmush.itをWordPressで手軽に使えるようにするのが、プラグイン「WP Smush.it」です。

4.2. WP Smush.itのインストールと使い方

WP Smush.it

インストールして有効化すると、以降、アップロードするファイルは自動的にSmush.it経由で最適化されます。

[管理画面 – メディア]では、過去にアップした画像も最適化することができます。

WP Smush.itの使い方

[管理画面 – メディア – Bulk WP Smush.it] では、全てのファイルを一括で最適化することができます。が、僕は怖いので使ったことはありません^^;

4.3. WP Smuch.itの効果と注意点

サイズの小さいファイルでは相対的にメタデータの比率が多くなりますので、数字上ではかなりサイズが小さくなります。

例: 上(4.2.)で使われている画像の場合

元ファイル 37,509バイト
アップ後  30,264バイト

ファイルサイズベースで考えると、クライアントがダウンロードするデータの大半は画像ですので、地味ながら画像サイズを小さくすることで表示速度は確実に向上します。

ただし管理者的には画像をアップする際の待ち時間が”かなり”長くなってしまいますので、この点は注意してください。

5. 更にマニアックな高速化を目指すなら

5.1. 一つのサイトからデータを取得するから遅くなる

これはWordPressに関わらず、WEBサイトを運営する上での根本的なサイトパフォーマンス高速手法です。

1ページを表示する際、通常は

・PHPの処理
・データベースの処理
・ページデータの出力
・画像データの出力

などが同一のサーバー上で行われます。

この処理を複数のサーバーに分担させることで、表示速度が改善されます。

と言ってもPHPやデータベースサーバーを別にすることはできませんので、“画像”を別サーバーにアップすることになります。

サーバー技術者の手にかかれば全てを分散処理できるかもしれませんが、僕ら一般ユーザーには非現実的ですね^^;

5.2. 簡単な分散処理の手順

数多くある画像共有サービスを活用しましょう!

・Piaca
・flickr
・フォト蔵

などなど。

ただし速度向上を目的として分散処理をする場合は、画像サーバーの速度が速い事が前提となります。
WordPress設置サーバーに全て任せたほうが速いのでしたら意味がありません。

速度がでないとしても無料の写真共有サイトを使うと、サーバー容量を圧迫しない、という利点はあります。

画像を写真共有サイトにアップする方法は、多くの人が手軽に実践している方法ですので、興味がありましたら是非チャレンジしてみてください!

関連記事