概要

ウェブサイトの「速さ」はLighthouseのスコアだけで決まるものではありません。通信環境やデバイスの制約を超え、フロントエンドの工夫ひとつで「体感速度」は向上させられます

本トークでは、ユーザーの待ち時間をゼロに感じさせるための実装戦略を、「操作前・中・後」という3つのフェーズに分けて紹介します

1. [操作前]先読み：Next.jsやTanStack Queryを用いた、クリック前の予測実行。実験的なWeb APIであるSpeculative Rules APIについて
2. [操作中]段階的表示：初期表示の高速化と、その際に課題となりやすいN+1問題に対するDataLoaderを用いた対策
3. [操作後]楽観的更新：useOptimisticやTanStack DBを活用した、通信待ちを感じさせない書き込み処理

それぞれがどのようなもので具体的にどのように実装すれば良いかついて話します

持ち帰れるもの

• 3つのフェーズ（操作前・中・後）における、体感速度改善を実現する実装イメージ
• 実装コストとUXの向上を天秤にかけるための、状況に応じた高速化手法の選定基準