以前は普通に表示されていたサイトが、なんだか重く感じる。最初の画面が出るまで数秒かかり、クリックしても反応が遅い。

「急に」というのは、最近何かが変わったということです。たいていは大きな画像を追加した、データが溜まった、無料プランのプロジェクトがスリープした、サードパーティのスクリプトを追加した、といったあたり。以下、原因ごとのチェックリストです。

> 万能な解決策は一つもありません。 理由はサイトごとに違います。このガイドは犯人を絞り込むためのものです。まず計測（Step 0）してから、当てはまる原因だけを直してください。

Step 0. 30秒で診断 — どこが遅いかを見つける

推測する前に、まず計測。

  1. https://pagespeed.web.dev/ を開き、サイトのURLを貼り付けて Analyze をクリック。
  2. LCP（Largest Contentful Paint）を見ます。2.5秒以下なら良好、4.0秒超えは要改善（web.dev の基準）。
  3. Opportunities / Diagnostics のリストに具体的な問題名が並びます — "properly size images"、"reduce unused JavaScript" など。これが容疑者です。

Chrome を使っていますか？ F12 → Lighthouse タブ → Analyze page load で同じレポートが得られます。インストール不要です。

原因1. 画像が大きすぎる（いちばん多い）

スマホで撮った4MBの写真をそのままアップすると、その一枚だけでページ全体が重くなります。Step 0 で画像が指摘されたら、まずここから。

Next.js のサイトなら、<img> を next/image の Image に置き換えるだけで、サイズ・画質・フォーマット（WebP/AVIF）が自動で最適化されます。画面外の画像はデフォルトで遅延読み込みされ、width/height を指定すると場所が確保されてレイアウトのガタつきを防げます。

jsx

import Image from 'next/image'

<Image src="/hero.png" width={1200} height={630} alt="Hero image" priority />
  • いちばん上のヒーロー画像1枚だけに priority を付けて最初に読み込ませます（Next.js 16 では preload に名称変更）。
  • それ以外の画像は、オプション不要で自動的に遅延読み込みされます。

AIコーディングツール（Cursor, Lovable, v0）を使っていますか？ こう指示してみてください — 「すべての <img> タグを next/image の Image コンポーネントに置き換えて、いちばん上のヒーロー画像にだけ priority を付けて。」

Next.js ではない？ 考え方は同じです。アップロード前に画像を圧縮し（例：squoosh.app）、WebP に変換しましょう。

原因2. データが溜まって、DBがテーブル全体をスキャンしている

最初は速かったのに、投稿・ユーザー・注文が数千件に増えてから遅くなった場合、あやしいのはインデックスのないクエリです。インデックスがないと、データベースはリクエストのたびにテーブルを上から下まで読みます（フルスキャン）。

Supabase（Postgres）での対処:

  1. Supabase ダッシュボード → Advisors → Query Performance（または Reports → Query Performance）で、遅いクエリと、その絞り込みに使われている列を確認します。
  2. よく絞り込みや並べ替えに使う列にインデックスを追加します。SQL Editor で:
sql

create index idx_posts_user_id on posts (user_id);
  1. 本番でテーブルがすでに大きい場合は、concurrently を付けて書き込みのロックを避けます:
sql

create index concurrently idx_posts_created_at on posts (created_at);

Supabase には、どのインデックスを追加すべきか提案してくれる Index Advisor もあります（Query Performance → クエリを選ぶ → Indexes タブ）。提案を読んだうえで、上の SQL を自分で実行してください。

原因3. 無料プランのプロジェクトがスリープした（最初のリクエストだけ遅い）

「しばらくぶりの最初の読み込みだけ遅くて、その後は普通」→ これはスリープ / コールドスタートのサインです。

  • Supabase の Free プランは、活動が少ない状態が約7日続くとプロジェクトを一時停止することがあります。一時停止されると、それを起こす最初のリクエストが遅くなったり失敗したりします。ダッシュボードからプロジェクトを Restore すれば復帰します。
  • サーバーレス関数（Vercel など）も、しばらく呼ばれていないとコールドスタートで遅くなります。

対処法: トラフィックの少ないサービスなら、定期的にアクセスして起こしておくか、実際にトラフィックがあるなら常時稼働の有料プランに移行します。「たまに最初のリクエストが遅い」のはバグではなく無料プランのスリープが正常な挙動だと知っておくだけで、無駄な原因探しをせずに済みます。

原因4. 重いスクリプトやサードパーティのウィジェットが描画をブロックしている

最近チャットウィジェット、広告、アナリティクス、Webフォント、YouTube 埋め込みなどを追加したなら、それが最初の描画をブロックしているかもしれません。web.dev は、同期スクリプトや <head> 内のレンダリングをブロックするCSSが描画を遅らせると指摘しています。

  • 必須でない外部スクリプトは async/defer で遅延させるか、ページの末尾で読み込みます。
  • PageSpeed の "Reduce the impact of third-party code" に挙がるスクリプトが有力な容疑者です。一つずつ外して、原因を特定しましょう。

それでも解決しない？

  • Step 0 の PageSpeed レポートの上位3件の指摘を、そのままAIコーディングツールに貼り付けて、直すよう頼んでみてください。Lighthouse の指摘は、そのまま指示書として使えるほど具体的です。
  • いつ遅くなったか、そのとき何を変えたかを思い出してみましょう — 直近のデプロイ/コミットを元に戻すのが、いちばん早い解決になることも多いです。

繰り返しますが、これは一行で終わる解決策ではなく、犯人を絞り込むためのチェックリストです。順番にたどって — 計測（Step 0）してから、当てはまる原因だけを直してください。