AIで作ったサイトが重い時の改善手順｜画像→動き→フォントの順に直す

結論: 点数を気にするより先に、重いものから順に直してください。

• まず PageSpeed Insights にURLを入れて、モバイルの LCP と「インサイト」の項目名だけ確かめる
• 直す順は 画像 → アニメーション → フォント。いちばん効くのは画像
• 直したら同じURLを5回ほど測り直し、中央値で比べる。長い目で見るなら Search Console の28日間の検証を使う

AIでLPを作った。プレビューでは普通に動いていた。

なのに公開してスマホで開くと、ファーストビュー（最初に見える範囲）がなかなか出てこない。PageSpeed Insights（以下PSI）にかけたら、赤い数字が並んだ。

ここで最初にやるべきなのは、コードの書き直しではありません。重いものを順番に軽くしていくことです。Googleの公式ドキュメントを読んで、その順番を整理しました。

この記事の目次

1. PageSpeed Insightsはどこを見ればいい？見るのは3か所だけ
2. なぜ画像から直すのか？ページの重さの内訳で分かる
3. 画像を軽くするには？WebP化・遅延読み込み・サイズ指定の3つ
4. アニメーションは消さずに軽くできる？動かすプロパティを替えればいい
5. 日本語のWebフォントが重いときは？書体を減らして表示方法を決める
6. 直したのに点数が変わらないのはなぜ？測り方を変えてみる
7. よくある質問
8. この記事のまとめ

PageSpeed Insightsはどこを見ればいい？見るのは3か所だけ

「実際のユーザーの環境」「LCP・CLS・TBT」「インサイト」の3か所だけ見れば十分です。残りは後回しにしてください。

①には、実際の訪問者から集めた過去28日分のデータが出ます。アクセスがまだ少ないサイトだと空のことがありますが、それで普通です。

空なら①は飛ばしましょう。②と③（1台の端末で読み込みを再現した計測）で原因を探します。

②の数値は、次の表と照らし合わせてください。

← 表は横にスクロールできます →

ネットの解説と項目名が違っても、焦る必要はありません。PSIは2025年10月20日にLighthouse 13へ切り替わりました。古い診断項目の多くは「インサイト」にまとめ直されましたが、採点のしかたは変わっていません。

なぜ画像から直すのか？ページの重さの内訳で分かる

ページの重さで一番大きいのが画像だからです。フォントの8倍ほどあります。

グラフの数字は、HTTP Archiveが公開しているWeb Almanac 2024の集計値です。

AIで作ったサイトなら、画像生成AIで出した画像が縮めないまま置かれていないか、最初に確かめておきたいところです。

JavaScriptも重い項目です。ただ、フレームワークの中身に手を入れるのはリスクが高い作業になります。個人的には、失敗しにくくて効果がすぐ見える画像から始めるのが一番割に合うと考えています。

画像を軽くするには？WebP化・遅延読み込み・サイズ指定の3つ

写真はWebPにして、表示サイズまで縮めます。遅延読み込みは、最初に見える1枚以外にだけ付けます。

まず、ヒーロー画像（ページ最上部の大きな画像）に loading="lazy" が付いていないか見てください。見落としやすいところです。

web.devも「LCP 画像を遅延読み込みしないでください。」とはっきり書いています。全部の画像に一律でlazyを付けると、かえって遅くなります。

形式は、画像の種類で選びます。

← 表は横にスクロールできます →

Googleの検証では、非可逆WebPは同じ画質のJPEGより25〜34%小さくなっています。ただし、どこまで軽くなるかは画像しだいです。

効き目が大きいのはGIFアニメです。web.devの例では、3.7MBのGIFがMP4にすると551KBになっています。

変換するなら、ブラウザだけで使えるSquooshが手軽です。画像は自分の端末の中で処理され、外部には送信されません。

AIツールで作ったサイトなら、次の指示をそのまま貼れば通じます。

ファーストビュー以外の<img>に loading="lazy" と width/height を付けて。
ヒーロー画像は lazy を外して fetchpriority="high" を付けて。
写真はWebPに変換し、表示サイズの2倍を超えないように縮めて。
GIFは <video autoplay loop muted playsinline> のMP4に置き換えて。

width と height を付けると、画像が届く前にブラウザが場所を取っておけます。読み込みの途中でレイアウトがずれる（CLSが悪くなる）のを防げます。

アニメーションは消さずに軽くできる？動かすプロパティを替えればいい

できます。動かすのを transform と opacity の2つに絞れば、見た目はほとんど変わりません。

top や left で要素を動かすと、ブラウザは毎回、位置を計算して描き直します。性能の低いスマホではカクつき、レイアウトのずれ（CLS）にも数えられます。

