Webページの表示が遅いのはなぜ!?ブラウザの仕組みを読み解いてみた。

      2017/05/08

ブラウザの仕組み

どうも、オタカタカオです。

 

Web、使ってますか?

 

このブログを見て頂いてるということは、間違いなく使ってますね。

そして、当ブログにアクセスして頂いてありがとうございます!

 

こうしてブログを見てもらえるのも「ブラウザ」というアプリケーションのおかげでもあります。

 

でも、Webページの表示が遅くてストレスを感じたことはないですか?

 

何度アクセスしなおしてもやっぱり遅い。

 

今回は表示が遅い原因を探るべく、ブラウザの裏側で何が行われているかを知るために、仕組みを読み解いてみたので紹介したいと思います。

 

スポンサーリンク

 

ブラウザの仕事はレンダリング

「レンダリング」という言葉を聞いたことはあるでしょうか?

 

【レンダリング】とは・・・

画像や画面の内容を指示するデータの集まり(数値や数式のパラメータ、描画ルールを記述したものなど)をコンピュータプログラムで処理して、具体的な画素の集合を得ること。

そのためのハードウェアやソフトウェアのことを「レンダラー」(renderer)あるいは「レンダリングエンジン」(rendering engine)などと呼ぶ。

画像だけでなく映像や音声を生成することもレンダリングということがある。

(IT用語辞典 e-Words より引用)

 

よくわかりませんね。

 

相変わらずIT系の言葉は分かりづらいんですよね。

 

簡単に言うとレンダリングとは組み立てることを言います。

 

レンダリングとは?

まずはレンダリングが何かを知るためにサイトが表示されるまでの流れを整理してみます。

 

URLにアクセスして、サイトが表示されるまでの流れはこんな感じです。

 

browser-structure_1

 

URLにアクセスすると、ブラウザはサーバーからhtmlファイルやcssファイル、画像ファイルを取得します。

 

htmlファイルやcssファイルや画像ファイルなどのWebページを構成しているファイルのことをコンテンツファイルと言います。

 

イメージにあるようにブラウザがサーバーからコンテンツファイルを取得するのは、基本的に1つずつになります。

 

今当ブログで見ているようなデザインのWebページが1回でサーバーから取得できてる訳ではないんですね。

 

browser-structure_2

 

つまり、ブラウザはサーバーから取得した1つずつのファイルを組み立ててWebページを作って画面に表示しているんです。

 

レンダリングのベースはhtml

Webページがどのようにレンダリングしているのかというと、ベースになるのはhtmlファイルです。

 

ブラウザは最初にサーバーからhtmlファイルを取得してソースコードからいろんなことを読み取って判別してます。

 

例えば、htmlのバージョンや使用する言語情報、Webページの構成などですね。

 

htmlのバージョンは現在の主流はhtml5というバージョンですが、htmlのバージョンによってソースコードの書き方が違ったりしますのでそれを判別してます。

 

htmlのバージョンとソースコードの書き方が合ってなかったりすると、Webページが正しく表示されなかったり、googleなどの検索エンジンにも嫌われてしまうこともあるみたいですので、Webページを作成する際は気を付けましょう。

 

言語情報は使用する文字コードを判別してます。

文字コードにはShift_JISとかUTF-8とかEUCなど色んな形式があります。

 

文字コードが適切に設定されていないと文字化けと呼ばれる現象が発生してしまいます。

こんなやつですね。

 

browser-structure_3

 

Webページの構成というのはアクセスしたサイトの枠組みのことです。

どこにタイトルや画像を表示するのか、どこにリンクを設定するのかなど、Webページのベースになる部分を読み取ってるんですね。

 

外部ファイルで装飾していく

browser-structure_4

 

単純にhtmlだけでも画面に表示することはできますが、レイアウトが崩れたり、文字のフォントが読みにくい状態になったりしますね。

 

それを調整してキレイなデザインにするために、cssファイルや画像ファイルで装飾されてます。

 

cssやjsはhtmlファイルのソースコードにも書くことはできます。

 

でも、Webページのデザインを変えたいとき、サイト内の全てのhtmlファイルを変更するのは大変な作業なんです。

そりゃもう地獄の作業です。

 

しかも、変更する部分を間違える可能性もあります。

 

そんなときにも1つのファイルを編集するだけで作業が完結できる・・・といった効率化を目的として、htmlファイルには書かずに、htmlファイルから呼び出すようにしてます。

 

このように、htmlファイルから呼び出すファイルのことを外部ファイルと言います。

