109. 通信と画像の最適化 — 減らす・まとめる・待たせ方を工夫する

画像はページの中で最も重い資産になりがちです。Angularでは img タグの src を ngSrc に替えて NgOptimizedImage を使うのが基本で、画面外の画像の遅延読み込みや、優先すべき画像への priority 指定が半自動で手に入ります。width と height の指定が必須なので、読み込み時に画面がガタつくずれも防げます。

通信は回数を減らすのが第一です。同じAPIを複数のコンポーネントがそれぞれ呼んでいないかをNetworkタブで確認し、共有サービスに寄せて shareReplay で結果をキャッシュすれば、1回の取得を全員で使い回せます。マスタデータのような滅多に変わらないものほど効果が大きい定番の手です。

それでも消せない待ち時間は、見せ方で短く感じさせます。データ取得中はスケルトン(灰色の枠)を出す、@defer には @placeholder と @loading を添える、といった工夫で体感は大きく変わります。ただしキャッシュは「古いデータをいつまで見せてよいか」とセットで設計しないと、更新されない画面という別の不具合になります。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component } from '@angular/core';
import { NgOptimizedImage } from '@angular/common';

@Component({
  selector: 'app-hero',
  imports: [NgOptimizedImage],
  // src の代わりに ngSrc を使う。width / height は必須で、
  // 指定するとレイアウトのずれ(ガタつき)も防げる
  template:
    '<img ngSrc="/assets/hero.jpg" width="800" height="400" priority />' +
    '<img ngSrc="/assets/footer.jpg" width="800" height="200" />',
})
export class HeroComponent {}

// priority を付けた画像は最優先で読み込まれる(ファーストビューの主役用)。
// 付けない画像は画面に近づくまで読み込みが遅延される

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