ホームページの表示速度を改善する10の方法｜PageSpeed Insightsスコアの上げ方【2026年版】

この記事で分かること

表示速度を改善すべき3つの理由（SEO・離脱率・売上への影響）
Core Web Vitals（LCP / INP / CLS）の合格ラインと意味
ホームページが遅くなる5大原因と、その見抜き方
初心者・開発者の2レベルで使える改善方法10選
WordPress / ノーコードツール別の改善テクニック
すぐ使える表示速度改善チェックリスト

「ホームページが重くて、ユーザーに離脱されている気がする」「PageSpeed Insightsで赤いスコアが出てしまった」と悩んでいませんか？

Webサイトの表示速度は、SEO（検索順位）とCVR（成約率）の両方を左右する、もっとも重要なテクニカル要素のひとつです。Googleは「ページエクスペリエンス」をランキングシグナルに組み込んでおり、表示速度が遅いサイトは検索でも、ユーザー体験でも不利になります（出典: Google検索セントラル「ページエクスペリエンスを理解する」）。

しかし「結局どこから改善すればいいの？」「専門用語が多くて何が原因か分からない」と感じる方も多いはずです。

この記事では、表示速度改善のために本当にやるべきことを 初心者向けの5つ と 開発者向けの5つ に分けて、合計10の方法として具体的に解説します。まずは自分のサイトの現状を 無料のWebサイト品質スコアチェッカー で診断し、本記事の改善方法と突き合わせていきましょう。

なぜホームページの表示速度を改善すべきなのか

ホームページの表示速度を改善する目的は、大きく3つあります。SEOで上位表示されやすくなること、訪問者の離脱を減らせること、そして売上・問い合わせを増やせることです。順に、データに基づいて確認します。

表示速度はGoogle検索のランキング要因

Googleは、表示速度を含む「ページエクスペリエンス」を検索順位の評価要素として明示しています。具体的には Core Web Vitals（後述する3つの指標） をはじめ、モバイルフレンドリーやHTTPS対応などが評価対象です（出典: Google検索セントラル「Core Web Vitalsとは」）。

ただし「表示速度が早ければ1位になれる」という単純な話ではありません。Googleは表示速度を 同じくらいのコンテンツ品質を持つページ同士の「タイブレーカー」 として使うと説明しています。つまり、同じトピックを扱う競合と内容で互角になったとき、速いほうが勝ちます。SEOで競合と差をつけたいなら、表示速度の改善は避けて通れません。

SEOの基本から学びたい方は、ホームページのSEO対策入門を併せてご覧ください。

3秒で53%のモバイルユーザーが離脱する

業界で広く引用されている Google/SOASTA の調査（2017年）では、モバイルサイトの読み込みに3秒以上かかると、訪問者の53%が離脱する とされています。これは2017年の数値ですが、後述の Akamai や Deloitte（2020年）の調査でも、モバイルの数秒の遅延が離脱率上昇とCV低下に直結する傾向は同様に確認されています。

せっかく検索結果や広告からサイトに来てくれた訪問者の半数以上が、コンテンツを1文字も読まずに帰ってしまう可能性がある——スマートフォン経由のアクセスが大半を占める現在、3秒という壁は無視できません。

100msの遅延でコンバージョン率が最大7%下がる

Akamai がパフォーマンス研究で公表したデータとして、100ミリ秒の遅延でコンバージョン率が最大7%低下し、2秒の遅延で直帰率が103%増加する と業界では広く引用されています（参考: Akamai「Inside Akamai: How Offload and Performance Drive Speed and Resiliency」）。さらに Deloitte の調査「Milliseconds Make Millions」(2020) でも、モバイルサイトの読み込みが0.1秒速くなるだけで、小売サイトのコンバージョン率が約8.4%、平均注文額が約9.2%向上するという結果が示されています。

つまり、月100件の問い合わせが入る予約サイトであれば、わずか0.1秒の改善が 数件単位の機会損失の回避 につながる計算になります。表示速度は「技術者の自己満足」ではなく、明確に売上と直結する指標です。

Core Web Vitalsとは｜3つの指標を理解する

Core Web Vitalsとは、Googleが定めた「ユーザー体験を数値化する3つの指標」のことです。 読み込みの速さ・操作の応答性・視覚的な安定性の3軸で、サイトの体感品質を評価します。

2024年3月、Googleは応答性の指標を旧FID（First Input Delay）から INP（Interaction to Next Paint） へ正式に置き換えました（出典: web.dev「INPがCore Web Vitalsに昇格」）。現在のCore Web Vitalsは以下の3つです。

LCP（Largest Contentful Paint）— 読み込みの速さ

