gaspanik weblog

WordPressは遅いから。たまにそんなことを耳にしたりします。しかし、それは別にMovableTypeで作ろうが、ハンドコーディングで静的なHTMLを配信しようが遅いもんは遅いんです。それに対するボクの答えはこうです。作り方が悪いから遅い。

このたび「WordPress 高速化＆スマート運用必携ガイド」が発売されました。昨年の夏頃、WordPressのプラグインを公開したり最近話題のNginxのことにも詳しい@wokamotoさんにバックエンドの高速化を担当してもらって、フロントエンドの方はボクが書いてWordPressの高速化について書けば面白いんじゃないかな？と思い立ちましてね。

ボクの原稿の進みが遅いのもあって発売が今頃になってしまったのですが、この書籍はWordPressを中心にすえつつフロントエンドとバックエンドの双方の面からWebサイトのパフォーマンス改善について書いたものになっています。

これまで、2009年の12月に「Webサイトの高速化的な話をWD誌で」、2010年の夏には同じくMdNさんから「HTML+CSSコーディング ベストプラクティス」の中の一部の章で高速化について書いています。それから2年弱経ちましたが、まわりを見渡しても日本ではまだまだパフォーマンスを考慮したサイトの数は多くありません。世界レベルでみたWebコンテンツの平均値はこのような感じです。
→ HTTP Archive – Trends http://bit.ly/zaiu4W

ちょうどいい事例があったので…

こういうことを書くとDisってると誤解されるのであまりよくはないのですが、先日おこなわれた東京マラソンの公式サイトもどうやらWordPressで構築されています。大量のアクセスが想定されるなか前日には見事に落ちてましたが、これが落ちた一因はそのサイトの作り方にあるんじゃないかなぁ…と。普通に閲覧してる分には「そんな遅くもないじゃん」と思われるかもしれませんが、大量にアクセスが集中した場合には結構大変な作りになっているんですよね。

現在もそのままで公開されていますので、ちょっとHTMLソースを覗いてみましょう。レガシーブラウザへの対応のためか、CSSは頭のとこで＠importを使って読み込まれていますが、そこには再度読み込み指示があって19個のCSSが記述されています。またサイトの描画に必要なのか、JavaScriptも7つほど（うち1つはGoogleから）参照されるようになっています。

CSSにしてもJavaScriptにしても、HTMLがロードされたらそこに記述された内容を整形するために必要でしょうから、最初にロードされてきます。バックエンドがどうなってるかわかりませんが、同じサーバから出てくるのが合計25個。最初の段階でこれじゃダメですよね…。

HTMLの整形に必要なファイルをこれだけ多くのファイルに分割してリクエストを出していたら、ブラウザの1ドメインあたりのコネクション数を食いつぶします。これらが落ちないことにはどうレイアウトしていいかもわからないわけですから、表示にさえ至らないということになりますね。このサーバへリクエストしてからページができるまでのデータの流れを図式化したのが以下のものです。

→ データのウォーターフォールチャート（フルサイズ: 1.3MB）
→ データのウォーターフォールチャート（ミニサイズ: 880K）

どうでしょうか。海外からのリクエストなので秒数は多少さっぴいて考えたとしても、4秒ぐらいまではCSSとJavaScriptのリクエストです。それらが落ちて開放されない限り他の画像などの要素も落ちてきませんので、それ以降のリクエストが繋がるの待ち状態（青緑のバー）。ブラウザの並行ダウンロードが仮に6個ずつだとして…、表示が完成するまでにはこのような流れになってしまう。ブラウザ側へ落ちなければサーバ側も開放されません。つまり、大量のアクセスがあった場合は最初の段階で完全に止まってしまってもおかしくないわけです。

こういうのはフロントエンド側でもっと大量かつ高速にさばけるような改善もできるし、インフラをちょっと変えてあげてさらなる高速化をはかることもできます。要は作り方なのです。そんなことがこの青い本に書いてあります。

VPSのことについても書いてあります

本書はWordPressのことがやや多いものの、内容は多くのWebサイトの高速化にも役立つものだと思います。特にこれまでホスティングの自由度が高くないため、泣く泣く諦めてたかもしれないWebデザイナーさんたちのために、VPSの導入からサーバのインストールや設定についても書かれています。これまでパフォーマンスを意識したことがなかったWebデザイナーさん、バックエンドは得意だけどフロントエンドは詳しくなかったエンジニアの方のお役に立てれば。

最後に本書のはじめにをここに転載しておきます。本屋さんで見かけた際には是非手にとってパラパラと眺めてみてください。

今、Webサイトにはスピードが求められています。8秒ルールといわれていたのは昔の話、今ではブロードバンド回線の普及もあり、世界的な基準は3秒以内に表示が完成しないと遅いといわれており、その速度は検索ポータルの表示結果にも少なからず影響を与えるとされています。

また、この数年でスマートフォンやタブレット端末といった小型PC並の性能を持つスマートデバイス が登場し、自宅や会社以外から電話回線経由でのWebサイトのアクセスも増えています。

しかし、日本のWebサイトの多くは旧来のまま、全体的に見てもWebサイトの表示スピードは速いとはいえません。回線が速くなればページはすぐ表示されるもの、電話回線経由ではすぐに表示されてほしい、利用者の立場ならそう考えるのは至極当然のことといえるでしょう。

本書は、世界中で広く用いられているCMSである「WordPress」を中心に据えながら、このWebサイトの遅さの原因とその改善手法を紹介する書籍です。WordPressは、その仕組みから一般的なWebサイトと比較して反応速度が遅いと捉えられがちです。

しかし、実際のところはそうではなく、遅さの原因は作り手側の問題であることの方がほとんどです。この表示スピードが遅いという誤解をとくべく、HTMLやCSS、JavaScriptといったフロントエンドの面、そしてWebサーバやPHP、MySQLサーバといったバックエンドの面の双方から改善手法を解説しました。

さらに、安価で自由度も高く注目を集めるVPSについても、敷居が高く感じてしまいがちなWebデザイナーの皆さん向けに、その導入方法から運用における注意点にも触れました。

検索エンジンとも親和性の高いWordPressをより高速にして、利用者にストレスを感じさせないWebサイトに。本書が、Webサイトを運営される多くの方々の一助になれば幸いです。

→ WordPress 高速化＆スマート運用必携ガイド（Amazon）
→ WordPress 高速化＆スマート運用必携ガイド（Facebookページ）

＃本書の内容にプラスしながら、来る4月21日（土）には「WordBench 埼玉勉強会」でこの高速化について講師的な立ち位置で出席予定です。こちらもお時間のある方はいかがでしょうか。

Tags: books, wordpress, works, wp

This entry was posted on Friday, March 16th, 2012 at 10:48 AM and is filed under articles, notice, works. Written by こもりまさあき. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.