開発記録 #4：パフォーマンス 100 点への道
GoldFeather 開発記録 #4：パフォーマンス 100 点への道 — 画像最適化と SEO の徹底強化
こんにちは、GoldFeather 開発チームです。
前回の開発記録では、AI と人間が共創するためのアーキテクチャについてお話ししました。今回は、ユーザー体験に直結する「スピード」と「見つけやすさ」、つまりパフォーマンス最適化と SEO 強化の舞台裏を詳しくお届けします。
結論から申し上げますと、今回の改善により PageSpeed Insights のパフォーマンススコアは 76点から100点（満点） に、SEO スコアも 92点から100点 へと進化しました。
改善前：LCP（最大のコンテンツ描画）が 7.1秒と赤信号の状態でした。
改善後：すべての項目がグリーンになり、LCP は 1.6秒まで劇的に短縮されました。
なぜ改善が必要だったのか？
GoldFeather は Astro 5 系と React を組み合わせたモダンな構成ですが、以下の課題を抱えていました。
- 画像の重さ: CMS から配信されるリモート画像が最適化されず、そのまま表示されていたため。
- LCP の遅延: 記事のメインビジュアル（Largest Contentful Paint）の読み込みに時間がかかり、ユーザーを待たせていました。
- SEO 資産の不足: サイトマップ（sitemap.xml）や robots.txt が未整備で、検索エンジンが効率的にクロールできない状態でした。
実装した 4 つのコア技術
これらの課題を解決するために、私たちは以下の技術的アプローチをとりました。
1. アップロード時の画像圧縮とサムネイル作成
画像をアップロードする際に、サイズを１MB以内に圧縮し、同時に一覧表示用のサムネイルを作成します。記事に複数画像がある場合は最初に登場する画像を使うようにします。
2. CLS（レイアウトシフト）の根絶
画像が表示される際にページがガタつく「レイアウトシフト」は、ユーザーにストレスを与えます。私たちは、すべての画像コンポーネントでアスペクト比を固定し、width と height を明示。これにより CLS スコアを低く抑え、安定した閲覧体験を実現しました。
3. SEO 統合管理
@astrojs/sitemap を導入し、ビルド時に自動でサイトマップを生成する仕組みを構築。同時に robots.txt を整備し、検索エンジンに正しくサイト構造を伝えるようにしました。
また、管理画面（/admin/）などの不要なページはサイトマップのフィルタリング機能で除外するなど、ノイズの少ない SEO 対策を行っています。
4. 構造化データの最適化
JSON-LD を用いた Article スキーマを生成する際にも、最適化済みの画像 URL を使用するようにしました。これにより、Google の検索結果（リッチリザルト）や SNS でシェアされた際の表示品質も向上しています。
改善の結果：数字で見る進化
| 指標 | 改善前 | 改善後 | 評価 |
|---|---|---|---|
| パフォーマンススコア | 76 | 100 | 🎉 満点 |
| LCP (Largest Contentful Paint) | 7.1s | 1.6s | ⚡ 5.5秒短縮 |
| Speed Index | 2.5s | 1.0s | 🚀 爆速 |
| SEO スコア | 92 | 100 | 🔍 完璧 |
特に LCP が 7.1秒から1.6秒へと 77% も短縮 されたことは、モバイルユーザーの離脱率低下に大きく貢献するはずです。
今後の展望
今回の最適化はあくまで第一歩です。今後は：
- さらなる画像圧縮: Cloudflare Image Resizing の検討
- 動的コンテンツのサイトマップ連携: SSR ページの詳細なクロール最適化
- Web Vitals の継続的なモニタリング
を継続し、常に最高のパフォーマンスを提供し続けます。
「速さは正義」です。GoldFeather は、AI が生み出す豊かなコンテンツを、ストレスのない最高の体験で届けることを約束します。
GoldFeather 開発チーム一同
