知覚的パフォーマンス
知覚的パフォーマンス は、ユーザーから見てウェブサイトがどれくらい速く感じられるかを表します。ユーザーがパフォーマンスをどのように知覚するかは、具体的な統計値と同じくらい、あるいはどんな具体的な統計値よりも重要ですが、それは主観的で簡単に計測できるものではありません。知覚的パフォーマンスはユーザーの視点であり、計測される値ではありません。
この記事は、ユーザーの知覚と、主観的な要素を計測するために使える具体的なツールに目を通し、知覚的パフォーマンスの簡潔な紹介を提供します。
| 前提条件: | 基本的なコンピューターリテラシー、 基本的なソフトウェアのインストール、 クライアントサイドのウェブ技術の基本的な知識 |
|---|---|
| 目的: | ウェブパフォーマンスに対するユーザーの知覚について基本的な理解を獲得すること。 |
概要
ページの読み込みやユーザーとの対話がいかにすばやく（スムーズに）行われるかという認識は、リソースを読み込むのに必要な実際の時間以上に重要です。物理的にサイトを速く実行することはできないかもしれませんが、ユーザーにとってどれだけ速く感じられるかを改善することは十分に可能です。
知覚的なパフォーマンスを向上させるための一般的なルールは、通常、処理が完全に完了するまで（何か情報を提供するまで）ユーザーを待たせるよりも、すばやくレスポンスを提供し、定期的に状況を更新したほうが良いというものです。例 えば、ページを読み込むとき、画像や他のリソースをすべて待つよりも、テキストが到着した時点で表示する方が良いでしょう。たとえコンテンツが完全にダウンロードされていなくても、ユーザーは何かが起こっていることを確認でき、コンテンツを操作し始めることができる。
メモ: 何かが起こるのを受動的に待っているユーザーよりも、積極的に関与したり、気を引いたり、楽しませたりしているユーザーの方が、時間がすばやく経過するように見えるようです。可能な限り、タスクの完了を待っているユーザーに積極的に関わり、情報を提供しましょう。
同様に、ユーザーが長時間実行する処理を行うためにリンクをクリックすると、すぐに「読み込み中アニメーション」を表示したほうが良いでしょう。処理にかかる時刻は変わりませんが、サイトがよりレスポンスよく感じられ、ユーザーは何か有益な作業に取り組んでいることを認識できます。
パフォーマンス指標
ユーザーが「どう感じるか」を評価するために、サイトで実行することができる単一の指標やテストはありません。しかし、「役立つ指標」となりうる指標はいくつもあります。
- ファーストペイント (First paint)
-
最初の描画処理が始まるまでの時間です。この変更は目に見えないかもしれないことに注意してください。単純な背景色の更新であったり、もっと目立たないものであったりします。
- FCP (First Contentful Paint)
-
最初の重要なレンダリング（テキスト、前景または背景画像、キャンバス、SVG など）までの時間。このコンテンツは必ずしも有益なものではないことに注意してください。
- FMP (First Meaningful Paint)
-
有益なコンテンツが画面に描画されるまでの時間です。
- LCP (Largest Contentful Paint)
-
ビューポートで表示される最大のコンテンツ要素のレンダリング時間。
- スピードインデックス (SI)
-
可視画面上のピクセルが描かれるまでの平均時間を測定します。
- TTI (Time to interactive)
-
ユーザーと対話できるユーザーインターフェイスが完成するまでの時間（読み込んだプロセスの最後のロングタスクが完了するまでの時間）。
パフォーマンスの改善
知覚的パフォーマンスを改善するヒントとコツを以下に示します。
最初の読み込みの最小化
知覚的パフォーマンスを向上させるには、元ページの読み込みを最小限に抑えることです。言い換えれば、ユーザーがすぐに対話するコンテンツを最初にダウンロードし、残りは「バックグラウンドで」ダウンロードします。ダウンロードするコンテンツの総量は実際に増えるかもしれませんが、ユーザーはとても小さな量しか待っていないので、ダウンロードはより速く感じられます。
対話型機能をコンテンツから分離し、初回読み込み時に表示されるテキスト、スタイル設定、画像を読み込みます。初回のページ読み込み時に使用されない、または表示されない画像やスクリプトは、後回しにするか、遅延読み込みを行います。さらに、読み込む資産を最適化する必要があります。画像や動画は、最適な形式で、圧縮して、適切なサイズで提供する必要があります。
コンテンツのジャンプとリフローの防止
画像やサードバーティーの広告のような、コンテンツを押し下げたり他の場所にジャンプさせたりするアセットは、ページがまだ読み込み中であるように感じさせ、知覚的パフォーマンスを悪化させます。ユーザーの操作に起因することなくリフローするコンテンツは、特に悪いと言えます。他と比べて読み込みが遅く、かつ他のコンテンツが画面に描画された後に要素が読み込まれるアセットは、レイアウト上にそれらのためのスペースを残すよう事前に計画しましょう。そうすることでコンテンツは、とくにサイトが操作可能になった後で、ジャンプやリサイズしなくなります。
フォントファイルの遅延をの防止
フォント選びは重要です。適切なフォントを選択することで、ユーザー体験を大きく向上させることができます。知覚的なパフォーマンスの観点からすると、「最適でないフォントのインポート」により、テキストがスタイル設定されたとき、他にもフォントを代替する際にちらつきが発生することがあります。
同じサイズとウェイトの代替フォントを用意しておきましょう。そうすることでフォントの読み込みによるページの変化に気付かれにくくなります。
操作可能な要素は操作可能に
目に見える操作可能な要素は常に操作可能で反応できるようにしましょう。入力の要素が目に見える場合、ユーザーは遅延なしにそれらと操作できるべきです。ユーザーは反応に 50 ミリ秒より長い時間がかかる場合、それが遅れていると感じます。コンテンツの再描画が 16.67 ミリ秒（または 60 fps）より遅いか、不規則な間隔で再描画されるとページが壊れているように感じます。
CSS で入力用のモーダルを表示したり、可能な場合は JS で先行入力・自動補完を追加するなど、先行入力やプログレッシブエンハンスメントを使いましょう。
タスクの開始をより操作可能にする
keyup を待つのではなく、keydown でコンテンツをリクエストすることで、コンテンツの読み込まれる負荷を 200ms 削減することができます。keyup イベントに、面白いが控えめな 200ms のトランジションを追加することで、さらに 200ms の読み込む時間を短縮することができます。400ms の時間を節約することはできませんが、ユーザーはコンテンツを待つまで、もとい、コンテンツを待っているように感じることはないでしょう。