---
name: reference-world_monitor-perf-techniques-comparison-2026-05-29
description: 2026-05-29 World Monitor (worldmonitor.app) vs WIC のフロントエンド最適化技術 honest 比較. 両 site とも total payload ~3-3.5 MB で structurally heavy. 違いは配信方式 (modulepreload + immutable cache + PWA + 外部 API vs Astro bundle). WIC が今日の改善で WM 初回表示と並んだ / WM が今も勝つ部分 / WIC が次やる候補 を整理.
metadata: 
  node_type: memory
  type: reference
  originSessionId: f11c7f03-2bde-43d2-8e6c-060b5abea7b4
---

## 出発点
2026-05-29 藤本さん「World Monitor もそこそこ重い気がするが、 何か軽量化してるのか?」 → curl + HEAD で raw 計測した honest 比較.

## 結論一言
**両 site とも honest に重い** (WM ~3.5 MB / WIC ~3.0 MB total)。 重さの大半は **機能** (パネル数 + データ量 + 3D globe + 多 widget) に由来し、 どの最適化テクニックも完全には消せない. ただし配信方式の違いで体感は変わる.

## 横並び比較 (curl 実測 2026-05-29)

### World Monitor のアセット (preload chunks)
| chunk | サイズ |
|---|---|
| panels | **2.46 MB** (最大) |
| main | 715 KB |
| d3 | 129 KB |
| sentry | 81 KB |
| maplibre CSS | 70 KB |
| checkout | 67 KB |
| i18n | 52 KB |
| settings-persistence | 3 KB |
| **合計 modulepreload JS** | **~3.5 MB** |
| HTML | **34 KB** (inline JSON なし) |

### WIC のアセット (今日の修正後)
| chunk | サイズ | 配信 |
|---|---|---|
| hoisted (main) | **48 KB** | blocking |
| globe.gl | 1.8 MB | **lazy (IntersectionObserver)** |
| maplibre-gl | 1.1 MB | lazy |
| maplibre CSS | 72 KB | lazy |
| index CSS | 52 KB | blocking |
| その他 hoisted | 16 KB | blocking |
| **合計 JS+CSS** | **~3.0 MB** | (mostly lazy) |
| HTML (index) | **599 KB** (inline JSON ~266 KB) | blocking |

## 最適化技術 行列

| 技術 | World Monitor | WIC (改善前) | WIC (今日改善後) |
|---|---|---|---|
| 初期ブロッキング JS | ~3.5 MB modulepreload 並列 | **2.9 MB 単一 bundle** ← 主犯 | **48 KB のみ** |
| Map ライブラリ chunk 分離 | ✓ 別 chunk | ✗ 全部 bundle | ✓ 別 chunk (lazy) |
| `<link rel="preconnect">` map tile | ✓ maps.worldmonitor.app | ✗ | ✓ tiles.openfreemap.org (今日追加) |
| `dns-prefetch` | ✓ protomaps.github.io | ✗ | ✓ TradingView (今日追加) |
| `modulepreload` hints (chunks 並列宣言) | ✓ 8 chunks | ✗ | ✗ (まだ) |
| Cache-Control: immutable + 1 年 | ✓ 全 assets | ✓ CF Pages default | ✓ 同 |
| **PWA manifest + service worker** | ✓ あり | ✗ | ✗ (まだ) |
| データ取得 (news / 指標) | ✓ 外部 API fetch | **✗ HTML inline 266 KB** | ✗ まだ inline |
| ld+json schema (SEO) | ✓ 3 block | ✗ | ✗ |
| Sentry エラー追跡 | ✓ 81 KB chunk | ✗ | ✗ |
| 多言語 (i18n chunk 分離) | ✓ 52 KB chunk | △ Astro i18n bundled | △ 同 |
| Strict CSP + hash inline scripts | ✓ | ✗ | ✗ |

## 解釈

### WIC が WM に **勝っている** 部分 (今日の修正後の **初回ページ表示**)
- WIC: 48 KB blocking + 2.9 MB lazy → **first paint ほぼ即座**
- WM: 3.5 MB modulepreload (並列だが eager) → all chunks 待ち
- ⇒ 初回訪問の体感は WIC のほうが速いはず

### WM が今も WIC に **勝っている** 部分
1. **再訪問 instant load**: service worker キャッシュ + immutable assets
2. **panels が独立 chunk**: 機能別 lazy load 容易
3. **HTML 常に小さい (34 KB)**: 外部 API で news/data fetch なので、 データ更新後の HTML はそのまま小さい
4. SEO で ld+json 構造化データ
5. Sentry でエラー監視

### 両者の **共通の限界**
- 機能盛り盛り dashboard は **構造的に heavy**。 完全な軽量化は不可能。
- 3D globe + map vector tiles + ライブ widget = どうしても MB 級の payload
- 「もっさり」 感覚は user honest, それを否定しない

## WIC を更に軽くする打ち手 (no-rush 推奨順)

| 優先 | 改善 | 期待効果 | 工数 |
|---|---|---|---|
| **A** | inline JSON 266 KB を external file 化 (country-detail / news / indicator-data を `/data/*.json` に出す) | HTML 599 KB → ~330 KB, parallel fetch + cache 効率 ◎ | 中 (~30 分) |
| B | PWA manifest + service worker (workbox 不要、 ハンドコード可) | 再訪問が near-instant | 中 (~30 分) |
| C | DashboardHome.astro を panels (cockpit / globe / news) 別 island に分割 | route 別 lazy load 可 | 大 (~1-2 h) |
| D | TradingView widget を IntersectionObserver 化 | 初期から見えない位置に置けば deferred | 小 (~10 分) |

藤本さん試して残るもっさり感に応じて A → B → C の順で。

## 用語整理 (将来の Rei Claude / 藤本さん用)
- **modulepreload**: `<link rel="modulepreload">` で JS chunk を HTML parse 中に並列 fetch 開始 + parse もしておく hint。 単なる preload より強い (実行準備まで).
- **dynamic import**: `await import('foo')` 構文。 Vite/Webpack が **別 chunk** として emit する。 静的 import との違いはまさにここ.
- **IntersectionObserver**: DOM 要素が viewport 内に入った/近づいたタイミングを取得する API。 lazy init の trigger に最適.
- **Immutable cache**: `Cache-Control: public, max-age=31536000, immutable`. Hash-stamped asset 名 (例: `main-CyfhvVrg.js`) と組合せて 1 年安全に disk cache。 CF Pages は default で有効.

## 関連
- [[project-wic-perf-map-bundle-split-2026-05-29]] (今日の修正 — Priority 1 + 4 完了)
- [[project-wic-buildout-session-2026-05-25]] (γ OpenFreeMap 切替 + 「World Monitor 詳細分析: heavy runtime (1.5-3 MB JS + tiles) vs WIC light static ¥0 sustainable」 — 当時の概算が今回 honest 計測で 3.5 MB と確定)
- [[feedback-wwd-strategic-moats-against-bigtech]] (大手と並ぶことが目的でなく、 大手が絶対やらない部分で differentiate)
- World Monitor 著者: Elie Habib (HTML meta より) / 多言語 22 言語対応 / Vercel 系 deploy 推定 / Sentry 採用 / Cloudflare Insights 採用
- 計測日: 2026-05-29 (世の中の最適化トレンドは時間で変わる、 半年後再計測推奨)