ページの表示速度が遅い原因と改善方法｜画像・フォント・キャッシュの最適化まで徹底解説！

生徒

ペン博士！最近サイトの表示が遅いみたいです…。どうすれば改善できますか？

ペン博士

ページの速度が遅いと離脱率や直帰率が上がるんじゃ。特に「LCP」「INP」「CLS」の3つの指標は、ユーザーの体感に直結する重要な要素になるぞ！しっかり覚えていくんだぞ！

生徒

そうなんですね！ありがとうございます！

Webサイトの読み込みが遅くて「なかなか表示されない」「離脱率が高い」と感じたことはありませんか。
ページの表示速度は、ユーザーの満足度だけでなくSEO評価にも大きく関わる重要な要素です。
本記事では、速度が低下する原因の仕組みや、Google PageSpeed Insightsを使用した計測方法などを解説します。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

菅井さん
将来的への不安と子育てという背景から「副業」に挑戦しようと決意。独学からプログラミングの学習を開始していたが、WithCodeに出会い体験コースを受講。約4ヶ月の学習に取り組み、当初の目標であった卒業テスト合格を実現した。WithCode Platinumにて3件の案件を担当し、現在は副業だけでなく本格的に「フリーランス」として在宅で活躍していきたいと考えるようになる。

詳しくはこちらの記事をご覧ください。

あわせて読みたい

【子育てママさん必見】「在宅×副業」を達成！多方向で活躍中のママさんフリーランスにインタビュー！ ペン博士、ママさんなのに在宅で副業もこなしている方がいるって聞いたんですけど、本当ですか？だとしたらすごすぎます！ うむ、うちの受講生でな、まさに“時間も場所...

菅井さんの主な制作実績はこちら

広告用途での新規LP制作

株式会社YOURDELT 様

ページの表示速度が遅いと何が起きる？

ペン博士

ページの読み込みが遅いと、ユーザーは目的の情報にたどり着く前に離脱しやすくなる。
ここでは、表示速度がユーザー体験やSEO評価に与える影響を2つの視点から見ていこう。

ページの速度はSEO評価にも影響する

ユーザーは、求める情報にできるだけ早くアクセスしたいと考えています。
Googleは、ページの表示速度・操作のしやすさ・レイアウトの安定性といった体験品質（Core Web Vitals）を評価基準の一部として扱っています。
つまり、「速さ」だけではなく、「使いやすさ」や「見やすさ」を総合的に改善することが重要です。

結果的に、検索順位やユーザー満足度の向上につながります。
まずは、ファーストビューを素早く描画し、不要なスクリプトや重い処理を避けるなど、基本的な最適化を徹底しましょう。
Core Web Vitalsの計測方法や改善指標については、次の章で詳しく解説します。

ページ表示速度の遅さがコンバージョンに与える影響

コンバージョン率が下がると、購入や問い合わせの機会を逃してしまいます。
多くの場合、その背景には「ユーザー体験の悪化」があります。
ユーザーは、必要な情報をすぐに得られるスムーズな閲覧体験を求めているからです。

しかし、ページの読み込みが遅いと「待たされている」と感じやすくなります。
その結果、ユーザーは目的の情報にたどり着く前に離脱してしまいます。
こうした体験はサイト全体の印象を悪化させ、再訪率の低下を招く要因となるでしょう。
そのため、ページ速度の改善はSEO対策にとどまらず、ユーザー満足度や成果の向上にも直結します。

生徒

なるほど…！ページ速度が遅いと、ユーザーは途中で離脱してしまうんですね。Core Web Vitalsを意識すれば、体験もSEOも良くなりそうです！

ペン博士

その通りじゃ。表示速度の改善は、ユーザー満足度・SEO・収益性 のすべてに関わる大事な要素なんじゃ。ファーストビューを軽く、不要な処理を減らすことから始めるのがコツじゃぞ！

ページの表示速度の確認方法

ペン博士

ページの表示速度を改善するためには、まず現状を正確に把握することが大切じゃ。ここでは、代表的な分析ツールであるGoogle PageSpeed Insights（PSI）を使って、サイトのパフォーマンスを確認する方法を紹介するぞ。

Google PageSpeed Insightsでページ速度を確認する

