フロントエンドを高速化する主な方法は何ですか？

Question

IT Interview Practice · Accepted Answer

**実際に遅いユーザー体験の部分を改善し、変更が効いたか測ります。**バンドルを小さくすることは、体験や関連コストの改善につながる場合に有用です。

普通のスマートフォンで商品ページを開くと、主要画像が遅く表示され、バリエーション選択にも待ちが発生するとします。読み込みと操作応答は別の問題で、1つの最適化では両方直らないことがあります。

## 1. 代表的な測定で症状を確かめる

製品に重要な利用経路、端末、ネットワーク条件を選びます。実ユーザー計測で影響する集団を見つけ、管理されたブラウザテストで再現します。高性能な開発用PCでは顧客の遅さを見逃すことがあります。

- LCPは画面内の最大コンテンツ要素が描画される時点を測り、読み込み体験の評価に役立ちます。
- INPはページ訪問中のユーザー操作に対する応答性を表します。
- CLSは画像出現時の移動など、予期しないレイアウトのずれを測ります。

これらの[Core Web Vitals](https://web.dev/articles/vitals)は体験の異なる面を示します。バリエーション選択からカート投入まで成功するなど実際の目的と組み合わせ、数字の改善で機能破損を隠さないようにします。

## 2. 重要なコンテンツを遅らせる原因を見つける

リソースの発見、取得、完了時刻を示すリクエストのウォーターフォールを調べます。商品ページでは、JavaScript取得とAPI応答の後まで主要画像の読み込みが始まらないかもしれません。

```text
HTML -> JavaScript -> Product API -> Main image
```

画像圧縮は転送を速めますが、早期に画像を発見できれば前段の待ちを減らせます。適切ならサーバーレンダリングや静的生成で、初期HTMLに有用な商品情報を含めます。鮮度、サーバーコスト、操作可能にするために残るJavaScriptも確認します。

## 3. 不要な転送と実行を減らす

重要経路が分かったら、今の画面に役立たない仕事を除きます。すべての最適化を無差別に行うより、測定した遅延に対応する変更を優先します。

- 適切なサイズと形式の画像を配信します。画面外の画像は遅延読み込みし、ユーザーが待つ主要画像は遅らせません。
- ルートや機能単位でコードを分割し、商品画面が未使用の管理画面まで読み込まないようにします。
- 不要な依存を取り除き、ネットワークとメインスレッドの両方を使う第三者スクリプトを見直します。
- 適したテキスト応答を圧縮し、バージョン付き静的資産をキャッシュします。個人データには別の安全な方針を設けます。

ファイルが小さくても、ブラウザには解析と実行が残ります。ネットワークとCPUの両面を確認してから成功と判断します。

## 4. 操作遅延の原因を直す

選択が遅れるなら、スクリプトや描画の多くを担当するメインスレッドを調べます。長い計算は、全ファイルの取得後でも応答を妨げます。

長い処理を小分けにするか、適した計算をワーカーへ移します。頻繁に変わる入力では不要な要求を避け、古い応答が新しい選択を上書きしないようにします。メモ化は飾りとして入れず、反復計算が高コストと測定できた場合に使います。

非常に長い一覧は表示範囲だけ描画すると軽くなりますが、キーボード操作とアクセシビリティを保ちます。画像など遅れて出る要素の領域を確保し、レイアウトの飛びを防ぎます。症状が違う対策なので、元の問題に対して個別に確認します。

## 5. 変更後に利用経路全体を検証する

同じ管理条件のテストを繰り返し、公開後は実ユーザーの結果を観察します。性能に加え、商品機能の正しさ、キーボード利用、購入経路、バックエンド負荷の増加も確認します。

重要な資源に実用的な予算を設け、悪化を監視します。実ユーザーが待ったり目的を達成できなかったりするなら、実験室の高スコアだけでは不十分です。**最終成果は、変更前後の測定に裏付けられた、速く安定して使える利用経路です。**

1. 代表的な測定で症状を確かめる

2. 重要なコンテンツを遅らせる原因を見つける

3. 不要な転送と実行を減らす

4. 操作遅延の原因を直す

5. 変更後に利用経路全体を検証する

関連する質問