フロントエンドパフォーマンス
Core Web Vitals・コード分割・遅延読み込みなどフロントエンドのロード・レンダリング最適化手法
フロントエンドのパフォーマンスはユーザー体験とビジネス指標に直結する。Googleの研究によれば、ページロードが1秒遅くなるごとにコンバージョン率が数%低下するとされる。Core Web Vitals（CWV）はGoogleが定義したユーザー体験の品質指標であり、LCP（Largest Contentful Paint：最大コンテンツの描画速度）・INP（Interaction to Next Paint：操作から次の描画までの反応速度）・CLS（Cumulative Layout Shift：視覚的安定性）の3つで構成される。これらはGoogleの検索ランキングにも影響するため、パフォーマンス最適化はSEOの観点からも重要である。
バンドルサイズの削減はロードパフォーマンス改善の基本である。コード分割（Code Splitting）は、アプリケーション全体を一つのバンドルとして配信するのではなく、ルートやコンポーネント単位で動的インポート（import()）を使って必要なコードのみを遅延ロードする技術である。Webpack Bundle AnalyzerやVite Visualizerでバンドルの内訳を可視化し、予期せず大きな依存ライブラリが含まれていないかを定期的に確認することが重要である。
レンダリング戦略の選択もパフォーマンスに大きく影響する。SSG（Static Site Generation）は最速のロードを提供するが動的コンテンツに対応できない。SSR（Server-Side Rendering）は初期表示を速くしながら動的なデータに対応できるが、サーバーのレスポンスタイムがボトルネックになる。ISR（Incremental Static Regeneration）はSSGとSSRの中間のアプローチで、一定期間ごとに静的ページを再生成する。CSR（Client-Side Rendering）は初期ロードが遅いが、以降のインタラクションは高速になる。
コードレビューで着目するポイント
- 画像が
width・height属性を持ち、読み込み前にスペースが確保されているか（CLS防止） - Largest Contentful Paint の対象要素（ヒーロー画像等）に
fetchpriority="high"または preload が設定されているか - 動的インポートによるコード分割がルートレベルで実装されているか
- 画像が WebP・AVIF 等の次世代フォーマットで配信されているか、または next/image 等の最適化コンポーネントを通じて配信されているか
- 重いライブラリ（Moment.js・Lodash等）が必要最低限のものに置き換えられているか
useEffectの過剰利用による不要な再レンダリングや副作用の連鎖が起きていないか- フォントの読み込みに
display: swapが設定されており、テキストのレンダリングがブロックされていないか
典型的なアンチパターン
全コードをメインバンドルに含める: ルーティングのないシングルページアプリで全コンポーネントを一括インポートすると、初回ロード時に使われないコードまでダウンロードさせることになる。ルートレベルの動的インポートで初期バンドルを最小限に抑えるべきである。
サイズ未指定の画像: <img src="photo.jpg"> のように width・height を指定しない画像は、読み込み前後でレイアウトがずれる（Layout Shift）原因になりCLSスコアを悪化させる。必ずアスペクト比を維持できるサイズ指定または CSS の aspect-ratio プロパティを設定する。
重い依存ライブラリの無検討採用: moment.js（300KB超）を日付フォーマットだけのために採用するケースのように、機能に対してバンドルサイズが過大なライブラリを選ぶと、Core Web Vitalsに大きな悪影響を与える。date-fns（必要な関数のみインポート可）や Temporal API（ネイティブ対応が進行中）を検討すべきである。
参考リソース
- ツール: PageSpeed Insights - Core Web Vitals の計測と改善提案ツール
- ツール: Webpack Bundle Analyzer / Vite Bundle Visualizer - バンドルサイズの内訳可視化ツール
- 標準: Core Web Vitals - GoogleによるCWVの定義と計測方法の公式ドキュメント
- ツール: Lighthouse - パフォーマンス・アクセシビリティ・SEOの自動計測ツール
- 書籍: 「High Performance Web Sites」（Steve Souders） - Webパフォーマンス最適化の古典的参考書
- 1. 📄アーキテクチャスタイル
- 2. 📄ドメインモデリング
- 3. 📄モジュール分割と依存管理
- 4. 📄データモデリング
- 5. 📄API設計
- 6. 📄整合性とトランザクション
- 7. 📄非同期処理（Queue/Event）
- 8. 📄キャッシング
- 9. 📄ユーザーリサーチ
- 10. 📄情報アーキテクチャ
- 11. 📄インタラクションデザイン
- 12. 📄UX原則とヒューリスティクス
- 13. 📄アクセシビリティ（UX観点）
- 14. 📄UXメトリクス
- 15. 📄スケーラビリティ
- 16. 📄可用性とレジリエンス
- 17. 📄オブザーバビリティ
- 18. 📄環境・インフラ設計
- 19. 📄データマイグレーション
- 20. 📄セキュリティ設計原則
- 21. 📄データ保護とマルチテナント
- 22. 📄LLMセキュリティ
- 23. 📄ビジュアルデザイン原則
- 24. 📄デザインシステム
- 25. 📄コンポーネント設計
- 26. 📄スタイリング
- 27. 📄状態管理
- 28. 📄フロントエンドパフォーマンス
- 29. 📄アクセシビリティ（実装観点）
- 30. 📄アニメーションとインタラクション
- 31. 📄設計原則
- 32. 📄デザインパターン（GoF）
- 33. 📄エンタープライズパターン
- 34. 📄クリーンコード
- 35. 📄リファクタリング
- 36. 📄型設計とコントラクト
- 37. 📄関数型プログラミング概念
- 38. 📄エラーハンドリング
- 39. 📄テスト戦略と哲学
- 40. 📄テスト種別（機能テスト）
- 41. 📄テスト種別（UI・ビジュアル）
- 42. 📄テスト種別（契約・境界）
- 43. 📄テスト種別（非機能テスト）
- 44. 📄テストダブル
- 45. 📄テスト設計技法
- 46. 📄並行処理・マルチスレッド
- 47. 📄パフォーマンス最適化
- 48. 📄ドキュメント管理
- 49. 📄バージョン管理と開発プロセス
- 50. 📄脅威モデリング
- 51. 📄通信保護（TLS）
- 52. 📄暗号化・機密情報管理
- 53. 📄認証・セッション管理
- 54. 📄認可・アクセス制御
- 55. 📄入力バリデーション
- 56. 📄インジェクション攻撃
- 57. 📄出力エンコーディング
- 58. 📄エラーハンドリング（セキュリティ観点）
- 59. 📄SSRF（サーバーサイドリクエストフォージェリ）
- 60. 📄依存関係管理
- 61. 📄設計・実装 参考書籍
- 62. 📄セキュリティ参考資料
- 63. 📄正規化（データベース正規化）