前々から判ってはいたんですが、ページ表示が物凄く遅い点をちょっと改善してみました。
こんなサイトでも来てくれるひとはいるみたいで、今までイラッとさせちゃってごめんなさい＞＜；
改めて調査してみると。。。「これはひどい！！What the Hell !!」って状態でした。
ちなみにこの曲大好きです。
最もひどいのは404が帰って来てて、その度にCGIがゴリゴリ回ってたこと。
なんてこったい。。。（汗
そんなだと表示できるもんもできんし、サーバ側にも迷惑かけるっての！
(ほんとすいませんでした。レンタルサーバさん。。。)
で、今回利用してみたツールは、Chromeにもともと入ってるデベロッパーツール。
▼Chrome => ツール -> デベロッパーツール
改めて使ってみると、とても便利でした。
Chromeのデベロッパーツール
呼び出し方はツールバーの右端にあるレンチのアイコンから。
▼Chrome => ツール -> デベロッパーツール
別ウィンドウで開きます。
もともと開いていたウィンドウで、計測したいページを開いたりF5でリロードかけると自動で計測開始。
「Resources」の「All」では、CSSとか画像とかまとめて調査してくれます。
表示にかかったトータルな時間も表示してくれます。
また、何か問題がある箇所では、その要素に対して黄色マークを付けてくれます。
今回はこれらを主に利用して、404の箇所とか、読込にすごい時間が掛かってる要素を判定していきました。
ちなみにFirebugみたいな使い方も
メニューの「Elements」では、ページ内のそれぞれの要素を確認する事が出来ます。
IDやclassを選択してみると、ページ内で色付け指定。
そして、それぞれの要素に当たっているCSSの状態を確認できます。
右カラムに、現在のCSS状態が分解されて表示されてます。
ひょっとして･･･と思って、プロパティをダブルクリックしてみると編集可能。
変更状態はリアルタイムで反映されます。
Firebugと似てますね。これすごい便利！丶(･ω･)ノ
一応、ChromeにはFirebugLiteを導入してるんですが、今度からこれと合せ技で使う事になりそうです。
あとがき
一通りやってはみたけど、まだまだ改善の余地がある状態です。
それらはぼちぼちやってこうかな？と思ってます。
あと、アンケートを参考にさせて貰ってます。
送って貰ってほんと嬉しいです！ありがとございますm(。。)m
