できることからはじめる、パフォーマンス最適化プラグイン7選

結局のところサイトパフォーマンスの高速化に最も効果的なのは「CDN使って画像をそっちから出すのが一番じゃね?」なんて思い始めたこもりです、こんにちは(笑)。いや、CDN使うのもいいのですが、その前提としてサイト全体をしっかり最適化しておくに超したことはありません(その方がより効果的なわけです)。

speedup-wp

そんなわけで、今日は誰でもできることから段階的に適用する感じで、WordPressのパフォーマンス向上に役立つであろう素敵なプラグインを7つ紹介してみたいと思います。

まずは、画像を最適化する

サーバ環境のこととか特別な知識も必要とせず、誰でもできる高速化の第一歩といえば、サイト内で使用する画像の最適化でしょう。WordPressにアップロードするJPGやPNGといった画像を自動的にスリムアップするのです。

WP Smush.it

「WP Smush.it」は、アップロードする際に自動的に「Yahoo! Smush.It™」を経由させて、画像から不要な部分を削除してくれます。PhotoshopやFireworksで書き出しただけの画像じゃまだまだです(笑)。画像の内容や形式で変わってきますが、JPGで10〜20%程度、PNGで1〜2%程度は軽量化できるんではないかと。

ただし、テンプレートとかの画像は最適化されませんので、それは別のツールやオンラインサービスを使いましょう。

DBへの問い合わせをキャッシュする

WordPressは、ファイルのリクエストがあればデータベースに問い合わせをして、その都度HTMLファイルを生成する仕組みです。テンプレートからページを生成するデータの呼び出し処理をキャッシュして使いまわせば、DBへのアクセス頻度を減らすことができるはずでしょう。その分の負荷を減らそうかと。

DB Cache Reloaded Fix

「DB Cache Reloaded Fix」は、そのようなバックエンドの処理をキャッシュするプラグインです。動的に都度生成されるHTMLをキャッシュするのとは別に、まずは頻繁にアクセスするであろうDBへの問い合わせをキャッシュし、生成処理自体を高速化・最適化してしまおうというものですね。

HTML、CSS、JSを最適化する

バックエンドの次はフロントエンドの最適化です。

WordPressに限った話ではないですが、多くのCMSではプラグインやテーマを使ってサイトを拡張することができます。あれもこれもと導入するのはいいのですが、結果として待ち受けているのはクライアントに送信されるHTMLがごちゃごちゃしたり肥大化してしまうことがあげられます。

Head Cleaner

@wokamotoさんが公開されている「Head Cleaner」は、プラグインやテーマによってあれこれ追加されてしまっているhead要素内を最適化してくれるプラグインです。もはや最適化というレベルを超えて、あれやこれやと高速化に役立つ処理を一手に引き受けてくれます。

フロントエンドに関係する部分を最適化することは、結果としてHTTPリクエスト数や転送サイズの削減に繫がるわけです。

静的なHTMLを作ってキャッシュする

WordPressの高速化で有名なのは、リクエストに応じて動的に生成されて送信されるHTMLを静的なHTMLファイルとしてキャッシュしてしまうプラグインの導入でしょうか。

一度リクエストがあって生成されたファイルは、有効期限内はディスクやメモリ内に保存されてそれが代用されるというものですね。頻繁にアクセスのあるようなサイトは生成処理をすっ飛ばして、保存されたHTMLを送り返す方が速いんじゃないか?って話。

WP Super Cache

いまさら説明の必要もないほど有名なプラグインです。環境に合わせて設定方法というか適用方法もいくつか用意されています。キャッシュの処理とあわせて、Gzip圧縮をかけてHTMLファイルそのものを小さくするなんてこともできます。

Quick Cache ( A WP Super Cache Alternative )

「Quick Cache」は名前にもあるようにSuper Cacheの代用になるプラグインです。他にも「Hyper Cache」とかありますが、最新版にも対応しているみたいなのでこっちを紹介。ボクはインストールしたことはありませんが、サイトのスクリーンショットやChangeLogなんかを見ると良い感じに思えますね。

