「うちのサイト、なんだか表示が遅い気がする……」
そう感じたとき、いきなりCDNの導入やサーバーの高スペック化といった難解なインフラに飛びつく必要はありません。実はWebサイトが重くなる原因の8割以上は、「画像・フォント・JavaScript」というフロントエンドの基本的な足元に潜んでいます。
今回は、Google公式の無料速度計測ツールの使い方から、費用ゼロですぐに体感速度を劇的に引き上げる3大見直しポイントまでを詳しく解説します。
1. まずは現状把握！ Google公式「PageSpeed Insights」で計測する
勘や感覚で「速い/遅い」を議論してもキリがありません。まずはGoogleが無料で提供している公式の速度診断ツールPageSpeed Insights（ページスピード・インサイト）を使って、客観的なスコアとボトルネックを可視化しましょう。こちら、メッチャ使いますので、利用したことない方はまずは一度チェックをお勧めします！
🛠️ PageSpeed Insights の使い方
- PageSpeed Insights（https://pagespeed.web.dev/）にアクセスする
- 調べたいWebページのURLを入力して「分析」ボタンを押す（数十秒で解析完了）
- 「携帯電話（モバイル）」と「デスクトップ」それぞれのパフォーマンススコア（0〜100点）と、改善できる項目が一覧で表示される
診断結果の下部に並ぶ「改善できる項目」には、「次世代フォーマットでの画像の配信」「レンダリングを妨げるリソースの除外」など、何を直せば何秒縮まるかが具体的に教えてもらえるので、これを上から順に潰していくのが最短ルートです。
2. 最大の重量犯！ 画像の最適化（これだけで半分解決）
サイトが重い原因の第1位は、圧倒的に「画像のファイルサイズがデカすぎる問題」です。スマホで撮影した数MBの写真をそのままアップロードしていたりすると、それだけでモバイル通信が悲鳴を上げます。
- WebP / AVIF 形式への変換：従来のJPEGやPNGをモダンな
WebPやAVIFに変換するだけで、画質を保ったまま容量を30%〜70%削減できます。 - 表示サイズに合わせたリサイズ：画面上で300pxでしか表示しない画像を、元サイズの幅4000pxのまま配信しないこと。
- 遅延読み込み（
loading="lazy"）：画面外にある画像は、スクロールして近づくまで読み込ませない。 widthとheightを明記する：画像の縦横サイズをHTMLに書いておかないと、画像が読み込まれた瞬間に画面がガクッとズレる「レイアウトシフト（CLS）」が発生します。
🛠️ おすすめ画像圧縮ツール：Squoosh（Google公式）
画像の圧縮やWebP/AVIF形式への変換には、GoogleのChrome開発チーム（Chrome Labs）が手掛ける公式の無料WebアプリSquoosh（スクーシュ：https://squoosh.app/）が断トツで使いやすくておすすめです。
画像をドラッグ＆ドロップするだけで、左右のスライダーを動かして「画質が劣化していないか」を目視確認しながら極限までファイルサイズを削れます。サーバーへ画像をアップロードせず、手元のブラウザ内（WebAssembly）で安全・高速に完結するのも大きな魅力です。
3. Webフォントの遅延とガタつきを防ぐ
Google FontsなどのWebフォントは美しいデザインを作る必須アイテムですが、特に日本語フォントは文字数が数千字もあるため、ファイルサイズが数MBに達することがあります。
フォントの読み込み中に文字が真っ白になって消える現象（FOIT）を防ぐには、CSSの @font-face に font-display: swap; を指定するのが基本です。
/* フォント読み込み中も代替システムフォントで即座に文字を表示する */
@font-face {
font-family: 'MyFont';
src: url('/fonts/my-font.woff2') format('woff2');
font-display: swap; /* ← これが超重要 */
}また、すべての漢字を読み込まず、サイトで実際に使う文字だけを抽出する「サブセット化」を行うと、フォント容量を1/10以下に圧縮できます。
⚠️ 自前サーバーにGoogleフォントを置いて大爆死した話
「外部CDNへの通信を減らせばもっと速くなるはず！」と思い立ち、Google Fontsの日本語フォント（Noto Sans JPなど）のファイルを丸ごと自前サーバーにダウンロードして配置したことがあります。結果はどうなったかというと……尋常じゃないくらい表示が遅くなった記憶があります。😿
実はGoogleのCDNは、数MBもある巨大な日本語フォントを数十個の小さな断片（unicode-range）に自動分割し、ページで使われている文字だけを瞬時に送り届けるという神業のような配信最適化を行っています。それを知らずに自前サーバーから無加工の巨大フォントを丸ごと落とさせようとしたため、通信帯域が詰まって大渋滞を起こしたのでした。適切なサブセット化を行わない限り、素直にGoogleの公式CDNに任せるのが圧倒的に高速で安全です。
4. JavaScriptの遅延読み込み（defer / async）
HTMLの <head> 内に <script src="..."> をそのまま置くと、ブラウザはそのスクリプトのダウンロードと実行が終わるまで、HTMLの描画を完全にストップ（レンダリングブロック）してしまいます。
画面の初期描画に不要なスクリプトには、必ず defer 属性を付けてHTMLの解析を邪魔しないようにしましょう。
<!-- HTMLの解析を止めずにバックグラウンドで読み込む -->
<script src="analytics.js" defer></script>| 最適化項目 | 具体的な対策 | 改善効果 | 作業難易度 |
|---|---|---|---|
| 画像（容量削減） | WebP変換・リサイズ | ★★★★★（通信量激減） | ★☆☆（画像変換ツールのみ） |
| 画像（CLS防止） | loading="lazy"、幅高明記 | ★★★★☆（体感安定性向上） | ★☆☆（HTML属性追記） |
| Webフォント | font-display: swap;、サブセット化 | ★★★★☆（表示遅延・白飛び解消） | ★★☆（CSS指定・フォント加工） |
| JavaScript | defer 属性付与・不要ライブラリ削除 | ★★★★☆（初期描画ブロック解除） | ★☆☆（属性追記） |
結論：100点満点を目指すゲームではない
PageSpeed Insightsを開くと、つい「スコアを100点にしなきゃ！」と意気込んでしまいがちですが、大切なのは数字のゲームで満点を取ることではなく、「訪れた人がストレスなくサクサク道具を使えること」です。
まずは画像のリサイズや font-display、defer といった「基本の3大対策」を丁寧に施す。それだけで、ほとんどのサイトは十分すぎるほど軽快に生まれ変わります。