遅いのにはワケがある！ホームページが表示されるまでのタイムを確認する方法

2015/06/23 2015/09/08

コストパフォーマンスNo.1のショッピングカートサービス「カラーミーショップ」

デベロッパーツール

通常Web制作の大まかな作業工程としては、「企画構成 → 設計 → デザイン → コーディング → ローンチ」という流れが一般的だが、「コーディング」作業完了時、コーダーの組んだHTMLの確認にアナタはどういったチェック項目をリストアップしているだろうか?

デザイン通りのコーディングがされているか？
ソースはきれいに記述されているか？
リンク切れなどはないか？

など、さまざまなチェック項目が存在するだろうが、ひとつ確認したいことがある。

そのチェック項目の中に「容量は適切か？」という内容は含まれているだろうか？

この容量とは、単にHTMLやCSS、Imageファイルの容量だけでなく、HTMLファイルからの指定された全ての処理を完了するまでの容量の確認も含まれている。

処理を完了するまでの容量とは？

昨今のWebサイトUIは、jQueryやAPIなど外部ファイルと連動し構成されているものが多く、また、外部メディアの読み込みなどもある。

HTMLにはそれらの処理を要求する指示が記載されているわけだが、この要求した処理情報を取得する容量を含めた処理完了容量を確認する必要があるということだ。

HTML、CSS、imageファイルがどれだけ軽量に作成されていたとしても、外部要求が多ければそれだけ情報量は増す。
情報量が多いということは、ブラウザがそれを描画処理するためにも時間が必要になり、あまりに時間がかかる場合アクセシビリティに配慮したものとは言えなくなる。また、昨今のモバイルターゲット時代においては、通信料（パケット量）を考慮したサイト構築は必須だ。