こんにちは、ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、IT/Webエンジニアの転職・求人サイト Findyのメッセージ画面の改善についてご紹介します。
メッセージ画面の課題
Findyのメッセージ画面は数年前にデザインを刷新しました。
現在では、3種類のメッセージを表示するようになっています。
- 通常のマッチングのメッセージ
- プレミアムスカウトのメッセージ
- Findyからのメッセージ
機能拡充される一方で「読み込みが多い」「画面遷移がサクサク動くようにして欲しい」との声をいただく機会が増えていきました。
実際に触ってみると確かに読み込み画面が頻繁に表示され、画面遷移に時間がかかっていることがわかりました。
メッセージ画面の改善
Apollo Clientキャッシュの利用
最初に取り組んだのはキャッシュの利用です。
Findyのフロントエンドには既にApollo Clientが組み込まれていたので、データ取得の際に fetchPolicy: 'cache-and-network' を指定して体感速度の向上を狙いました。
この改修により、ページ切替時の読み込み時間（ローカル環境）は約1,200ms→約900msと高速化されました。
読み込み画面の条件修正
当時の実装では、キャッシュの有無に関係なく読み込み画面を表示するようになっていました。
新しい実装では、読み込み中かつキャッシュが無い場合のみに修正しています。
const { data, loading } = useQuery(..., { fetchPolicy: 'cache-and-network' }); <Loading isLoading={loading && !data} />
この改修では、ページ切替時の読み込み時間への直接的な影響はありませんが、体感時間は最大で300ms（読み込み画面のアニメーションの再生時間）ほど削減されていると思われます。
ページ設計の最適化
当時の実装では、前述した3種類のページを個別のファイルで実装し、内部にメッセージの一覧と詳細コンポーネントを持つという構成でした。
このため、ページ遷移の度に一覧と詳細コンポーネントの両方が再描画され、体感速度に課題を残していました。
解決にはページ設計の見直しが必要ですが、LayoutsはFindyのフロントエンドがまだApp Routerに移行できていないため利用できず、getLayoutパターンも画面全体の再描画を防ぐことが難しいため見送りとなりました。
手詰まりかと思われましたが、他のページで採用されたCatch-all Segmentsの実装を参考に、Optional Catch-all Segmentsを使った実装が今回の要件に合致することがわかったため採用することにしました。
新しい実装では、[[...keys]]/index.page.tsx に3種類のページ実装が集約され、ページ遷移の際はメッセージ詳細コンポーネントのみが差し代わるようになっています。
この改修により、メッセージ一覧の不要な読み込みが削減されたため、ページ切替時の読み込み時間（ローカル環境）はメッセージ詳細のキャッシュが無い場合でも約500ms、キャッシュがある場合は読み込み時間をほとんど感じさせないほど大幅に高速化されました。
まとめ
キャッシュの活用やページ設計の見直しにより、メッセージ画面のパフォーマンスを向上させることに成功しました。
改善できて嬉しい一方、Optional Catch-all Segments自体はPages Routerの基本的な機能でもあるので「よく調べてから実装していれば...」と反省する点もあります。
ドキュメントはちゃんと読みましょう（自戒）😇
メッセージ画面以外についてもパフォーマンス改善を進めて参りますので、今後もよろしくお願いします。
今回は採用を見送りましたが、App Router移行やReact 19の新機能を活用して更に快適に動作するフロントエンドが実現できればと考えております。
ご興味のある方・挑戦してみたい方はぜひ↓のリンクからご応募ください。私達と一緒にFindyをより良いサービスにしませんか？
ファインディは積極的にエンジニアを採用しています。CI/CD を始め、Four Keys、開発生産性、技術トレンド、転職市場など興味のある方は、お気軽にカジュアル面談を受けてみてください。
ファインディの採用情報はこちら ↓
