@web_shufuです。素人ですが、色々やってみたら、Google PageSpeed Insights で普通に90点を超えられるようになったので、これまでやった高速化対策をまとめました。

上の結果は当ページで計測しました。

表示速度はなぜ速くないといけないのか

表示速度が遅いと、

• トラフィック
• 売上
• 顧客満足度
• 顧客そのもの
• 検索順位

などを失います。

さらにこれらはお互いに影響し合い負のスパイラルを形成します。

…と小難しいことを言う前に、サイトが遅くて閲覧者をイライラさせたらろくなことはないですよね。高速化は必要です。特に遅くなりがちなWordPressサイトでは。

高速化の第一歩は現在のページスピードの把握

高速化の第一歩は現在の表示スピードの計測です。

速度を計測するツールはいっぱいあるのですが、中でも重視すべきはGoogle PageSpeed Insights です。

ページのスピードがSEOにも関わるのですからGoogleさんのツールを使うのが一番いいと思います。

• PageSpeed Insights

Google PageSpeed Insights以外のツールはこちらにまとめました。

高速化の基礎的方針

私のような素人が高速化に取り組む際の指針としては、「サイト高速化の「戦略」と「戦術」- GradeAのその先へ | ゆっくりと…」の次の部分が分かりやすいです。

その意味でページの高速化を一言で言い表せば、「縦と横を短くすること」に尽きます。「縦を短くする」とは

• 外部リソースに対する HTTP リクエストの「数」を減らす

ことに他なりません（ここで「外部リソース」とは画像やスタイルシート、スクリプトなどを指します）。

また「横を短くする」とは

• リソースの「量」を減らす
• サーバーの応答時間を短くする
• HTTP リクエストを並列化（時には平準化）する

ことですネ。

また、HTTPリクエストの削減について分かりやすく書かれているのが以下の記事。

• HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL

とても参考になります。

私も、自分が分かる範囲で、HTTPリクエストを減らすことを中心に高速化に取り組んでみました。

画像関連の高速化手法

分かりやすく読みやすいコンテンツを作るのに画像は欠かせません。

しかし画像の枚数やデータ量が多いと高速化の足を引っ張るので困り者です。

data URI scheme でHTTPリクエストを削減

かなり最初の段階で取り組んだのがこれです。データ量が増えますがHTTPリクエストを削減することが出来ます…というかできるはずです。

一旦はすべてのアイコン画像をdata URI schemeで表示していました。

枚数を減らす

画像の枚数を減らすと画像のデータ量もHTTPリクエストも減ります。

そこで、data URI schemeで表示していたアイコン画像を、全てアイコンフォントに置き換えました。

画像を圧縮してデータ量を減らす

記事中で使う画像はアイコンフォントに置き換えられません。高速化のために枚数を減らすのも現実的ではありません。

そこでデータ量を軽量化して高速化すべく画像を圧縮します。

そのために必須なプラグインがこちら。

これらの画像圧縮プラグインはとりあえず入れておいて損はないと思います。

デバイス別に画像を出し分け、ムダにサイズの大きな画像を出さない

画像切り替えプラグインHammyを使うと、デバイス幅によって表示させる画像を出し分けてくれます。

画像のキャッシュもやってくれるので、その意味でも高速化の役立ちます。

高速化の定番 JavaScript/CSS の最適化

画像と同様HTMLリクエストを発生させるのがJavaScriptファイルやCSSファイル。画像と同様に高速化の余地が大きいです。

読み込み方の最適化

PageSpeed Insightsで速度を計測すると、「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する」という警告が出ることが多いです。

もちろん対策しないといけません。私は、プラグインで、レンダリングブロック JavaScript/CSS の対策をしました。

読み込むjavascript/cssファイルを減らす

上記プラグインによる対策は、読み込むjavascript/cssファイルの数を減らすのではなく、読み込み方の工夫で高速化を図ったものです。

しかし、そもそもファイルの数を減らす対策も必要です。そこで行ったのが下記対策。

最近は、新しいプラグインを入れるたびに、テーマが読み込むjavascript/cssファイルの数がムダに増えないよう、上記記事で書いたような作業をしています。

キャッシュを利用して高速化

WordPressの高速化にはキャッシュの利用が不可欠と言われています。しかしキャッシュといっても色々あるようです。「parison-and-selection-of-wordpress-cache-plugin/” title=”WordPressキャッシュ系プラグインの比較とサイトに適した選び方 | ゆっくりと…」によれば、

1. ページ・キャッシュ
2. ブラウザ・キャッシュ
3. プロキシ・キャッシュ
4. リソース・キャッシュ
5. オブジェクト・キャッシュ
6. データベース・キャッシュ
7. 翻訳ファイルのキャッシュ

…これだけの種類があります。上記記事にはそれぞれの違いをとても分かりやすく表した図がありますので是非ご覧下さい。

全てに取り組むのが王道でしょうが、私の環境では、おそらく私の勉強不足のため当初は1.で不具合が出ました。

