ホーム > Web > パフォーマンス改善

パフォーマンス改善

投稿者: londoner25
2009 年 5 月 3 日 03:30
Web
(X)HTML

先日、オライリーのハイパフォーマンスWebサイト ―高速サイトを実現する14のルールという書籍を購入しました。これからのマークアップンジニアはいかに快適に閲覧できるWebサイトを作れるかというのも大切になってくると思い込んでいます。やはりいくらキレイなサイトでも重過ぎたら見る気は失せます。

タイムリーにもYahoo！ニュースが4月末にパフォーマンス向上の施策を行ったようです。かなりのコンテンツ内容があるにもかかわらず確かに快適に見れています。どのような方法でパフォーマンスを上げたかはYahoo!ニュース高速化へのサイトデザイン側からのアプローチ (Yahoo! JAPAN Tech Blog)に書かれています。注目すべきはPNG 8を使っているところ。GIFより軽いとは知りませんでした。これからは自分のサイトでもPNG 8も使っていこうかと思います。

ようやくまとまった時間がとれたので本の通りに実験してみました。（読破はしていません）この本の著者はYahooでフロントエンドパフォーマンス改善を専門に担当している方です。それと同時にFirefoxのアドオンYSlowの作者でもあります。このアドオンを合わせて使うとよりわかりやすいと思います。

今のところ自分は大掛かりなサイトを作ったことがありませんので、YSlowのSmall site or Blogのオプションで計測しました。現在元は同じテンプレートで作った2つのMODxサイトがありますのでそのサイトのパフォーマンスで比較したいと思います。

パフォーマンスチューニング

今回施策したのはManager Lifeというサイトです。
どちらもデザイン性の無いサイトでシンプルなので表示が速いはずなのに思ったような速度は出ていませんでした。実はWebサイトのパフォーマンスチューニングが必要と思った背景には自分が作ったサイトが思ったように快適に見られないと言う現実があったからなのです。（家のインターネットの回線がよくないのも一因）
本に書いてあるのは基本的に大規模サイトに向けたことなので、安いレンタルサーバーではできないことも書いてありました。大まかに言うとHTTPリクエストをできるだけ飛ばさないようにすればWebサイトの表示は速くなります。その中で特に効果のあるやりかたはApacheの設定を変える必要があるのでできません。

今回の実験で行ったことは

アクセスした時のHTTPリクエストの回数を減らす
ファイルサイズを減らす
CSSを先頭に置く
~~Javascriptを末尾に置く~~

大きく分けてこれだけです。ほとんど当たり前のことですよね。

アクセスした時のHTTPリクエストの回数を減らす

Webページにアクセスするとページ全体をロードするためにHTTPリクエストが発生し、その後CSS、JS、画像…と次々にリクエストが発行されます。並列で同時に読み込むことができないものもありますし、リクエストを送るごとにサーバーにも負荷がかかるので、できるだけ減らしましょう。
これの対策はCSSやJavascriptを一つのファイルにまとめることです。画像に関してはCSSの背景画像に設定しているものはCSSスプライトにします。
CSSスプライトとは画像をひとまとめにしてCSSで要素にwidthとheightとbackground-positionで画像の場所を指定するテクニックです。一昔前に流行った画像置換でのロールオーバーもCSSスプライトのテクニックが使われています。

制作フローとしてはWebデザインプロフェッショナルワークフロー・バイブル (Web Designing BOOKS)にも書かれていますが3つくらいのCSSに分けて作り、公開用にその3つのCSSを@importではなく直接結合し1つのファイルにします。そしてCSS圧縮サービスなどを使い圧縮してから公開することをお勧めします。JSについても同じです。

ファイルサイズを減らす

一つにまとめられて膨大なサイズになったCSSやJSをツールを使い最適化を行います。無駄なスペースをなくすことでパフォーマンスの改善を期待できます。

CSSを先頭に置く

これはだれもがやっていると思いますが、CSSをhead内に入れることです。 CSSをheadに持ってくることでページのCSS適用が一番先に行われ真っ白現象を防ぐことができ、htmlの画像の並列ダウンロードも可能にします。ただし、styleタグでインポートするとhead内に記述していても最後にロードされるので遅くなってしまいます。

Javascriptを末尾に置く

JavaScriptもheadに置くものだと思っていましたが、逆のようです。 JSをトップに置くことにより他のコンポーネントのダウンロードが中断されてしまいページが途中で切れた状態が発せしてしまうようです。それを防ぐためにはJSをページの下部に記述するのが正しいようですが、実験ではJSが機能しなくなりました。この点については追調査を行います。

その他の施策

その他小さな施策も行いました。まず一つはCSSエクスプレッションをオフにする。これはCSSの値を動的に変更する強力テクニックですがサイトのパフォーマンスに影響する危険なテクニックでもあります。ツールチップでこれが使われていましたがオフにしました。IE6では不具合が発生している可能性があります… 二つ目はHTTP404エラーを潰す。 CSSやJSのうっかりミスで画像のパスが正しく記述されていませんでした。それを解消することによって負荷を減らすことができます。最後に、これはこのサイトでは行いませんでしたが… CSSやJSで同じファイルを2度読みこと。これでもパフォーマンスが下がりますので要注意です。

比較

施策を行っていないサイトと行ったサイトでYSlowで比較します。

web

こちらは施策をしていないサイトです。 CSSが11個もあるのでリクエスト飛ばしすぎですね。

manager

こちらは施策したサイトです。
スコアが79から96に改善されています。
CSSを1個に集めたのでHTTPリクエストがDからAに改善されています。同時にCSSエクスプレッションを削除したのでその項目もAにランクアップ。
JSは上部に記載のままなのですが、恐らく一つにまとめたのがことが有効に働いたんだと思います。
gzipに関してはApacheの設定をしなければならないのでこれはお手上げ。FからCに改善されているのはCSSとJSを一つにまとめたからだと思います。

続いてページの表示速度です。

上が施策を行っていないサイト、下が施策を行ったほうのサイトです。
下のほうがファイルの総容量が多いにも関わらず表示スピードが速いです。
ただ、138kのサイトで0.4秒はかかりすぎですね。これは家の回線が元々重いのも一因です… 会社で閲覧するとだいたい0.1秒で表示されます。
ここまでくるとほぼ体感で差は感じにくいと思いますが、こんなに簡単に目に見えて早くなるということで、大規模サイトでは積極的に導入していったほうがいいでしょう。

冒頭にも書きましたがヤフーニュースがパフォーマンス改善のリニューアルを行いました。
またハイパフォーマンスWebサイト ―高速サイトを実現する14のルールの書籍ではアメリカのアクセス数トップ10にはいるようなサイトで集計したデータをもとに書かれています。これからは仕事でもできるだけこれを活かして快適なWebサイト作りを実現したいと思います。