← SOTIA Topに戻る

PageSpeed Clinic Demo

日本のクリニックサイトを題材にした
改善前後の比較デモ

日本のクリニックサイトを題材に、同じ見た目と情報量を保ちながら 実装だけを見直した比較デモです。 改善後では、LCP 画像の最適化、critical CSS の inline、WebP 配信、 画面外画像の後読み、Google マップと計測タグの後ろ倒しを入れています。

改善前ページを見る 改善後ページを見る
このデモで見せるポイント
  • 改善前では、遅延差し込みによる CLS、重い PNG 配信、外部ライブラリ群、初回ロードの地図読み込みを残しています。
  • 改善後では、ヒーロー画像の発見経路、CSS の読み込み方、画像サイズ配信、画面外リソースの読み込み順を整理しています。
  • 下の比較枠には、実際に取得した PSI モバイル結果の画像と共有リンクを掲載しています。
改善前 Mobile PSI Mobile 44
改善後 Mobile PSI Mobile 100
改善前 Desktop PSI Desktop 68
改善後 Desktop PSI Desktop 100

PSI比較用の掲載枠

PSI の共有リンクは長期保存向きではないため、このページには実際のモバイル結果画像も置いています。下のリンクからレポートと実ページをそのまま開けます。

このデモで入れている差分

改善前と改善後は、クリニックの見せ方を揃えたまま、主に実装レイヤーを変えています。

改善前

改善前で見られる課題

  • 読み込み後にお知らせバーを差し込んで、ファーストビューでレイアウトシフトを発生させる。
  • ロゴ、ヒーロー、プロフィール、院内画像、集合写真を重い PNG のまま配信する。
  • スライダーや外部ライブラリ群を同時に読み込み、初回の依存を増やす。
  • hidden な重い画像群や予約ウィジェット風の処理を初回ロード後に走らせる。
  • Google マップ iframe を eager 読み込みし、初回表示で外部リクエストを抱える。
改善後

整理している内容

  • ヒーロー画像に `preload`、`srcset`、`sizes`、`loading="eager"`、`fetchpriority="high"` を付けて LCP を最適化する。
  • critical CSS を `head` に inline し、残りの CSS は非同期で後読みする。
  • 画像を WebP 化し、表示幅に応じた `srcset` と `sizes` に切り替える。
  • feature / service / gallery / staff の画像は placeholder だけを先に置き、`IntersectionObserver` で近づいた時だけ読み込む。
  • Google マップは `loading="lazy"`、計測タグは初回操作か遅いタイマーで後ろに回す。

改善後で主に変えた実装

スコア差の中心になっているのは、主に次の4点です。

LCP 画像の最適化

ヒーロー画像を `img` ベースに寄せ、`preload`、`srcset`、`sizes`、`fetchpriority="high"` をまとめて設定しています。

critical CSS

ヘッダーとヒーロー周辺の CSS を先に inline し、残りは非同期で読み込む形にして render-blocking を減らしています。

画像配信の整理

PNG を WebP に置き換えるだけでなく、ロゴ、プロフィール、院内画像、集合写真も表示幅に応じて出し分けています。

画面外リソースの後読み

画面外画像は遅延 hydrate、Google マップは lazy-load、計測タグは後ろ倒しにして、初回読込を軽くしています。