LCPは、ページ内でいちばん大きな要素（多くはヒーロー画像や見出し）が表示されるまでの時間 を測ります。ユーザーが「ページが見えた」と感じるタイミングの代理指標です。

合格ラインは 2.5秒以内。これを超えると「改善が必要」、4秒超で「不良」と判定されます。

INP（Interaction to Next Paint）— 操作の応答性

INPは、ユーザーがボタンやリンクをタップしてから、画面が次の状態を描画するまでの時間 を測ります。クリック・タップ・キー入力など、ページ滞在中のすべての操作が対象です。

合格ラインは 200ミリ秒以内。200〜500msは「改善が必要」、500ms超は「不良」となります。

CLS（Cumulative Layout Shift）— 視覚的な安定性

CLSは、読み込み中に予期せず要素がズレ動く量 をスコア化したものです。読もうとした見出しが下にズレて誤タップした経験はないでしょうか。そういう不快な体験をしないかを示します。

合格ラインは 0.1未満。0.1〜0.25は「改善が必要」、0.25超は「不良」と判定されます。

Core Web Vitals 合格判定の閾値

指標	良好（Good）	改善が必要	不良（Poor）
LCP（読み込み）	2.5秒以内	2.5〜4.0秒	4.0秒超
INP（応答性）	200ms以内	200〜500ms	500ms超
CLS（安定性）	0.1未満	0.1〜0.25	0.25超

注意点として、これらは 「サイト訪問者の75%以上が良好値を達成」 していて初めて合格とみなされます（出典: web.dev「Core Web Vitalsのしきい値はどう定義されたか」）。1人や2人のテストで合格しても、現実の評価には足りません。

まず無料で自分のサイトをチェックする

改善を始める前に、まず 現状のスコアを把握する ことが何より重要です。原因が分からないまま手を動かしても、効果のない作業に時間を使いがちです。

シタミ品質スコアチェッカーで5秒診断

Webサイト品質スコアチェッカー は、URLを入力するだけで以下の4軸を無料で診断するツールです。

パフォーマンス（Core Web Vitalsを含む速度評価）
アクセシビリティ
SEO
ベストプラクティス

GoogleのPageSpeed Insights APIを利用しており、本家と同じスコアが取得できます。会員登録もメールアドレスも不要で、診断結果に基づいた改善ポイントもその場で表示されます。まず現状を知る → 原因を理解する → 改善を実践する の最初の一歩として活用してください。

PageSpeed Insightsの読み方

公式ツールである PageSpeed Insights では、スコアが次のように区分されます。

スコア	区分	意味
90〜100	Good（良好）	良いパフォーマンス。維持を目指す
50〜89	Needs Improvement	改善の余地あり
0〜49	Poor（不良）	大幅な改善が必要

注意したいのは、スコアは「モバイル」と「PC」で別々に表示される こと。Googleはモバイルファーストインデックスを採用しているため、Google検索の評価ではモバイルスコアが優先される と考えるのが安全です。PCで90点でもモバイルで30点という状態は、SEO観点ではPCの数値が高く見えても実際の評価につながりにくくなります。

参考までに、Lighthouse v10 では総合スコアの内訳が TBT（Total Blocking Time）30%、LCP 25%、CLS 25%、FCP 10%、Speed Index 10% で計算されます（出典: DebugBear「PageSpeed Insights vs. Lighthouse」）。つまり、LCPとCLSという「見た目の体験」の指標が、半分を占めています。

ホームページの表示速度が遅い5大原因

PageSpeed Insightsのスコアが低いとき、原因の8〜9割は次の5つに集約されます。それぞれの見抜き方と、ざっくりの対処方針を押さえましょう。

原因1: 画像が最適化されていない

ホームページの容量の大半を占めるのは画像です。スマホ撮影のJPEG画像をそのまま貼っただけ、5000px以上の巨大画像をCSSで縮めて表示している、といったサイトでは、画像だけで数MBを読み込むことになり、LCPが大きく悪化します。

PageSpeed Insightsで「次世代フォーマットでの画像の配信」「効率的な画像エンコード」「適切なサイズの画像」が指摘されている場合、原因はほぼ画像です。

原因2: 未使用のCSS・JavaScriptが多い

WordPressのテーマやプラグインを増やすほど、ページ表示には使わない大量のCSS・JSが読み込まれます。診断結果に 「使用していないCSSの削減」「使用していないJavaScriptの削減」 が出ている場合、これが該当します。

ノーコードツールでテーマを乗り換えると改善する一方、開発者なら不要なライブラリを削除するだけで数百KB単位で軽くなります。