一時はページキャッシュを諦めていたのですが、WP Fastest Cache プラグインでページキャッシュを簡単に利用できるようになりました。

5.は不具合が出てあきらめました。

7.については効果が感じられませんでした。3.4.はまだ取り組んでいません。

2.ブラウザ・キャッシュは高速化効果が絶大でした。

6.データベースキャッシュも効果が絶大でした。

でも、ページキャッシュと併用しても効果が出ないようなので、ページキャッシュ導入と同時にデータベースキャッシュの利用はやめました。

ブラウザ・キャッシュ

「ブラウザ・キャッシュは高速化効果絶大」と偉そうに言いましたが、@wokamotoさんの記事にあった.htaccessの設定を真似しただけです。

ほんとに効果絶大なので、まだ設定していない方はには強くオススメします。

また、WP Fastest Cache プラグインを使えば、設定画面でチェックマークを入れるだけで、ブラウザ・キャッシュが利用可能です。

.htaccess を触るのに不安がある方は、このプラグインで解決しては如何でしょうか。

データベースキャッシュ

先ほど紹介した記事WordPressキャッシュ系プラグインの比較とサイトに適した選び方 | ゆっくりと…によれば、データベースキャッシュとは

WordPress は記事を表示するとき、MySQL からデータを引き出すためにクエリ （コマンド） を発行するわけですが、その出力を保持しておき、発行するクエリ数の削減を目的としたキャッシュ機構です。

私は有名プラグインを利用してデータベースキャッシュを利用していました。

• DB Cache Reloaded Fix｜WordPress Plugins

このプラグインを無効にするととても遅くなるので手放せなかったです。

mysqlデータベースをキャッシュするので、ダッシュボードその他の管理画面も高速化してくれました。

ただ、WP Fastest Cache プラグインでページキャッシュを導入したのちは、DB Cache Reloaded Fix の更新が2年以上止まっていることもあり、利用をやめました。

APCでPHPを高速化

キャッシュといえばAlternative PHP Cache（APC）もあります。

もちろん利用してみました。かなり大きな効果がありました。

SNSボタンを自作して高速化

SNSボタンが重いのは、おそらく、シェア数を取ってくるのに時間がかかるからです。

自作ボタンではシェア数表示をなくしたのですが、目論見どおり高速化しました。

私が高速化のために利用しているプラグイン

高速化のために入れたプラグインをまとめて書いておきます。

• EWWW Image Optimizer（画像圧縮対策）
• Hammy（デバイス幅による画像出し分け・画像キャッシュ）
• JavaScript to Footer（レンダリングブロック JavaScript/CSS対策）
• WP Fastest Cache（ページキャッシュ・ブラウザキャッシュ・さまざまな圧縮）

参考までに私が使っている全プラグインを晒します。

高速化の為にプラグインを入れる場合、既存プラグインとの相性も大事です。環境説明として私が使っている全プラグインを晒します。

速いサーバーを選ぶのも大事

高速化の為には速いサーバーを選ぶことも大事です。

と言っても私のような素人には難しいのですが、私が選んだのは…レンタルサーバーは「事故なし」「速い」「落ちない」ものを！！というエントリでも書いたのですが、エックスサーバー。

WordPress以外何も置かないなら、wpXレンタルサーバーもオススメです。

まだ手付かずの対策

Google PageSpeed Insights 90点を達成したので満足です。しかし、素人目にもまだ改善の余地が大いに残されているのも事実。

今後本腰を入れて取り組むなら以下の事柄を何とかしたいと思います。

CDNによる高速化

CDNとはコンテンツデリバリーシステムのことです。

• コンテンツデリバリネットワーク - Wikipedia

私もこれを取り入れようとして、WordPressプラグイン「JetPack」の「Photon」を導入してみましたがGoogle PageSpeed Insightsのスコアが急落しました。また、CDNとしてはクラウドフレアも有名ですが、時々落ちて真っ白になるみたいなので、導入するモチベーションが沸きません。

でも次に取り組むならこの部分だと思います。

ページ・キャッシュ

ウェブシュフのテーマは、最近、モバイルとPCでHTMLソースを出し分けています。

この状況でうまく導入できる気がしないのですが、この記事などを見て…

• WordPressでスマホ / それ以外の広告を出し分ける話（ページキャッシュ対応） | もやし工房

…勉強すれば可能なのでしょう。

2014/04/20追記：勉強しませんでしたが、WP Fastest Cache プラグインの登場により私にも導入できました。

最後に＆関連記事まとめ

いろんなサイトの速度を計測してみましたが、Google PageSpeed Insights のスコアが、 PCでも90点 に満たない大手サイトも多いです。

Google PageSpeed Insights 90点 超えを機に、高速化には一区切り付け、もっとほかのことを頑張りたいと思います。

このエントリが高速化に悩むブロガーさんたちの一助になれば幸いです。最後に関連記事一覧を付けておきます。