パフォーマンス向上のためのデザイン設計

2章表示速度の基礎

サイトのデザインを決める際、表示速度の基礎を学んでおくことは重要です。そうすれば何を最適化すればよいのか、よく理解できるようになります。ブラウザはコンテンツを、かなり信頼できる方法で取得して表示してくれます。ですからWebページがどのように表示されるかを理解すれば、デザイン面での選択がサイトの表示速度にどのように影響するのか、確実に予測できるようになります。最適化を目指すのは次の3点です。

• ページに読み込まれるリソース（画像、フォント、HTML、CSSなど）の数
• 各リソースのファイルサイズ
• ユーザによるサイトの体感速度

ブラウザでコンテンツを表示するときにユーザが目にするものに加えて、バックエンドで行える改善作業はたくさんあります。たとえば、ファーストバイト†1をクライアントに送信するまでに、サーバ側がなすべきあらゆる作業を最適化することなどです。このほかにも、ページのロード時間に関連するポイントはたくさんあります。単なるフロントエンドで起こる現象にとどまらず、データベースやコンパイルしたテンプレートを呼び出して、HTMLに書き込むといった作業もあります。それでもやはり、Steve Souders氏が述べるように「エンドユーザの応答時間の80％から90％は、フロントエンドで費やされます」。ユーザエクスペリエンスの非常に多くの部分はフロントエンドにかかわっていますので、まずフロントエンドの側面から、ページのロード時間について見ていきましょう。

[†1] ファーストバイト：Webサーバにリクエストを行った際にサーバから返ってきた最初の1バイトのこと

2.1　ブラウザがコンテンツを表示する方法

ユーザがサイトのURLをブラウザに入力してからサイトのページデザインを表示しはじめるまでの間に、ユーザのブラウザとWebサーバは相互に通信が必要なすべてのデータを処理します。 ...