原因3: レンダリングブロックリソース

HTML読み込みの途中でCSSやJSが挟まると、ブラウザは描画を中断してそれらを読みに行きます。これが 「レンダリングを妨げるリソースの除外」 の正体です。

特に外部CDNから読み込むGoogleフォントや、<head> に置かれた解析タグなどが原因になりがちです。

原因4: サーバーの応答が遅い

PageSpeed Insightsの 「サーバー応答時間が遅い（TTFB）」 という指摘は、ホスティング環境そのものが弱いか、データベース処理が重いことを意味します。

激安レンタルサーバー、海外サーバー、リアルタイム処理の多いCMSなどで起こりがちです。TTFBの公式な目安は800ms以下、理想は200ms以下 とされており（出典: web.dev「Time to First Byte (TTFB)」）、800msを超えるとどんなにフロントを最適化しても上限が決まってしまいます。

原因5: サードパーティスクリプトの読み過ぎ

Googleアナリティクス、広告タグ、チャットツール、フォーム埋め込み、SNSウィジェット——これらはすべて「サードパーティスクリプト」です。便利な反面、1つあたり数百KBの追加読み込みになるため、入れすぎると一気に重くなります。

PageSpeed Insights の 「サードパーティコードの影響を抑えてください」 という警告が出たら、本当に必要なものだけに絞り込みましょう。

表示速度の最適化を意識して作られたホームページなら、改善に時間を使わずに済みます

まずは無料でサイトを作る

表示速度を改善する10の方法【初心者・開発者の2レベル】

ここからは、具体的な改善方法を 初心者向けの5つ と 開発者向けの5つ に分けて解説します。すべてやる必要はありません。LCP / INP / CLSのどこが弱いかを確認した上で、効果の大きいものから順に取り組むのが効率的です。

【初心者向け】今すぐできる5つの改善策

方法1: 画像をWebP形式に変換する

WebPは、JPEGやPNGと比べて 同じ画質で25〜34%ファイルサイズが小さい 画像フォーマットです（出典: Google for Developers「WebPについて」）。

「Squoosh」のような無料Web変換ツールを使えば、ドラッグ&ドロップで一括変換できます。WordPressユーザーなら「EWWW Image Optimizer」「Converter for Media」などのプラグインを使うと、既存画像を自動でWebP化できます。

方法2: 画像のサイズを表示サイズに合わせる

ヒーロー画像のためにスマホで撮影した4032×3024px の写真を、サイト上は600pxで表示している——というケースは非常に多く見られます。ブラウザは元画像のフルサイズをダウンロードしてから縮小表示する ため、表示サイズに合った大きさにあらかじめリサイズしておくべきです。

目安として、ヒーロー画像でも幅 1600〜2000px あれば十分です。Retinaディスプレイを意識しても2倍まで。

方法3: 不要なプラグイン・ウィジェットを削除する

WordPressのプラグインは1つ増やすごとにJSとCSSが追加されるため、使っていないプラグインは削除（無効化ではなく削除） が原則です。ノーコードツールでも、使っていないSNS埋め込みやチャットウィジェットは即座に外しましょう。

「念のため残している」プラグインは、ほぼ確実に体感速度を奪っています。

方法4: ブラウザキャッシュを有効化する

リピート訪問者に対して、画像・CSS・JSをブラウザに保存させる設定です。WordPressなら「WP Rocket」「W3 Total Cache」などのキャッシュプラグインで、ボタンひとつで有効化できます。レンタルサーバーによっては管理画面から設定できる場合もあります。

これだけで 2回目以降のページ表示が体感で数倍速く なります。

方法5: 軽量なテーマ・テンプレートに切り替える

WordPressであれば、「GeneratePress」「Astra」「Kadence」 など、最初から軽量設計されたテーマに切り替えるだけで、PageSpeed Insights のスコアが大きく改善する事例が報告されています。

逆に、見た目を派手にするためにアニメーションや動画背景を多用したテーマは、根本的に重くなりがちです。デザイン面でリッチに見せたい場合は、軽量テーマをベースに必要な装飾だけ加える方が結果的に有利です。

【開発者向け】さらに効果が大きい5つの改善策

方法6: 遅延読み込み（lazy loading）を実装する

ファーストビュー外の画像・iframeは、初回ロードで読み込む必要がありません。HTMLで loading="lazy" 属性を付けるだけで、モダンブラウザでは遅延読み込みが有効になります。

<img src="/images/photo.jpg" loading="lazy" alt="..." width="800" height="600" />

width と height を必ず指定することで、後述するCLS対策にもなります。

方法7: 未使用のCSS・JSを削除（コード分割）