PSIは、開発環境に依存しないラボデータ（Lighthouse）を利用して分析します。
それに加え、実際のユーザー行動に基づくフィールドデータ（Chrome User Experience Report）も組み合わせて評価します。
これにより、公開後のパフォーマンスを正確に把握し、改善前後の変化を比較できます。

Google PageSpeed Insightsの測定結果とスコアの見方

Google PageSpeed Insights の使い方はとても簡単です。
画面上部の入力欄に計測したいページURLを入力し、「分析」をクリックします。
PSIはスコア（0〜100）と改善提案を返してくれます。

改善は、表示の速さ（LCP）・操作応答の安定性（INP）・レイアウトの安定性（CLS）といったCore Web Vitals指標に直接影響する項目から優先的に取り組むと効果的です。
また、モバイルとデスクトップの結果を切り替えて確認できるため、デバイスごとの最適化にも役立ちます。

スコアの目安

• 90–100：良好
• 50–89：要改善
• 0–49：不良

スコアは目的ではなく指標です。
重要なのは、Core Web Vitals（LCP / INP / CLS）の基準を満たすことであり、スコアは改善の道標として活用しましょう。

生徒

ペン博士！ページ速度って、感覚じゃなくてちゃんと数字で見られるんですね！

ペン博士

その通りじゃ。Google PageSpeed Insights を使えば、実際のユーザー体験も含めて分析できるんじゃ。スコアに一喜一憂せず、Core Web Vitals の基準を満たすことを目指すんじゃぞ！

ページの表示速度が遅くなる主な要因

ペン博士

ページの表示速度が低下する主な原因は、通信容量・通信回数・通信タイミングの3つある。
これらの仕組みを理解しておくことで、どの部分を最適化すべきかを明確にできるぞ。

通信容量

通信容量とは、サーバーからダウンロードするデータの総量を指します。
画像・動画・CSS・JavaScriptなどのファイルサイズが大きいと、その分だけ読み込み時間が長くなります。
画像の圧縮やコードの軽量化を行うことで、通信容量を削減することが可能です。

通信回数

通信回数とは、ページを開いた際にブラウザがCSS、JavaScript、画像、フォントなどをサーバーから取得する回数のことです。
読み込むリソースが多いほどリクエスト数が増え、表示速度が遅くなります。
不要なスクリプトや外部ファイルを減らすことで、通信回数を最小限に抑えられます。

通信タイミング

通信タイミングとは、どの順序でデータを読み込むかを示します。
ページにアクセスした際、すべてのデータを一度に読み込むと初期表示が遅くなります。
必要なデータを優先的に読み込み、残りを後から読み込む設定にすることで、初期表示を大幅に改善することが可能です。

生徒

ペン博士！ページが遅くなる理由って、やっぱりデータの量だけじゃないんですね。読み込みのタイミングも大事ということがわかりました。

ペン博士

その通りじゃ。通信容量・回数・タイミング、この3つのバランスが鍵じゃ。まずは「どのリソースが遅いのか」を把握することから始めるんじゃぞ！

ページの表示速度を改善する基本ステップ

ペン博士

ここからは、ページの表示速度を改善するために実際に行う対策を紹介するぞ。どれも専門的なスキルがなくても取り組める基本的な方法じゃ！ひとつずつ確認しながら、サイトの読み込みを軽くしていこう。

画像を最適化して読み込みを軽くする

ページの読み込みが遅くなる最大の原因は、画像ファイルの容量が大きすぎることです。
特に高解像度の画像を多用すると、サーバーからの転送に時間がかかり、全体の表示が遅延します。
そのため、画像を用途や配置に合わせて最適化することが欠かせません。

画像を適切なサイズにリサイズする

実際に表示される範囲よりも大きな画像を読み込むと、データ転送が無駄になります。
HTMLの＜srcset＞属性や<picture>要素を活用し、画面サイズや解像度に応じて最適な画像を配信しましょう。
これにより、モバイルや高解像度ディスプレイでも効率的に表示できます。

外部ツールを利用してアップロード前に圧縮しておく

アップロード前に画像を圧縮することで、転送量を大幅に削減できます。
ブラウザ上で動作するSquooshを使えば、JPEG・PNG・WebP・AVIFなどの形式に対応し、圧縮率や品質を確認しながら最適化することが可能です。
処理はローカルで完結するため、データの安全性も保たれます。

アイコン画像などはSVG形式にして通信回数を減らす

アイコンやロゴなどの装飾には、SVG形式を利用しましょう。
SVGはテキストベースのベクターデータで、HTML内に直接記述できるため、追加のHTTPリクエストを発生させずに表示できます。
拡大・縮小を行っても画質が劣化しないため、レスポンシブデザインにも適しています。

SVG形式を作成・変換する場合は、Vectorizer.AIなどのツールを使うと便利です。
どちらも画像を読み込むだけでSVGデータを生成できます。

生徒

ペン博士！やっぱり画像って重くなる原因の筆頭なんですね。サイズや形式を意識するだけでも違いそうです！

ペン博士

その通りじゃ。画像の最適化は効果が大きい上に、初心者でもすぐ取り組める。リサイズ・圧縮・SVG化 の3つを意識すれば、体感速度は確実に上がるんじゃぞ！

画像や動画を遅延読み込みして初期表示を改善する方法

ペン博士

ページ内に多くの画像や動画を配置すると、初期表示の読み込みが遅くなりやすい。
こうした問題は、遅延読み込み（Lazy Load）を導入することで解消できるぞ。

遅延読み込み（Lazy Load）の仕組みを理解する

遅延読み込みとは、ユーザーがスクロールして画像や動画が表示領域に入る直前に、
ブラウザがそのメディアを読み込む仕組みです。
必要なデータだけを先に読み込むため、初期表示が大幅に高速化されます。
ファーストビューを軽くし、ユーザーがストレスを感じにくいページ表示を実現できます。

HTMLのloading属性で簡単に設定する

Lazy Loadは、特別なスクリプトを使わずにHTML属性だけで設定できます。
画像やiframeタグに「loading=”lazy”」を指定するだけで、遅延読み込みが有効になります。

例：画像タグの場合

<img src="https://example.com/img/sample.png" loading="lazy" alt="sample image">

loading属性には以下の3つの値を設定可能です

• lazy … ビューポート外の要素を遅延読み込み
• eager … 即時読み込み
• auto … ブラウザに任せる（未指定時と同義）

生徒

ペン博士！ページ内の画像が多いと、全部一気に読み込むせいで遅くなるんですね。

ペン博士

その通りじゃ。loading=”lazy” を使えば、必要なときにだけ読み込むようにできる。初期表示が軽くなり、体感速度もぐんと上がるんじゃぞ！

Webフォントを最適化してページ表示速度を改善する

ペン博士

Webフォントはデザインの統一感を高める一方で、読み込み負荷を増やす要因にもなり、特に日本語フォントは文字セットが膨大で、1ファイルあたり数MBを超えることも少なくない。

ここでは、フォントのサブセット化と非同期読み込みという2つの基本的な最適化方法を紹介するぞ。

Webフォントをサブセット化する

サブセット化とは、フォント内の全文字のうち、実際にWebサイトで使用する文字だけを抜き出して容量を削減する方法です。
例えば、日本語Webフォント「Noto Sans JP」には全文字数で 4万字以上が含まれています。
このうち、頻繁に使われる文字だけを抽出してサブセット化すると、およそ7,000文字程度に削減できます。
その結果、フォント容量は約1.5MBから約450KBまで圧縮でき、ページ表示の負荷を大きく軽減できるでしょう。

サブセット化を行う際は、サブセットフォントメーカー が便利です。

非同期読み込みでフォントの遅延を防ぐ

Webフォントを読み込む際は、ページ表示の遅延を防ぐために「font-display」と 「preload」を組み合わせる方法が推奨されています。これにより、本文がすぐに描画され、フォント読み込み完了後に自動で切り替わります。
この設定を行うことで、ページ全体の表示速度が向上するでしょう。

多くのWebサイトでは、Google Fontsを利用してWebフォントを導入しています。
Google FontsはCDN経由で配信されるため、高速かつ安定して利用できるのが特徴です。

以下のコード例も、Google Fontsから「Noto Sans JP」の400と500の2ウェイトを非同期で読み込む設定です。

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap" 
      as="style" onload="this.rel='stylesheet'">
<noscript>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap" rel="stylesheet">
</noscript>

この設定では「rel=preload」を使ってフォントを先行取得し、「onload」によってスタイルシートとして適用しています
<noscript>タグ内のリンクは、JavaScriptが無効な環境でもフォントを読み込むための保険です。

次に、CSS側でフォント表示を最適化します。

@font-face {
  font-family: 'Noto Sans JP';
  font-display: swap;
}

「font-display: swap;」を指定すると、フォントが読み込み中でもシステムフォントで即時描画されます。
その後、読み込み完了時に自然に切り替わり、違和感のない表示を保てます。

生徒

ペン博士！フォントもページを重くするんですね。特に日本語は文字が多いから時間がかかるんだ…。

ペン博士

そうなんじゃ。フォントは見た目を整える反面、容量が大きい。サブセット化と非同期読み込み を組み合わせれば、デザインも速度も両立できるんじゃぞ！

外部ファイルを最適化してページ表示速度を改善する方法

ペン博士

Webサイトの読み込み速度を改善するうえで、CSSやJavaScriptなどの外部ファイルの扱い方も非常に重要じゃ。
ここでは、外部ファイルを軽量化し、効率的に読み込むための基本的な最適化手法を紹介するぞ。

CSSとJavaScriptを圧縮して軽量化する

Webサイトでは、デザインや動きを実現するためにCSSやJavaScriptを利用します。
しかし、ファイルの数や容量が多いほど通信量が増え、ページ表示速度が遅い原因になります。

そのため、不要な空白や改行、コメントを削除してファイルを軽量化する「圧縮（Minify）」が有効です。
圧縮後のコードは1行にまとめられ、データ転送量を減らしながら同じ動作を維持できます。

// 圧縮前
$(function initScrollButton() {
  const scrollBtn = $('.js-scrolltop');
  scrollBtn.hide();

  $(window).scroll(function handleScroll() {
    if ($(this).scrollTop() > 300) {
      scrollBtn.fadeIn();
    } else {
      scrollBtn.fadeOut();
    }
  });

  scrollBtn.click(function handleScrollTopClick() {
    $('html, body').animate({ scrollTop: 0 }, 300);
    return false;
  });
});

// 圧縮後
$(function initScrollButton(){const scrollBtn=$('.js-scrolltop');scrollBtn.hide();$(window).scroll(function handleScroll(){if($(this).scrollTop()>300){scrollBtn.fadeIn();}else{scrollBtn.fadeOut();}});scrollBtn.click(function handleScrollTopClick(){$('html, body').animate({scrollTop:0},300);return false;});});

このように、圧縮後のコードは1行にまとめられ、余分なデータが削除されます。
ファイルサイズが小さくなることで、読み込み時間を短縮でき、ページ全体の動作がより軽快になるでしょう。

JavaScriptの読み込みをブロックしないようにする

HTMLは上から順に解析・描画を行います。
そのため、ページ冒頭でJavaScriptを読み込むと、スクリプトの実行中に画面の描画が一時停止します。

これを防ぐには、defer属性を使い、HTMLの解析が終わってからスクリプトを実行させるのが効果的です。

<script src="main.js" defer></script>

また、ライブラリをCDN経由で読み込むことで、
ユーザーの地域に近いサーバーからデータを取得でき、通信距離を短縮して読み込み速度を改善できます。

オンラインツールを使って圧縮する

既存サイトを改善したい場合は、オンラインで利用できる圧縮ツールが便利です。CSS MinifierやJS Minifierにコードを貼り付け、「Minify」をクリックするだけで圧縮済みコードが生成されます。
出力結果をコピーし、元のファイルに上書きすれば完了です。

テキストエディターで圧縮する

頻繁にコーディングを行う場合は、Visual Studio Codeなどのエディターに拡張機能を導入すると効率的です。
esbuildやLightning CSS などの拡張を利用すれば、ファイル保存時に自動で圧縮を実行できます。
圧縮済みのファイル（例：style.min.css、script.min.js）が同じフォルダに自動生成されるため、運用の手間も減ります。

この方法なら、ファイル保存時に即座に再圧縮が実行され、運用面でも効率的です。

生徒

ペン博士！CSSやJavaScriptも圧縮できるんですね！

ペン博士

その通りじゃ。圧縮すれば通信データが減り、表示も速くなる。さらに defer属性 や CDN利用と組み合わせれば、外部ファイルの最適化は完璧じゃ！