・・・そのままですね。

 

外部ファイルの読み込み

htmlにはたくさんの外部ファイルが書かれてますが、これもhtmlファイルと同じようにサーバーから取得していきます。

 

htmlに書かれてる外部ファイルは上から順番に読み込んでいきます。

 

しかも1ファイルずつです。

 

なので、外部ファイルがたくさん書かれていたりすると、ブラウザとサーバー間のデータ通信を何度も行うことになってしまって、Webページが表示されるまでの時間が長くなってしまうこともあるんですね。

 

コンテンツファイルの解析

browser-structure_5

 

ブラウザはサーバーからhtmlファイルと一部の外部ファイルが取得できた段階で解析という作業を行います。

(なぜ、一部の外部ファイルなのかは後ほど説明しますね。)

 

コンテンツファイルの解析ではどんなことをするのか・・・

 

例えば、画面表示のサイズを調整するための解析を行っています。

 

今、当ブログを見て頂いているのはスマホでしょうか?

 

それともパソコンでしょうか?

 

もしかしてタブレット?

 

どんなもので見て頂いていても嬉しいです!

 

なんていう僕の感想はどうでもいいですね。

先に進みます。

 

Webページを見る方法も色々ありますね。

 

スマホやパソコンなどのデバイスが違うこともあれば、ブラウザのウィンドウサイズも全画面表示で見る人もいれば、小さくして見る人もいます。

 

なので、Webページを見てる人の環境によって適切に表示する必要があるんですね。

 

どのぐらいのサイズでブラウザウィンドウを開いているかを計算して、ブラウザのサイズに合わせてコンテンツの大きさを調整するということを行っています。

 

たぶん、イメージしやすいのは画像ファイルですね。

 

例えば、htmlファイルで画像ファイルが横幅80%で指定されている場合、ブラウザはウィンドウサイズに対して80%の大きさで画像を表示するという調整を行っているんです。

 

Webページを構成する要素に対して、このような解析を順番に行ってます。

 

ユーザーを待たせない仕組み

browser-structure_6

コンテンツファイルの解析を行ったらユーザーにコンテンツを表示していきます。

 

サイトにアクセスしてなかなか表示されないとき、あなたはどうしてますか?

1.コンテンツが表示されるのを優しい心で待つ

2.すぐに立ち去る

3.スマホまたはパソコンを叩きつける

 

できることなら、どんな時も大らかな気持ちで「1」を選びたいところです。

 

・・・でも、たぶん無理!

 

さすがに「3」を選ぶことは無いですけどね。

間を取って「2」ですね。

 

先ほど「htmlファイルと一部の外部ファイルが取得できた段階で~」と言いましたが、ここにユーザーを待たせないようにする仕組みがあります。

 

ひとことで言えば、レンダリングしたところからコンテンツを表示していくということをしてるんです。

 

とは言っても、Webページが不完全な状態・・・レイアウトやデザインが崩れた状態でコンテンツを表示してる訳ではありません。

 

ファーストビューの表示

「ファーストビュー」という言葉を聞いたことあるでしょうか?

 

Webページは基本的に横幅は一定で、縦に長くなってると思います。

 

そして、Webページの下の方を見る時にはスクロールしながら見ていきますね。

(ごく稀に横にスクロールするWebページを見かけますが・・・)

 

スクロールしなくても見える範囲のことをファーストビューと言います。

サイトにアクセスして一番最初に見える範囲のページのことです。

 

ブラウザはユーザーを待たせないように、ファーストビューのコンテンツがレンダリングできたら表示するようにしてます。

 

ユーザーがファーストビューのコンテンツを見てる間に、続きのコンテンツもレンダリングを行って、スクロールされたらコンテンツが見えるようにしてるんですね。

 

まとめ

流れをざっと整理するとこんな感じですね。

 

1.ユーザーがブラウザからサイトにアクセスする

2.ブラウザがサーバーからhtmlファイルを取得する

3.ブラウザがサーバーから外部ファイル(一部)を取得する

4.取得したコンテンツファイルを解析する

5.ファーストビューにコンテンツを表示する

6.ユーザーがファーストビューのコンテンツを見てる間に続きをレンダリングする

 

普段何気なく使ってるブラウザですけど、裏側ではユーザーの期待に応えようと頑張ってます。

 

なので、スマホを叩きつけることはしないで下さいね。

ゼッタイ後悔しますよ。

 

最後まで読んで頂きましてありがとうございました!

 

スポンサーリンク

 

 - Web