Lighthouseの「カバレッジ」レポートで、各ファイルの使用率を確認できます。使用率が30%未満のファイルは、必ず削除候補 です。

モダンなフレームワーク（Next.js、Astro、SvelteKit など）であれば、コード分割（code splitting） が標準で有効になっており、ページごとに必要なJSだけが配信されます。古いSPA構成で全てを1つのbundle.jsにまとめている場合は、ルーティング単位での分割を検討しましょう。

方法8: CDN（コンテンツ配信ネットワーク）を導入する

CDNは、世界中のエッジサーバーにコンテンツをキャッシュし、ユーザーに地理的に近いサーバーから配信する 仕組みです。これによりTTFBが大幅に改善し、海外からのアクセスも速くなります。

Cloudflare: 無料プランあり。CMS問わず導入しやすい
Vercel / Netlify: モダンフロントエンドのホスティング兼CDN
CloudFront: AWS環境向け

ホームページ運営の維持費全体については、ホームページの維持費はいくらかかる？も参考になります。

方法9: フォント最適化（preload + font-display: swap）

Webフォントは1ファイルで100KB以上あるため、LCPに大きな影響を与えます。次の2つを必ず実装しましょう。

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "MainFont";
  src: url("/fonts/main.woff2") format("woff2");
  font-display: swap;
}

preload で読み込みを前倒し、font-display: swap でフォント読み込み中もシステムフォントで先に描画させることで、LCPとCLSの両方 を改善できます。

方法10: SSG / SSR / ISR でレンダリング最適化

クライアントサイドレンダリング（CSR）一辺倒のSPAは、初回表示でJSをすべてダウンロード・実行してから描画が始まるため、LCPが構造的に遅くなります。

SSG（静的サイト生成）: ビルド時にHTMLを生成。最速。
SSR（サーバーサイドレンダリング）: リクエスト時にHTMLを生成。動的データに対応。
ISR（増分静的再生成）: SSGとSSRのいいとこ取り。Next.js等で利用可能。

ブログ・コーポレートサイト・LPなど、ほとんどの用途では SSGかISRが最適解 です。デザインを優先しつつ表示速度も担保したい場合の選択肢として、2026年のWebデザイントレンドも参考にしてください。

WordPress / ノーコードツール別の改善テクニック

利用しているプラットフォームによって、効果の出やすい改善方法は異なります。代表的なケースをまとめました。

WordPress の改善ポイント

キャッシュプラグイン: WP Rocket（有料）、W3 Total Cache、LiteSpeed Cache を導入
画像最適化プラグイン: EWWW Image Optimizer、Smush、ShortPixel など
軽量テーマへの切り替え: GeneratePress / Astra / Kadence
プラグインの棚卸し: 半年使っていないプラグインは削除
ホスティングのアップグレード: 共有サーバーから VPS や WordPress特化型に移行

ノーコード（Wix・ペライチ等）の改善ポイント

ノーコードツールは内部最適化に手を入れにくい反面、設定や運用で改善できる余地 はあります。

アニメーション・動画背景を減らす
画像はツール側のアップロード前にWebP化 & リサイズ
不要なSNS連携・チャットウィジェットを外す
テンプレートを軽量なものに変更（途中変更可能なツール限定）

プラットフォーム別速度改善の自由度

評価軸は「内部実装にどの程度手を入れられるか」です（運用負荷ではありません）。

プラットフォーム	改善の自由度	主な改善手段
Next.js等のフレームワーク	高い	設計レベルから全て最適化可能
WordPress	中〜高	テーマ・プラグイン・サーバーを調整可能
AI HP作成ツール	中（ツール依存）	最初から最適化済みのケースあり、内部実装は触れない
Wix / Squarespace	限定的	画像・アニメーション設定の調整が中心
ペライチ・Jimdo	限定的	コンテンツ量と画像の調整が中心

AI生成サイトの選び方については、AIホームページ作成ツール5選で詳しく比較しています。

シタミなら表示速度の最適化が組み込まれている

シタミで生成されたホームページは、Next.js + ISR + 画像最適化 + CDN配信 がデフォルトで組み込まれており、追加のチューニングなしで PageSpeed Insights のパフォーマンス指標で高い水準を狙える設計になっています。

「表示速度の改善方法を学んでも、自分で実装する自信がない」「専門知識を持つ担当者がいない」という方は、最初から最適化済みのプラットフォームを選ぶことで、改善作業そのものを省略できます。実際のサイトのスコアは、品質スコアチェッカーで公開URLを入れて確認してみてください。

表示速度改善チェックリスト

自分のサイトでの取り組み状況を、次のチェックリストで確認しましょう。

