遅いのにはワケがある！ ホームページが表示されるまでのタイムを確認する方法
2015/09/08
通常Web制作の大まかな作業工程としては、「企画構成 → 設計 → デザイン → コーディング → ローンチ」という流れが一般的だが、「コーディング」作業完了時、コーダーの組んだHTMLの確認にアナタはどういったチェック項目をリストアップしているだろうか?
- デザイン通りのコーディングがされているか？
- ソースはきれいに記述されているか？
- リンク切れなどはないか？
など、さまざまなチェック項目が存在するだろうが、ひとつ確認したいことがある。
そのチェック項目の中に「容量は適切か？」という内容は含まれているだろうか？
この容量とは、単にHTMLやCSS、Imageファイルの容量だけでなく、HTMLファイルからの指定された全ての処理を完了するまでの容量の確認も含まれている。
処理を完了するまでの容量とは？
昨今のWebサイトUIは、jQueryやAPIなど外部ファイルと連動し構成されているものが多く、また、外部メディアの読み込みなどもある。
HTMLにはそれらの処理を要求する指示が記載されているわけだが、この要求した処理情報を取得する容量を含めた処理完了容量を確認する必要があるということだ。
HTML、CSS、imageファイルがどれだけ軽量に作成されていたとしても、外部要求が多ければそれだけ情報量は増す。
情報量が多いということは、ブラウザがそれを描画処理するためにも時間が必要になり、あまりに時間がかかる場合アクセシビリティに配慮したものとは言えなくなる。また、昨今のモバイルターゲット時代においては、通信料（パケット量）を考慮したサイト構築は必須だ。
ディレクターであるアナタは、このようなことにも注意してコーダーの書上げたHTMLを確認することが大切だ。
この処理完了容量の確認は、ブラウザのデベロッパーツールで簡単に調査することができるので、是非チェックリストに追加しておいてほしい。（以下に、Firefoxでの使いかたについて解説しているページをご紹介します。）
https://developer.mozilla.org/ja/docs/Tools/Network_Monitor
読了ありがとうございました。