キャッシュ系のプラグインは「入れる・入れない」の線引きが難しいかもしれませんが、非力なサーバ環境で負荷を減らしたいとか、ページ公開時にはアクセスが集中するといったサイトなら利用価値はあるんじゃないかと。

さらにCDNをかましてみる

全体的なページのロード時間は、HTMLファイルがダウンロードされてからが勝負です。HTML内に記述された構成要素が同じサーバから配信されていたら、順番にローカルにダウンロードされてくるのを待ってなくてはなりません。数が増えれば増えた分、データサイズが大きければ大きい分、データがダウンロードされてページ表示が完成するまでの時間がかかるわけです。

CDN(Contents Delivery Network)は、冒頭にも書いたように全体的なページのロード時間の短縮には結構良いものです(笑)。サイト内の画像、CSSやJSファイルをCDN側にも置いておけば、1サイトから全部配信されていた膨大なファイルを、閲覧側に近い高速なネットワークから配信させることができます。

CDN Sync Tool

「CDN Sync Tool」は、WP Super Cacheと併用して利用するCDNの同期プラグインです。説明には、AmazonのS3やCloudFront、CloudFiles、MaxCDNといった大手のCDNサービスの名前が列挙されています。

CDNはサービスによって、オリジナルのファイルをこちらからアップロードするのか、ファイルのリクエスト時に勝手に拾うのか、みたいな仕組みが異なります。その辺の処理(ファイルの同期をとる)を勝手にやってくれるツールと思えばいいでしょうか。

最近ではこのような既存のCDNサービスではなく、無償プランもある「CloudFlare」というサービスが人気のようです(WordPressのプラグインもある)。CloudFlareは、大元のDNSの情報から書き換えないといけないので導入できる環境がやや限定的ですかね。

ちなみに我が家は、先日も書いたとおりEdgeCastのCDNを使っています。記事中の画像だけを扱うサーバと、テンプレート中の画像やJSファイルを分けて、計3サイトからダウンロードされるようにしています。

全部まとめてやるなら、W3 Total Cacheで

ここまで段階的に適用できるWordPressのプラグインを紹介してきましたが、冒頭の「WP Smush.it」以外の処理を一気にできるプラグインもあります。

W3 Total Cache

「W3 Total Cache」はうちも入れてるのですが、それこそページキャッシュからMinify化、DBキャッシュ、サーバ側で処理したりするブラウザキャッシュの追加、CDNのサポートまで何から何まで一個で補えるプラグインです。いや、ホントに何でもかんでもできちゃいます。

最後に

ここまでいくつかのプラグインを段階的に紹介してきましたが、何も全部入れる必要はありません。配信するサイトの内容によって組み合わせの妙というのもあります。静的なHTMLファイルキャッシュさせるさせないはおいておいて、画像やDBへのアクセス、フロントエンドの最適化だけでも十分効果はあります。PHPによる動的な処理云々ではなく、多くの画像が含まれていてボトルネックになってる場合は、CDNの導入を考えてみるのもひとつの手かもしれません。

自分のサイトが遅い原因が、PHPによる動的処理なのか、サイトの作り方の問題なのか、を見極めることが最初にやるべきことです。それがわかったら、ココで紹介したものを試していくのが良いでしょう。

おまけ

一般的にいわれることですが、CSSやJSのような更新頻度の少ないファイルは、クッキーの付かないCDNなどの外部サーバから配信するのが高速化に良いとされています。HTMLファイルがダウンロードされると、次はそこに記述されたCSSやJSはもちろん画像などが順次ダウンロードされます。

ここ数日検証しながらふと思ったのですが、HTMLと一緒にページのレイアウトやデザインをつかさどるCSSをどこに置いておくのがいいのか、という問題がありました。外部のサーバに置いた場合は、DNSでそのサーバのIPアドレスを調べる時間がかかるため、初回の接続には微々たるものですが時間がかかります。

特にCSSなんてのはHTMLの頭にあるので真っ先にダウンロードが始まります。また、そこにはCDN側においた背景画像として使っている画像なんかもあります。それを考えるとCSSだけは同じサーバからの方がいいんじゃないかな?なんていう暫定的な結論に達しました(うちの場合は、CSSは一個しかないので)。

Tags: , , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE