Webページ高速化実験　-Firebug＆YSlow-

無駄にプラグインとかエフェクトを実験する意味でどんどん入れていったらとてつもなく重たくなってしまって、周りからダメ出しくらいました。。。
元々ブログを自分が好きなようにやるのが発端だったんだけど、検索に引っかかって見てくれたりする人がいる以上やっぱりやさしくないねー。あと、少しでもWebをやっているのなら正しく＆早く表示させたいもの。

でもWeb2.0（もしかしてもう死語になってる！？）を初めとして、リッチコンテンツがいっぱいある中でどうしてもWebサイトは重くなっていくから悩みもの。んー、でもそれのせいにしては元も子もないというか本来の意味から逸れる気もするのでやっぱりできる事はやってみよー！

と言うことで、勉強がてらにチューンアップすることにした。
今回大活躍したのは、、、

･Firebug
･YSlow
参考サイト：マイコミジャーナル

デス。いずれもFirefoxのプラグインとして動くんだけど、特にWeb屋さんならFirebugを使っている人がいっぱいいるんじゃなかろうか。それくらい使えるヤツです。
YSlowは米Yahoo!が提供しているこれまたFirefox向けのソフトウェア。主にWebページのパフォーマンスを改善したいなどの場合に「ここがダメだよ」と言ってくれるようなもの。

まず、何を改善させたら表示が速くなるのか・・・を考えたときに、要するにHTTPリクエスト数を減らせばいいんでない！？って言う事になると思うのだが（それだけじゃないけど）、それを減らすためにどうするのかというのも今回の要なのかも。
やった事は・・・

1.Expiresヘッダ
2.コンポーネントの圧縮
3.CSSを上に
4.Javascriptを下に
5.JSとCSSは外部ファイルに
6.コードサイズの圧縮

な感じ。

さて、やろうかと思ったけど早速1番と2番は自力では不可能な事が判明。自分が使っているレンサバさんに聞いたところ2つともサポートしていないとの事で、やむなく断念。。。これが一番効き目があると書いてあったので残念無念。

次は3番の「CSSを上に」なんだけど、、、これは普通にページ作っていればやっている事。
ただ、なぜCSSを上にもってくると早くなるのかは恥ずかしながら知らなかった。。
要するに、ブラウザはHTMLを上から順番に読みにいっていて、描画系は真っ先に読まれるとの事。ここで下で書いたりするとそこまでずらずらとコードを読んでやっとブラウザに描画されるから体感的に遅くなるというわけらしいです。ん～なるほど！
ちなみに、Firefoxは大丈夫らしいんだけどIE系は下に持っていくとページを読み終わるまで描画をブロックしてしまうらしい。よく真っ白なページが最初に出たり、スタイルを変更する前のデザインが一瞬出たりする事があるけどこういうこと原因らしいデス。
って言う事で、なるべく～に書きましょー。

お次は、4番目の「Javascriptは下に」編。
なぜなるべく下なのか？？これも知らなかったのがとってもお恥ずかしい。。
要は、書かれたscriptより下の部分は読み終えるまでに描画がストップする性質があるとの事。言われてみれば確かにページの途中で時間がかかることがあるのはそういうことなのか。ただ全部が全部下に持っていくと難しいケースもあるのでそこはケースバイケースで。
GoogleのAnalyticsとかWebmasterTool用のJavascriptは下の方に書くことが推奨されていた気がするけど、ページを読み込んでからでも良いよって言う事なのね、、、なるほどー。

次は、5番目の「JSとCSSは外部ファイルに」。
これはなんとなくわかっていたけど、要は外部ファイルにするとキャッシュされるので読み込まれるのが当然早くなる。
インラインで記述したりいちいちそれを読みにいったり、HTMLソースが結局増えて微々たるものかもしれないけど時間がかかってしまうというわけ。
でも、わかるんだけど、ちょっとした部分を変えるときにわざわざ外部ファイルを探して直すよりインラインでやってしまったほうが早い気がするので、少々だったらケースバイケースで書いてもいいんだと思う。

最後は、「コードの圧縮」。
よくJavascriptのソースを開いてみたりすると、永遠と一列になっていたり訳わかんなくなってたりするのを見た事がある。（そもそも詳しくは何が書いてあるか自分にはわからないのでえらそうな事が言えませんが。）
それは、ソースを最適化して圧縮していたり難読化させているって言う事なのね。
ただスタイルシートに関して思ったのは、多少のタブインデントだったり余計な空白だったり「#ff0000」を「red」って書いたり、「margin:10px 0 10px 0;」というのを「margin:10px 0;」って変換するくらいだったらわかるけど難読化させると挙動がおかしくなったり、編集するのが面倒くさくなるので最小限に留めました。

結果は･･･

↑これがビフォー。