ウェブパフォーマンスとは何か

ウェブパフォーマンスは、実際には遅い処理を速いように見せることを含め、ウェブサイトを速くすることに関わるすべての事柄を表します。サイトを速く読み込む、ユーザーが早くインタラクションを始められるようにする、あるいは、読み込みに時間がかかる場合は、たとえばローディングスピナーを表示するなど、ユーザーが安心できるフィードバックを提供する、これらができていますか?スクロールとアニメーションは滑らかですか?この記事では、客観的で測定可能なウェブパフォーマンス*についての簡潔なイントロダクションを提示し、どのような技術、テクニック、そして最適化に関わるツールが利用できるかを探っていきます。

前提条件:

基本的なコンピューターリテラシー、基本的なソフトウェアのインストールクライアントサイドのウェブ技術の基礎知識

目的:

ウェブパフォーマンスに関わる事項について基本的な理解を得ること

* 次の記事でカバーする主観的な知覚されたパフォーマンスの逆

ウェブパフォーマンスとは何か

ウェブパフォーマンスはウェブサイトまたはウェブアプリケーションの客観的な測定結果とユーザーによって知覚される体験です。これには以下の主要な領域が含まれます。

  • 全体の読み込み時間を減らすこと:ウェブサイトを描画するためにリクエストされたファイルをユーザーのコンピューターにダウンロードするのにどれくらいの時間がかかりますか?この問いの答えは、ネットワークのレイテンシーやファイルの大きさ、ファイルの数、その他様々な要因に影響を受けます。ひとつの一般的な戦略は、ファイルをできる限り小さくすること、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 を参照してください。
  • ドキュメントオブジェクトモデル:ドキュメントオブジェクトモデル (DOM) は HTML のコンテンツと要素をツリーのノードとして表現するツリー構造を指します。そこには HTML のすべての属性とノード間の関係が含まれます。ページがロードされた後の追加の DOM 操作(たとえば、ノードの追加、削除、移動)はパフォーマンスに影響を与えます。そのため、DOM がどのように動作し、その問題をどのように和らげるかを理解するを理解することが重要です。詳しくは Document Object Model を参照してください。
  • レイテンシー:事前に述べましたが、簡単に言うと、レイテンシーとは、ウェブサイトのアセットがサーバーからユーザーのコンピューターまで移動するのにかかる時間のことです。そこには TCP と HTTP の接続を確立にかかるオーバーヘッドも含まれます。そして、リクエストとレスポンスのデータ (bytes) がネットワーク間を行き来するために必要となる避けようのないレイテンシーがあります。一方で、レイテンシーを減らすためのいくつかの方法があります。(たとえば、ダウンロードするファイルの数を減らすことで HTTP リクエストの数を減らすこと、CDN を利用してサイトのデータを世界中に効率よく展開すること、サーバーがより効率よくファイルを提供できるように HTTP/2 を利用することなどが挙げられます)このトピックに関わるすべての事柄は Understanding Latency を参照してください。

結論

今のところは以上です。ウェブパフォーマンスのトピックに関するこの簡潔な要約が、あなたが全体のアイデアを理解するための助けとなり、さらに学ぶ意欲をかき立てることができたなら幸いです。この後は知覚されたパフォーマンスを取り上げ、避けられないパフォーマンスへの影響を、ユーザーにとって深刻に見えないようにする、あるいは完全に気づかれないようにする賢い方法について見ていきます。

このモジュール内