【要約】From latency to instant: Modernizing GitHub Issues navigation performance [GitHub_Blog] | Summary by TechDistill
> Source: GitHub_Blog
Execute Primary Source
// Problem
GitHubのエンジニアチームは、ナビゲーションの遅延が開発者の集中力を削いでいる問題に直面した。
- ・Issueの遷移時に、冗長なデータ取得による待ち時間が発生している。
- ・RailsからReactへの移行期であり、ハードナビゲーションが頻発している。
- ・サーバーサイドの処理やネットワーク取得が、UXのボトルネックとなっていた。
// Approach
GitHubのチームは、クライアントサイドへの処理移譲と体感レイテンシの最適化に取り組んだ。
- ・IndexedDBを用いたクライアントサイドキャッシュとSWRモデルを構築した。
- ・Preheating戦略により、低優先度でキャッシュを事前に準備した。
- ・Service Workerを用いて、ハードナビゲーション時にキャッシュを利用した。
- ・React.lazyを活用し、必要なコードのみを動的にロードした。
// Result
GitHubは、一連の施策によってIssuesのナビゲーション速度を大幅に改善した。
- ・HPC（主要コンテンツ表示）のP10が600msから70msへ改善した。
- ・P50（中央値）が1,200msから700msへ低下した。
- ・ReactナビゲーションのInstant（<200ms）が最大70%に達した。
Senior Engineer Insight
> 本件は、データの鮮度と体感速度のトレードオフを、技術的に制御した優れた事例である。SWRとPreheatingの組み合わせは、大規模WebアプリのUX向上に極めて有効だ。特にService Workerによる介入は、RailsとReactの混在環境において、レガシーな経路の遅延を隠蔽する強力な武器となる。ただし、キャッシュの不整合やJS実行コストへの課題転嫁など、新たなボトルネックへの継続的な投資が不可欠である。