transform で動かせば、この描き直しは起きません。置き換えは次の表のとおりです。

← 表は横にスクロールできます →

PSIに non-composited-animations（合成されないアニメーション）が出ていたら、そこが直す場所です。この項目はLighthouse 13でもインサイトにまとめられず、単独の診断項目として残っています。

AIで作ったLPでは、全要素にフェードインやスライドインが付いていることもあります。地味に見落としがちなポイントです。

OSで「視覚効果を減らす」を選んでいる人もいます。prefers-reduced-motion（動きを減らす設定かどうかを判定するCSSの条件）で、動きを止める指示も一緒に出しておくと親切です。

top/left/width/heightで動かしているアニメーションを
transformとopacityだけに置き換えて。
@media (prefers-reduced-motion: reduce) のときは無効にして。
will-change は全体には付けないで。

日本語のWebフォントが重いときは？書体を減らして表示方法を決める

日本語フォントを使うこと自体は問題ありません。書体と太さを減らし、読み込み中の表示方法を指定してください。

← 表は横にスクロールできます →

swap は文字がすぐ出ます。その代わり、差し替わる瞬間に行の幅が変わり、レイアウトが少しずれることがあります。

迷ったら、見出しだけWebフォント＋swap、本文は system-ui（端末にもともと入っている文字）に分けるのが一番無理がないと考えています。本文のフォントを何もダウンロードしなくて済むからです。

Google Fontsを使っているなら、URLに &display=swap を付けるだけで表示方法を指定できます。ロゴのように使う文字が決まっている箇所は、text= で文字を絞るとファイルサイズを最大90%減らせる場合があります。

Google Fontsの日本語書体は1書体・2ウェイト（400と700）までに減らして。
URLに &display=swap を付けて。本文は font-family: system-ui に。
アイコンフォントを使っているならSVGアイコンに置き換えて。

自分のサーバーにフォントを置いても（セルフホスト）、速くなるとは限りません。web.devもそう書いています。

サブセット化（使う文字だけに削ること）やセルフホスティングをするなら、先にそのフォントのライセンスを確認してください。サブセット化とセルフホスティングが許可されているかどうかがポイントです。

直したのに点数が変わらないのはなぜ？測り方を変えてみる

PSIの点数は測るたびに動きます。1回で判断せず、5回ほど測って中央値を見てください。

点数がぶれる原因として、Chrome for Developersは通信経路の変化、ブラウザの拡張機能、ウイルス対策ソフトなどを挙げています。Lighthouseの公式ドキュメントは、平均ではなく中央値で見ることを勧めています。5回測った中央値は、1回だけの結果よりおよそ2倍安定するそうです。

• モバイルだけ点数が低い → PSIのモバイル計測は、そこそこの性能の端末と遅い回線を再現しているためです
• ①の実ユーザーのデータが変わらない → 28日分の集計なので、反映までに日数がかかります
• 効果を長い目で確かめたい → Search Consoleの「Core Web Vitals」レポートで、修正後に「トラッキングを開始」を押すと28日間の見守りが始まります

よくある質問

Q. PSIの点数は何点あれば合格ですか？

90以上が「良好」、50〜89が「改善が必要」、50未満が「不良」です。ただ、Google検索が見ているのは点数ではなく、実ユーザーのCore Web Vitalsです。点数は原因を探す目安として使ってください。

Q. 表示速度を上げれば検索順位は上がりますか？

Googleは、Core Web Vitalsをランキングで考慮する要素の一つだとしています。速さだけで順位が決まるわけではありません。

とはいえ、速さは売上にも響きます。web.devには、楽天24で訪問者あたりの収益が53.37%増えた事例が載っています。

Q. 古い記事にある「FID」は見なくていいですか？

見なくて大丈夫です。FIDは2024年3月12日にINPへ置き換わりました。今のPSIで反応の速さを表すのはINPです。

この記事のまとめ

• PSIで見るのは「実際のユーザーの環境」「LCP・CLS・TBT」「インサイト」の3か所
• 直す順番は画像 → アニメーション → フォント。一番重いのは画像
• ヒーロー画像には fetchpriority="high" を付ける。lazyはそれ以外の画像だけに付ける
• アニメーションは transform と opacity だけで動かす
• 日本語フォントは書体と太さを減らし、display=swap を付ける

今日やることは1つです。自分のサイトのURLをPSIに入れて、モバイルのLCPと、インサイトに出ている画像の項目を確かめてください。画像の項目が出ていたら、上の指示文をAIツールに貼るところから始めましょう。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。