パフォーマンス最適化の例

このページでは <link rel="icon">（ファビコン）と <link rel="preload">（リソースの先読み）のサンプルを示しています。

ブラウザの動作イメージ

ページ読み込み開始
↓ 即座に開始（preload）
    ├ フォントファイルの取得
    ├ 外部ドメインへの接続確立（preconnect）
↓ CSS解析完了後
    └ フォント適用（ダウンロード済みのため即時適用）
アイドル時
    └ 次のページの先読み（prefetch）

ブラウザの開発者ツール（F12）でこのページのソースを確認すると、<head> 内のファビコン・preload・preconnectの記述を見ることができます。