Lighthouse が示す光とは？

• ユーザー体験の向上
  　高スコアのサイトは高速でアクセスしやすく、構造が整っているため、ユーザーの離脱率が低下し、エンゲージメントが高まります。
• 検索順位の向上
  　 Lighthouse は Core Web Vitals も評価対象としており、これらは Google の検索順位に直接影響します。スコアが高いほど検索で上位に表示されやすくなります。
• コンバージョンとリテンションの向上
  　信頼性が高く速いサイトはコンバージョン率を上げ、売上やリードの増加、ユーザー満足度の向上に繋がります。
• 信頼性とブランドイメージの向上
  　モダンな Web 開発のベストプラクティスを満たしているサイトは、より信頼できる・プロフェッショナルな印象を与えます。
• 開発上の指針となる
  　 Lighthouse は単に問題を指摘するだけでなく、改善に役立つ具体的な提案を提示してくれます。

PageSpeed Insights との違いとは？

スコアが低くなる典型的な原因

• 巨大な JavaScript バンドル：最初の描画や操作開始を遅らせる非最適化スクリプト。
• 未使用コードの多さ：ユーザー体験に貢献しないコードが配信バンドルに含まれている。
• レンダリングブロックリソース：CSS や JavaScript の読み込みがページ表示を妨げる。
• 非圧縮画像：高解像度かつ圧縮されていない画像がページを重くする。
• サーバーの応答遅延：バックエンドやホスティングのレイテンシー。
• アクセシビリティ属性の不足：障害を持つユーザーにとって使いづらい UI。
• SEO 構造の非効率性：メタデータの欠如、見出し階層の不整合、URL の最適化不足。
• レイアウトシフト：読み込み中に要素が予期せず移動し、UX に悪影響を与える。

Scriptide が直面した課題と取り組み

古くなった依存ライブラリ

コードとリソースの最適化

1. サードパーティコードの肥大化
2. 不要なコードの配信
3. リソースの読み込みと利用の非効率性

• webpack-bundle-analyzer や Statoscope を使用して未使用コードを特定・削除 ✅
• スクロール時など、必要なタイミングでのみサードパーティスクリプトを遅延読み込み ✅
• Next.js の画像最適化機能を活用し、レスポンシブかつ圧縮済み画像を配信 ✅

レンダリングブロックの回避

Web 構造のセマンティクス見直し

• 見出しの階層構造：h1→h2→h3...という順番は論理的な意味を持ち、DOM 構造上でも守られるべきです。
• コントラストのある配色：視覚に障害のある方にも明確な意味が伝わるよう、適切なコントラスト比を保つことは不可欠です。

レイアウトシフト対策

• すべてのメディア要素に固定サイズを指定 ✅
• フォントをプリロードして未スタイル描画（FOIT）を防止 ✅
• CSS で動的コンポーネントのスペースを確保 ✅

灯台は進むべき道を示す

• パフォーマンス：デスクトップで 56〜60 点、モバイルで 40〜44 点だったスコアが、最終的にはデスクトップで 90〜91 点、モバイルで 87〜91 点に到達（デザインは一切変更なし）。Google PageSpeed Insights でご確認いただけます。
• アクセシビリティ：96 点から 100 点に到達。
• ベストプラクティス：75 点から 96 点に改善。
• SEO：元々 100 点を維持。