WordPressで読み込み速度1秒台を実現するために実施した5つの施策

あなたのページ読み込み速度、遅すぎませんか？

サイトがなかなか表示されないのはユーザーとして見た時に非常にストレスフル。理想のページの表示時間は最低でも2秒以内、目指すべきは1秒以内と言われている。

gori.meでも長いこと様々なツールを駆使しては読み込み速度改善にむけて取り組んできた。先日、ついにGTMetrixにおける測定値が安定して1秒台を出すことに成功したので、今回はこれを実現するために僕が実施した5つの施策をまとめておく！ページの読み込み速度に悩んでいる人は参考にどうぞ！

gori.meのGTMetrixスコアと読み込み速度

1秒台を出す方法を話す前にそもそも本当にgori.meは読み込み速度1秒台なのかということについて、先ほど取得したGTMetrixのスクリーンショットと共に紹介しておく。

ご覧の通り、読み込み速度は1.4秒、Googleの「Page Speed Grade」はA評価、Yahoo!の「YSlow Grade」はB評価となっている。

上記はあくまでもトップページの読み込み速度。個別記事についても、画像を多用した「どうせ食べるならおやつもヘルシーに！タニタ食堂のおやつ「間食健美」シリーズが低カロリーで健康的！」でも1秒台。

長文を書いた「ブログを毎月30万PVにするために僕が行なっている15の戦略」も平均2秒台、速い時は下記のように1秒台を出すようになった。

ただ、正直に話すと他の読み込み速度測定サービスで測定すると1秒以内にならない場合もある。どのサービスを利用してもすべて1秒台を出せるようにチューニングしたいものの、まずはGTMetrixのスコアで1秒台を達成したので書かせてもらう。

ページの読み込み速度を向上するメリット

では、そもそもなぜ読み込み速度は速いほうがいいのか。

確かに感覚的には読み込み速度は速ければ速い方が良さそうだが、闇雲にスピードアップに取り組んでもその先にある結果が見えないまま対策するのはモチベーションが上がらない。

海外SEO情報ブログにページの読み込み速度を改善することよって得られるメリットを一部紹介する。

• Googleではページスピードが検索の1%に影響
• ユーザーがページ表示に待てるのは最大2秒
• 3秒以上かかると40%以上のユーザーは離脱

最低でも2秒以内を目指すべき、というのは数値的根拠あっての理想値だったのだ。

読み込み速度向上のために行ったこと

当ブログで読み込み速度向上のために僕が実施したことをまとめると、大きく分けて以下の4項目になる。

• 1. 高速化プラグインの導入
• 2. CDNの導入
• 3. 画像容量の圧縮
• 4. HTML/CSS/Javascriptの整理
• 5. 余計なプラグイン/ウィジェットの削除

順番に説明していく！

1. 導入しているWordPress高速化プラグイン

現在gori.meに導入している高速化関連プラグインは以下の通り。

1. W3 Total Cache
2. MO Cache
3. Lazy Load
4. DB Cache Reloaded Fix

導入理由と想定される効果についてそれぞれ解説しておく！

1. W3 Total Cache

WordPressの高速化プラグインの王道とも言える「W3 Total Cache」。高速化する上ではこのプラグインは必須。後述する無料のCDNサーバー「CloudFlare」との連携も組み込まれていて使い勝手が良い。

設定方法を公開している記事は多数見受けられるが、「『W3 Total Cache』のススメ」という記事がどこよりも詳しく書いてある。2011年の記事ではあるが、僕は書いてある内容通りに設定しているので問題ないはず。

「W3 Total Cache」のダウンロードはこちらからどうぞ！

2. MO Cache

このプラグインは「W3 Total Cache」と組み合わせて使うことによって効果を発揮するプラグイン。開発者である@m4iさんのブログ「カワイイはつくれる」には以下の解説が書かれている。

MO Cache では .mo ファイルを読み込んだオブジェクトをキャッシュし、次回アクセス以降もそれを使いまわすことによって、約1/30の時間で .mo ファイルのデータをロードすることが可能になっています。MO Cache の特徴として WordPress 標準のキャッシュ機構である WP_Object_Cache (英語版) を使っているため、キャッシュを一括で管理でき、レンタルサーバではファイル、VPSではより高速な APC と何にキャッシュするかを柔軟に選ぶことができる点があります。

確実に高速化に貢献してくれてるようなオーラが出ているので早い段階から導入している。「MO Cache」のダウンロードはこちらからどうぞ！

3. Lazy Load

「Lazy Load」は画像を後から読み込むプラグイン。インストール方法とスムーズに表示する設定について下記記事にまとめてある。

このプラグインの効果がないという情報を頂いたので検証してみたところ、プラグインの性質上表示に多少の遅延はあるものの、GTMetrixのスコア上は「Lazy Load」の有り無しでは大きな差が生じたのでインストールしたままにしている。

「Lazy Load」のインストールはこちらからどうぞ！

4. DB Cache Reloaded Fix

サイトそのものに加えて、管理画面が重くなっている原因にデータベースへアクセスする負荷が重くなってしまっていることは少なくない。特に記事数が増えれば増えるほどパフォーマンスに影響する。

「DB Cache Reloaded Fix」はデータベースのクエリ数を抑えることによって負荷を軽減してくれるプラグイン。総記事数2,800本が見えつつあるgori.meにとっては必要不可欠である。

「DB Cache Reloaded Fix」のダウンロードはこちらからどうぞ！

2. 無料CDNサーバー「CloudFlare」の導入