測定

品質スコアチェッカーで現状スコアを把握済み
PageSpeed Insightsで モバイル スコアを確認済み
Core Web Vitals の3指標（LCP / INP / CLS）の現在値を把握済み

画像最適化

WebP形式に変換済み
表示サイズに合わせてリサイズ済み
loading="lazy" を設定済み
width と height 属性を必ず指定

コード最適化

不要なプラグイン・ウィジェットを削除済み
未使用のCSS・JavaScriptを削減済み
ブラウザキャッシュを有効化済み

配信最適化

CDNを導入済み
フォントの preload と font-display: swap を設定済み
サードパーティスクリプトを必要最小限に絞っている

すべてに一気にチェックを入れる必要はありません。スコアの足を引っ張っている指標から優先的に 取り組むのが鉄則です。

よくある質問（FAQ）

PageSpeed Insightsのスコアはどのくらいあれば良いですか？

Googleの基準では、90点以上が「Good（良好）」、50〜89点が「Needs Improvement（改善の余地あり）」、49点以下が「Poor（不良）」と区分されています。SEOで競合に勝ちたいなら、まずモバイルで50点以上、最終的に90点以上を目標にしてください。スコアはモバイルとPCで別々に表示されますが、Googleはモバイルファーストインデックスを採用しているため、Google検索ではモバイルスコアが優先されます。

表示速度はSEOにどのくらい影響しますか？

Googleは表示速度を含むページエクスペリエンスをランキング要因として明示していますが、コンテンツ品質と同等の重みではなく、同じくらいの品質のページ同士の「タイブレーカー」として使われると説明しています。つまり、コンテンツ品質が同等なら速いサイトが勝ちます。SEO上位を目指すなら、コンテンツ作成と並行して表示速度改善も必須です。

Core Web Vitalsの合格ラインを教えてください

LCP（読み込み）が2.5秒以内、INP（応答性）が200ミリ秒以内、CLS（視覚的安定性）が0.1未満が合格ラインです。さらに、サイト訪問者の75%以上がこの「良好」値を達成して初めて、Google検索セントラルの基準では合格判定となります。2024年3月にINPが旧FIDを置き換える正式指標になりました。

サイトが重くなる最大の原因は何ですか？

もっとも多い原因は、最適化されていない画像です。スマホで撮影した数MBの画像をそのままアップロードしているケース、表示サイズと比べて巨大な画像を縮小して使っているケースが代表的です。次に多いのが、使っていないWordPressプラグインやサードパーティスクリプト（SNS埋め込み・チャットツール等）の入れ過ぎです。

WordPressで一番簡単に表示速度を改善する方法は？

「キャッシュプラグインの導入」「画像最適化プラグインの導入」「軽量テーマへの切り替え」の3つから着手するのが最短です。WP Rocket、EWWW Image Optimizer、GeneratePress のような定番ツールに置き換えるだけでも、多くのサイトでスコアが大きく改善した事例が報告されています。それでも改善しない場合は、ホスティング環境のアップグレードを検討してください。

表示速度を改善すると、売上はどのくらい変わりますか？

Akamai のパフォーマンス研究では、100ミリ秒の遅延でコンバージョン率が最大7%低下するとされています。さらに Deloitte の2020年調査「Milliseconds Make Millions」では、モバイルの読み込みが0.1秒速くなるだけで、小売サイトのCVRが約8.4%、平均注文額が約9.2%向上したとの結果も報告されています。月100件の問い合わせがあるサイトなら、わずかな改善でも数件単位の機会損失の回避が期待できます。

ノーコードツールで作ったサイトは表示速度を改善できますか？

ノーコードツールは内部最適化に手を入れにくいため、改善の幅は限定的です。それでも、画像のリサイズ・WebP化、アニメーションや動画背景の削減、不要なSNSウィジェットの除去で一定の改善は見込めます。それ以上を目指す場合は、Next.jsベースのフレームワークや、最適化済みのAI HP作成ツールへの乗り換えが現実的な選択肢になります。

ホームページの表示速度は、ユーザー体験・SEO・売上の3つを同時に左右する 数少ない指標です。しかも、改善の効果が PageSpeed Insightsのスコアや問い合わせ件数として数値で確認できる ため、施策の中でもっとも投資対効果が読みやすい領域でもあります。

まずは品質スコアチェッカーで自分のサイトの現状を確認するところから始めてください。スコアが分かれば、本記事の「5大原因」と「10の方法」のどれが該当するかが見えてきます。1ヶ所ずつ着実に改善していけば、半年後には別物のように高速なサイトに生まれ変わります。