ウェブパフォーマンスとは
ウェブパフォーマンスとは、遅い処理を速く見せることも含めて、ウェブサイトを速くすることです。サイトがすぐに読み込まれるか、ユーザーがすぐに操作を始めることができるか、何かの読み込みに時間がかかっている場合には安心感のあるフィードバック (ローディングスピナーなど) を提供しているか。スクロールやアニメーションはスムーズか。この記事では、客観的で測定可能なウェブパフォーマンス*について簡単に紹介し、ウェブの最適化にどのような技術、テクニック、ツールが必要なのかを見ていきます。
| 前提条件: | 基本的なコンピューターリテラシー、 基本的なソフトウェアのインストール、 クライアント側のウェブ技術の基本的な知識 |
|---|---|
| 目標: | ウェブパフォーマンスに関わる事項について基本的な理解を得ること。 |
* 次の記事で扱う主観的な知覚的パフォーマンスの対義語
ウェブパフォーマンスとは何か
ウェブパフォーマンスはウェブサイトまたはウェブアプリケーションの客観的な測定結果とユーザーによって知覚される体験です。これには以下の主要な領域が含まれます。
- 全体の読み込み時間を減らすこと: ウェブサイトの表示に必要なファイルが、ユーザーのコンピューターにダウンロードされるまでの時間です。これは、レイテンシー (en-US)、ファイルの大きさ、ファイルの数、その他の要因に影響される傾向があります。一般的な戦略としては、ファイルをできるだけ小さくしたり、 HTTP リクエストの数をできるだけ減らしたり、ファイルをより早く利用できるようにするための賢い読み込み技術 (先読みなど) を採用したりすることです。
- サイトをできるだけ早く利用可能にすること: これは基本的に、ユーザーが実際にすぐに使い始めることができるように、ウェブサイトの資産を適切な順序で読み込むことを意味します。ユーザーが主要な作業をしている間、他の資産はバックグラウンドでロードし続けることができます。また、実際に必要なときにだけ資産を読み込む場合もあります (これを遅延読み込みといいます)。読み込みを開始してから、サイトが利用可能な状態になるまでの時間を測定したものを time to interactive と呼びます。
- スムーズさとインタラクティブ性：そのアプリケーションは使っていて信頼でき、楽しいと感じられますか？スクロールはスムーズですか？ボタンはクリックできますか？ポップアップはすぐに開いてスムーズにアニメーションしますか？アプリケーションがスムーズだと感じさせるための様々なベストプラクティスがあります。たとえば、アニメーションのために JavaScript ではなく CSS を使うこと、DOM の変更により UI が要求する再描画の回数をできる限り少なくすることなどが挙げられます。
- 知覚的パフォーマンス：ウェブサイトがユーザーにとっていかに速いように見せるかは、ウェブサイトが実際に速いがどうかよりもユーザーの体験への大きなインパクトがあります。ユーザーがパフォーマンスについてどう感じるかは重要です。あるいは、それは客観的な統計以上に重要です。しかし、それは主観的なもので、簡単に測定できるものではありません。知覚されたパフォーマンスは測定項目 (metric) ではなく、ユーザーからの見え方を表します。レイテンシーやそのほか何かの問題で操作に長い時間がかかる場合であっても、たとえば待ち時間の間にローディングスピナーを表示したり、便利なヒントやティップスを表示したり（他にはジョークや、その他適切だと思えるものであれば何でも良いです）することでユーザーのエンゲージを維持することは可能です。そういったアプローチはただ何も表示しないよりもずっと良いと言えます。何も表示されない時間は長く感じられ、その結果ユーザーはウェブサイトが壊れていると考えて利用をやめてしまう可能性もあります。
- パフォーマンスの測定：ウェブパフォーマンスにはアプリケーションの実際の速度と知覚的な速度を計測すること、パフォーマンスをできる限り最適化しその結果が維持されているか監視するという面があります。そこではいくつかのメトリクス（成功か失敗かを表す測定可能な指標）とそれらのメトリクスを測定するツールが必要になります。本記事の全体を通してそれらを検討します。
まとめると、たくさんの要素がパフォーマンスに影響を与えます。レイテンシー、アプリケーションのサイズ、DOM ノードの数、リクエストされるリソースの数、JavaScript の性能、CPU 負荷、その他いろいろです。それらの読み込みとレスポンスの時間を小さくすることが重要です。それから、ユーザーの体験上後で必要になる部分を同期で読み込むなどして、サイトが利用可能になる時間をできる限り早くすることでレイテンシーを感じさせないようにするといった追加の要素も重要です。
メモ: ウェブのパフォーマンスには、Time to load、Frames per second、Time to interactive のような客観的や測定結果とコンテンツの読み込みがどれくらい長く感じられるかといった主観的な経験の両方が含まれます。
コンテンツはどのように描画されるか
効率的にウェブパフォーマンス、その背後にある問題やここまでに挙げた主要なトピックを理解するためにはブラウザーがどのように動作するかについていくつかの詳細を理解することが必要です。これには以下のトピックが含まれます。
- ブラウザーはどのように動作するか：URL を入力し、 Enter / Return を打ち込んだとき、ブラウザーはウェブサイトのファイルを持っているサーバーがどこにあるかを探しだし、そのサーバーとの接続を確立し、ファイルをリクエストします。詳しい概要は「ページの生成：ブラウザーはどのように動作するか」を参照してください。
- ソースコードの順番：HTML の index ファイル上のソースの順番はパフォーマンスに重大な影響を及ぼす場合があります。index ファイルからリンクされた追加の資産のダウンロードは、一般的にソースコードの順番に従ってシーケンシャルに実行されます。しかし、この部分はいくつかのリソースがそのコンテンツが解析、実行されるまで追加のダウンロードをブロックすることに気づくことで最適化できるようになります。
- クリティカルパス：これはファイルがサーバーからダウンロードされた後にブラウザーがウェブのドキュメントを構築するプロセスのことを指します。ブラウザーは明確に定義されたステップに従って、クリティカルレンダリングパスを最適化し、そのときのユーザーのアクションに関連するコンテンツの表示に優先順位をつけて、コンテンツの描画時間を大きく改善します。より詳しい情報は、Critical rendering path (en-US) を参照してください。
- ドキュメントオブジェクトモデル：ドキュメントオブジェクトモデル (DOM) は HTML のコンテンツと要素をツリーのノードとして表現するツリー構造を指します。そこには HTML のすべての属性とノード間の関係が含まれます。ページがロードされた後の追加の DOM 操作（たとえば、ノードの追加、削除、移動）はパフォーマンスに影響を与えます。そのため、DOM がどのように動作し、その問題をどのように和らげるかを理解するを理解することが重要です。詳しくは Document Object Model を参照してください。
- レイテンシー：事前に述べましたが、簡単に言うと、レイテンシーとは、Web サイトの資産がサーバーからユーザーのコンピューターまで移動するのにかかる時間のことです。そこには TCP と HTTP の接続を確立にかかるオーバーヘッドも含まれます。そして、リクエストとレスポンスのデータ (bytes) がネットワーク間を行き来するために必要となる避けようのないレイテンシーがあります。一方で、レイテンシーを減らすためのいくつかの方法があります。（たとえば、ダウン読み込むファイルの数を減らすことで HTTP リクエストの数を減らすこと、CDN を利用してサイトのデータを世界中に効率よく展開すること、サーバーがより効率よくファイルを提供できるように HTTP/2 を利用することなどが挙げられます）このトピックに関わるすべての事柄は Understanding Latency (en-US) を参照してください。