表示速度を高速化する上で一役買っているのは無料のCDNサーバー「CloudFlare」。ウェブコンテンツを配信するために最適化されたネットワークを本体とは別に設けることによって静的コンテンツなどをキャッシュして負荷分散することができる。

仕組みや登録方法、導入のみによる効果については下記記事に書いてある。

画像などのコンテンツは導入するだけでキャッシュしてくれるが、JavascriptやCSSファイルを「CloudFlare」にキャッシュさせるためにはファイルに付与されているバージョン番号を削除する必要がある。

以下の記事ではその方法について解説してある。

高速化プラグインの定番として紹介した「W3 Total Cache」内に用意されている設定項目を組み合わせることによってさらに高速化することが可能。ちなみに、これらの設定は「CloudFlare」の管理画面からも変更可能。

現在β版でまだいくつか不具合はあるものの、「Rocket Loader」を有効にしておくと見違えるほど高速化する。これが無料で提供されているとは本当にありがたい。

3. 画像容量の圧縮

読み込み速度を大きく左右するのは画像の容量。「Lazy Load」で読み込みを遅延するだけでは不十分。画像そのものの容量を可能な限り削減することが高速化に繋がる。

僕は「ImageOptim」というMac用のフリーアプリケーションを使っている。PNG、JPEG、GIFアニメに対応しているので、普段使う上では必要十分！

4. HTML/CSS/Javascriptの整理

読み込み速度対策として見落とされがちなのがHTML/CSS/Javascriptの整理。Googleが汚いコードを見たい訳がない、ということからAnother HTML-lint 5を使ってHTMLとCSSの記述を見直した。現在エラーとして指摘されているのは主にFacebookのソーシャルボタンに関わる内容だったので、一旦放置。

株式会社LIGの「リピート率に直結！ブラウザのレンダリング速度を高速化する５つのこと」に書かれていた以下の2つも実践している。

• スタイルシートはページのトップで読み込む
• スクリプトはページの最後に読み込む

株式会社LIGの記事はとても勉強になったので、まだ読んでいない人は目を通しておくべし！

5. 余計なプラグイン/ウィジェットの削除

さらに高速化するためには余計なプラグインを削除することと不要なウィジェットを置かないことが効果的だ。それぞれ説明する。

余計なプラグインを削除する

僕はこれまでブログを高速化するために様々なプラグインを入れてきた。効果があると言われていたものは迷わずインストールしていたのだが、高速化プラグインは数多く入れればいいものではない。場合によっては異なるプラグインがお互いの足を引っ張って効果が半減しているかもしれない。

そのためにもプラグインのオンオフを切り替えながらGTMetrixで読み込み速度を複数回測定し、必要なプラグインと不必要なプラグインを検証する必要がある。僕は結果的に冒頭で紹介した4つのプラグインに落ち着いた。

高速化プラグイン以外でも使っていないプラグインは削除することをオススメする。目に見えないところでデータベースにアクセスするなどして表示スピードを落としているかもしれない。

余計なウィジェットを削除する

ウィジェットは設置するだけで様々な情報を取得して表示してくれる便利なツールだ。数多くのメディアやブログに設置されている。

Facebookだけでも「Like Box」や「Recommendations Box」、画面右下から飛び出す「Facebook Recommendations Bar」がある。他にもGoogle+やはてなブックマーク、AmazonやLinkshareなどのウィジェットはよく見かける。

ただ、ここで1つ質問だ。ウィジェットを設置したことによってそもそも効果は出ているのか。

1人辺りのページビュー数は上がったのだろうか。ソーシャルのシェア数は増えたのだろうか。アフィリエイトの売上は伸びたのだろうか。

もし効果が出ていないのであればそのウィジェットは削除した方が良い。ウィジェットは外部サーバーから情報を取得するため、接続先に何か問題が起きていると結果的に自分のブログの表示速度が影響を受けてしまう。僕の場合、Facebookの各種ウィジェットの動作が不安定だった上に大した効果は見られなかったので、必要最低限だけ残してほとんど外すことにした。

おまけ：使っているサーバーはシックスコア

@odaijiさんにご指摘頂いて気付いたのが、バックエンドを支えるサーバーについて一切明記していなかった。

上記で紹介したテクニックで読み込み速度は大いに改善されるが、これらの効果を最大化するためにはサーバーのスペックも非常に重要。gori.meが使用しているサーバーはシックスコア。多くのブロガーに愛されている、定評のあるサーバーだ。

本記事で紹介しているような施策を既に試していて効果が見られない場合、サーバー自体がボトルネックとなっている可能性がある。値段はそれなりにするが2週間のお試し期間もあるので、気になる人は試してみるべし！

ロリポップサーバーからの移行方法については以下の記事を参考にどうぞ！

次なる目標は読み込み速度1秒以内！

以上が僕が当ブログを高速化するために行なってきたことすべてだ。

試行錯誤しながら実現したページ読み込み速度1秒台。長年の悩みだったので実現した時には思わずTwitterで雄叫びを上げるほど嬉しかった。

読み込み速度1秒台きたあああああああああああああああああああああああああああああああああああああ

— g.O.R.i (@planetofgori) March 18, 2013

ブログを運営する上では提供するコンテンツそのものも大事だが、せっかく用意したコンテンツがユーザーに届かなかったら本末転倒。読み込み速度はメディア運営者たるものは常に意識していなければならないことだと僕は思う。

1秒台を実現した今、次なる目標は1秒を切ること。今まで以上に大変そうだが、気長に頑張っていくぞ！