Webページ読込に時間がかかるのはなぜ？処理の裏側を開発ツールでのぞいてみよう【吉川英一の「スマホのちょっと深いとこ」】
| ページ読込に時間がかかるのはイラつくもの（写真はイメージです） |
スマートフォンでWebサイトを閲覧する時、Webページの読込が遅いのは困りものです。携帯電話ネットワークが3GからLTEへ移行しつつあり、ブロードバンド回線やWi-Fiの速度も上がり続けているのですが、それでもやはりWebページの表示を待たされるケースは少なくないのではないでしょうか。
今回の連載「スマホのちょっと深いとこ」では、スマートフォンがWebページを読み込んで表示する際に何が行われているのかを、開発ツールを用いて紹介します。Webページの読込時に意外と多くの処理が行われていることに驚くかもしれません。
【Webページの読込は1回のやりとりで終わらない】
スマートフォンなどのWebブラウザがWebページを読み込む処理の概要を説明します。Webブラウザは、Webページの内容が記載されたファイル（HTMLファイル）をインターネット（上のWebサーバーと呼ばれるコンピューター）から取得して、その内容にもとづいてWebページの画面を作っていきます。
ところが一般に、HTMLファイルに記載されている文字情報だけではWebページの画面を完成させることはできません。例えばWebページに画像を含む場合、その画像ファイルそのものはHTMLファイルに含まれず、画像ファイルの置き場所（URL）が書いてあるだけなので、Webブラウザはその情報に基づきインターネットから画像ファイルを取得します。この処理を画像ファイルの数だけ繰り返すことになります。
つまりWebページの読込処理をざっくり言えば以下のようになります。
1) HTMLファイルを読み込む
2) Webページに含まれる画像などのファイルを必要なだけ読み込む
1回のやりとりで終わるわけではなく、Webページを構成する様々なファイルを次々と読み込む処理が行われているわけです。
【WebインスペクタでWebページ読込の様子を見てみよう】
今回はiPhone 5s（iOS 7.0.4）とMac（OS X 10.9.1）、Safari（7.0.1）を組み合わせて、WebページをiPhoneで読み込む様子をSafariの「Webインスペクタ」と呼ばれるツールで調べてみます。対象WebページはS-MAX（http://s-max.jp）とします。画面の左側に読み込まれたファイルの名前、右側の「タイムライン」に読み込まれたタイミングが表示されます。
Webインスペクタを使うとiPhoneのWebページ読込の様子をMacで表示できる
まずWebページの文字情報から見ていきましょう。S-MAXのWebページの場合、Webページの内容を記述するHTMLファイルは16個（*1）、Webページの見栄えを記述するスタイルシート（CSS）ファイルは3個読み込まれていました。
*1：同一のファイル名が複数回リストされる場合がありましたが、本記事では個別にカウントしています。
読み込まれたHTMLファイル
CSSファイルはこれだけ
一方で画像ファイルは一気に数が多くなり全部で48個あります。また意外なところでは、Webページに動的な振る舞いを与えるプログラム（JavaScript）ファイルが55個読み込まれていました。ファイル名から推測すると、JavaScriptファイルの多くは広告表示を行うもののようです（*2）。
*2：（開発者用補足）「nend」や「AdLantis」、「AdStir」といった広告業者の名称を複数見つけることができます。
HTMLファイルそのものより画像ファイルのほうが多数
広告を表示するためのJavaScriptが多く読み込まれている
【Webページの読込処理は意外と複雑】
今回の記事ではWebページの表示時に実際に読み込まれているファイルが意外と多いことを紹介しました。さらにWebページを表示させるためには、これらを見栄え良く画面上に配置する処理が必要となります。WebブラウザがWebページ1枚表示するのに、裏側では複雑な処理が行われているわけです。
単純にネットワークが速くなっても、ページ表示までの処理が複雑であるため、一瞬でページが表示されるような状態にはなかなかなりません。スマートフォンでWebページを閲覧する機会が増えている昨今、Webページを作る側はできるだけ処理をシンプルにして表示速度を上げることが求められます。一方Webページを見る側としては、裏側の複雑な処理に思いを馳せて焦らず待つより仕方なさそうです。
■関連リンク
・エスマックス（S-MAX）
・エスマックス（S-MAX） smaxjp on Twitter
・S-MAX - Facebookページ
・Safari for Developers（Apple Developer）
・連載『吉川英一の「スマホのちょっと深いとこ」』記事一覧 - S-MAX
・今日の気分はバリいくつ？