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

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

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

まず、何を改善させたら表示が速くなるのか・・・を考えたときに、要するに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;」って変換するくらいだったらわかるけど難読化させると挙動がおかしくなったり、編集するのが面倒くさくなるので最小限に留めました。

結果は･･･

↑これがビフォー。

↑これがアフター。

少しは変わってるよね？誰かそう言ってください。。。
確かにリクエスト数は減ってるし、読み込み時間は多少早くなっているはずなんだけど。。。
まー、接続環境が人それぞれだからこの通りちゃんと行くとは限らないって言う事で。
おしまい。

あー、次は何かちょっとずつデザインを変えてみようかな。

変える前は色々無駄に入れすぎて、そりゃー重いわ。

変わった？少しは変わったでしょ？誰かそう言ってください。

MyMiniCity
↑
簡単に言えば何にもしないシムシティー？みたいな感じ。
登録したURLにアクセスすると街が育っていくだけで、自分が何かをいじくる必要が無い。
人を定期的に来させる良いアイディアかもしれないね。

ちなみに、ある程度育っていくと簡単なイベントが発生するそうで、例えば「人口が増えて交通渋滞が起きている」 とか、「人口が増えて治安が悪くなってきている」とか。
そういうのを回避するために交通を良くしたり人口を増やしたり治安を安定させるという特定の目的のためのURLが発行されるとの事。
まあ全てはアクセスしてもらって人口を増やさないとどうしようもないです。
あと、簡単な書き込みも出来るので、そこら辺はご自由に。

ちなみに自分が登録したものを見てみると、、、まだ5人しか居ない。。。認知度が少ないのでしょうがないか。。。
まー気長に育つのを見守っていくスタンスで行こう！
で、ブログ上で現在どんな感じに発展しているかを表示できる方法があったので、左メニューの下の部分にちっこく表示させておく！のでこのブログにきたらチェックしてみて下さい。Google Mapみたいにグリグリできるよ。

ん～しかし閑散としている。・・・実にのどかだ。。そしてどんどんサイトが重くなっていく。。。

参考サイト：MyMiniCityはじめました

このブログを見た人は、、、↓にアクセスしてみるべし！

yoo-sanの街は現在こんな感じ

って言うか今までこういうのってなかったのかな？
恐らく複雑なJSライブラリとか使ってるのとか、ブログのプラグインとかならあるんだろうけど。

ここでミソが、
・mp3しかダメ（っぽい。他の試してないから。）
・はっつけるコードの中にページ指定をするのでそのページにある曲全部引っ張ってくる事になる。

っていうことだろうか。
1曲だけ紹介したい時より、自分のバンドのアルバムとかを紹介したいときとかはいいのかも。

って言う事で、試しにair soundのトップページのモノをのっけてみる。
これまたここで解った事は、Yahoo! Musicと連動？しているらしく、そこにあるものは曲名とアーティスト名がちゃんと表示される。
air soundは載っておりませんので、ファイル名が曲名となったようで。
ただ・・・1曲目が「hontounokoe」となるはずがなぜか化けているねぇ・・・

とにかく詳しくはこちらに載っています（バッチリ英語何で俺は途中で諦めましたｗ）。
Widget Lab

まーこういうのは使い方によっては非常に便利なものではありますな。

Yahoo!翻訳とかエキサイト翻訳とかある中なんでGoogleかといったらその訳し方が凝っているのね。
ではオモシロリストを。
Google翻訳で日本語を英語に翻訳してみると・・・

・魔女の宅急便←これも中々しゃれているね。
・上を向いて歩こう←英語になるとやっぱりこっちなんだろうなー。
・深紫（Deep Purpleのことね）←「紫」をこう読むとは知らなんだ。
・ジョジョの奇妙な冒険←やっぱりこれが一番好き。

色んな言葉をためしに翻訳していると単に直訳をしているだけではないんだなーと気づく。
昔は翻訳はすごく使えないイメージで凝り固まっていたが、今は色んなアルゴリズムを使っているんだなと感心。
実際の仕組みはわからないけど！！

もう自分の中ではキング・クリムゾンといえばジョジョの第5章のボスのイメージの方が強い。。
やっぱ時間を消し飛ばせるって言うのはある意味最強、反則だ！
でもそれに勝つスタンドを考えるっていうのがこれまた・・・・面白い！！

すごい話がずれたので戻すと、、、
その？御大がPCを立ち上げた時の効果音を作ったらしいです。

ちなみに、XPはBill Brownという人･･･ん～誰？？
95がBrian Eno、何か聞いたことあるような無いような？？
他は探してみたけど出てこなかった。。

[http://jp.youtube.com/watch?v=djFpNLgwgFI:movie]
↑
起動音の制作風景。
こういう幻想的な音楽を聴いていると喜太郎の音楽みたい、よくうちの父親が聞いていたもので。。。
レスポールを使っているけどギブソンじゃないっぽい？？
ブライアン・メイのギターみたいにボディーにぽちぽちがいっぱい付いている。
そして足元がすごい事になっていてよくわからん。。
ボリューム2台、MIDIフットスイッチとあと諸々諸々・・・・・・・・・

[http://jp.youtube.com/watch?v=-8F4YF_pH-4:movie]
↑
こちらは歴代のWindows起動音集。懐かしい。

これを機に、一回ちゃんとクリムゾン聞いてみよーっと。

これができるなんて、初めて知った。
んー中々使えるかも！？今度テストサイトに反映してみようかなー。
何やらAjaxを使っているとのこと。

CSIの良い所

• クライアントサイドで動くのでサーバ環境に依存しない。
• サーバに負荷を与えにくい。
• 特有の表記を覚えなくても大丈夫。

こんなところ？

■コード例
<html>
<body>
<script src=”sprinkle.js”></script>
<div src=”info.html”></div>
</body>
</html>

■ブラウザ対応
Internet Explorer 6～7, Firefox 2.0, Safari 3.0 for Windows

■拡張機能
「anticache=”querystring”」
「apply=”value”」
「apply=”replace” wraptag=”htm”」が使えるみたい。

実際試してないからわからないけど、 JSを貼り付ければ良いだけだから楽そうだー。
ただdivの属性が「src」っていうのになっているからValidatorには通らなさそう。

ドットコムな感じに近づいたね。

今β版が密かに動いてるらしい。
何でも0.5%のアクセスに対してランダムらしいけど･･･
俺毎回このUIだよ？
よく調べてないからなんだけど本当にランダムか？？
人に聞いたら「それはラッキーだ！」といってたけど毎回だからなー。

日本のトップページだけ古いらしく、今回のはやっとアメリカのUIに近づいた感じ。
IEとそのコンポだけ新しくて、Firefoxは今のままでした。