ブラウザのキャッシュを活用してページ表示速度を改善する方法

ペン博士

Webサイトを再訪問したときにページを高速表示させるには、キャッシュの活用が欠かせない。
ブラウザのキャッシュ機能を適切に設定すると、サーバーへの負荷を軽減できる。

ここでは、.htaccessでのキャッシュ制御と、更新頻度の高いファイルの扱い方について解説するぞ！

.htaccessでキャッシュを制御する

サーバーでは、.htaccessファイルを使ってキャッシュの有効期限や更新ルールを指定できます。
これにより、「どのファイルを・どの期間・キャッシュに残すか」を細かく管理できます。
頻繁に読み込まれる画像やスタイルシートを効率的に再利用できるため、表示の最適化に効果的です。

以下のように設定すると、ブラウザは指定した期限内でキャッシュを再利用し、有効期限が過ぎた場合に新しいファイルを取得します。
この仕組みにより、不要な通信を減らしながら表示速度を維持することが可能です。

<ifModule mod_expires.c>
  ExpiresActive On

  # --- Stylesheet ---
  ExpiresByType text/css "access plus 1 week"

  # --- Images ---
  ExpiresByType image/webp  "access plus 1 week"
  ExpiresByType image/jpeg "access plus 1 week"
  ExpiresByType image/png  "access plus 1 week"

  # --- Fonts ---
  ExpiresByType font/woff2 "access plus 1 month"

  # --- JavaScript ---
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

ここでは、CSSや画像を1週間、JavaScriptやフォントを1か月間キャッシュするように指定しています。
これにより、軽量なリソースを無駄に再取得することなく、ページの読み込みを効率化できます。

適切に設定すれば、安定した表示速度を維持できるでしょう。

「ExpiresByType」ディレクティブではキャッシュを適用するファイルの種類（MIMEタイプ）を指定します。
続く 「”access plus 1 week”」 は、アクセスした時点から1週間ブラウザに保持するという意味です。

キャッシュ期間はWebサイトの性質に応じて自由に設定できます。
使用できる単位は以下のとおりです。

• years（年）
• seconds（秒）
• minutes（分）
• hours（時間）
• days（日）
• weeks（週）
• months（月）

更新頻度が低い画像やフォントは「months」、頻繁に変わるスクリプトは「days」といったように、ファイルの性質に合わせて期間を分けると効果的です。

更新が多いファイルはキャッシュを無効化する

HTMLや画像など、頻繁に更新されるファイルをキャッシュに残すと、最新情報が反映されないことがあります。
このような場合はキャッシュを無効化し、常に最新のデータを取得させましょう。

<FilesMatch "\.(html|css|jpeg|webp|png|php)$">
  Header set Cache-Control "no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Expires 0
</FilesMatch>

この設定を追加すると、対象のファイルは毎回サーバーから新しいデータを取得します。特に、頻繁に更新するページでは、この設定を活用することで反映漏れを防げます。

生徒

ペン博士、ページ速度の改善について一通り学べました！
画像の最適化からキャッシュ設定まで、こんなにたくさんの工夫があるなんて驚きです！

ペン博士

うむ、その通りじゃ。ひとつひとつの対策は小さくても、積み重ねれば大きな改善になる。
Core Web Vitals を意識して最適化を続ければ、ユーザーにも検索エンジンにも好かれるサイトになるんじゃぞ！

生徒

ありがとうございます！今回の学びを活かして、快適で見やすいWebサイトを作っていきます！

まとめ

本記事では、ページの表示速度が遅い原因と改善方法を詳しく解説しました。
デバッグを効率的に行うためのポイントを以下に整理します。

・画像はリサイズ・圧縮・SVG化などで容量を最適化する。
・Webフォントはサブセット化や非同期読み込みで負荷を軽減する。
・CSS・JavaScriptは圧縮（Minify）して通信量を減らす。
・不要なスクリプトや重い処理を削除し、読み込み順を最適化する。
・.htaccessでキャッシュを制御し、再訪問時の表示を高速化する。

これらを実践することで、ユーザー体験の向上・SEO評価の強化・コンバージョン率の改善を同時に実現できます。
サイトを「見やすく・速く・使いやすく」保つことが、長期的な成果につながる最良の施策です。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！