近年ネットワーク環境が整備され、通信速度が大幅に高速化したことで、高品質なビジュアルで魅せるページや、動きあるインタラクティブなWebサイトが増えてきました。動画を再生するサイトも多く見られます。サイトに訪問した瞬間に美しいビジュアルが目に飛び込んでくると、グッと興味関心が高まります。

「表示に3秒以上かかるページからは40%以上離脱する」というデータに示されるように、ページの応答が遅ければ遅いほど離脱率が高まります。また、Googleは2021年6月よりCore Web Vitalsをランキング要因（Page Experience）として正式に採用しており、表示速度はSEOに直結する重要な指標です。

こうしたことから「ページの表示速度」がWebマーケティング施策全体に与える影響は非常に大きく、サイト改善時に優先順位を上げるべき取り組みです。今回は、ユーザーにとって快適なサイトにするための「ページの表示速度の改善方法」を2026年時点の最新情報でご紹介します。

まず知っておきたい：Core Web Vitalsとは

Googleは2021年6月より、Core Web Vitals（コアウェブバイタル）をPage Experienceの一部としてランキング要因に組み込みました。表示速度改善を行う際は、この3つの指標を意識することが重要です。

• LCP（Largest Contentful Paint）：最も大きなコンテンツ（画像・テキスト）が表示されるまでの時間。目標は2.5秒以内
• INP（Interaction to Next Paint）：ユーザーの操作（クリックなど）に対してページが応答するまでの時間。目標は200ミリ秒以内※2024年3月にFIDから変更
• CLS（Cumulative Layout Shift）：ページ読み込み中にコンテンツが予期せずずれる量。目標は0.1以下

Core Web Vitalsの詳しい内容や改善方法は「コアウェブバイタルとは？FID、LCP、CLSの改善方法もあわせて解説」をご覧ください。

 

1. まずは計測ツールで表示速度をチェック

表示速度が計測できるツールは様々なものが提供されています。2026年現在、特に重要なのは以下のツールです。

• PageSpeed Insights（Googleが提供・Core Web Vitals対応）
• Google Search Console（サイト全体の速度問題を一覧確認）
• GA4（サイト速度の傾向把握に補助的に活用）
• GTmetrix（詳細なウォーターフォール分析が可能）
• Chrome DevTools（ブラウザで直接パフォーマンスを計測）

ここでは主要な3つのツールの使い方を解説します。

PageSpeed Insightsで改善ポイントを把握する

PageSpeed Insightsは、Googleが提供する無料の表示速度計測ツールです。URLを入力するだけで、スマートフォン・PCそれぞれのパフォーマンス状況とCore Web Vitalsのスコアを確認できます。

現在のPageSpeed InsightsはCore Web Vitalsの3指標（LCP・INP・CLS）を中心に評価し、0〜100点のスコアと「良好」「要改善」「不良」の区分で表示します。スコアの下に表示される「改善の機会」「診断」セクションに、具体的な改善ポイントと対処法が記載されているため、優先順位をつけながら対応しましょう。

▶PageSpeed Insights

Google Search Consoleの「ウェブに関する主な指標」でサイト全体を把握する

Google Search Consoleの管理画面内「ウェブに関する主な指標」レポートでは、サイト全体のページをCore Web Vitalsの観点でグルーピングし、「良好」「要改善」「不良」の3段階で分類して一覧表示します。

「不良」URLが多いセクションから優先的に対応することで、効率的にサイト全体の速度改善を進めることができます。

PageSpeed Insightsが1ページずつの診断ツールであるのに対し、Search Consoleではサイト全体の問題を一覧で把握できるため、両者を組み合わせて活用するのがおすすめです。

GA4でのサイト速度確認

以前のUA（Google Analytics 3）には「行動」>「サイトの速度」という専用の速度確認機能がありましたが、2023年7月のUA廃止後、GA4ではこの機能は提供されていません。

GA4では、カスタムイベントを設定することで読み込み時間を計測することはできますが、速度改善の用途にはPageSpeed InsightsとSearch Consoleの組み合わせを主軸とすることをおすすめします。

また、GA4の「サイトのコンテンツ」レポートで、エンゲージメント率が低くページ滞在時間が短いページは表示速度が遅い可能性があるため、速度確認の対象として優先するとよいでしょう。

 

2.画像を最適化して表示速度を改善する方法

画像の最適化は、手っ取り早く取り組める表示速度改善の方法です。画像ファイルは1ページのデータ容量のうち大きな割合を占めることが多く、最適化の効果も出やすい領域です。

WebP形式に変換する（現在の標準対策）

現在の表示速度改善において、画像フォーマットをWebPに変換することは最も効果的な手法のひとつです。

WebPはGoogleが開発した画像フォーマットで、JPEGと比較して同等の画質を保ちながら約25〜35%のファイルサイズ削減が期待できます。主要ブラウザ（Chrome・Safari・Firefox・Edge）はすべてWebPに対応しています。

WebPへの変換方法はいくつかあります。

• Squoosh（Googleが提供する無料ブラウザツール）：画質を確認しながらWebPへ変換可能
• TinyPNG：PNG・JPEG・WebP変換に対応した定番の圧縮サービス
• WordPressのプラグイン（EWWW Image Optimizer・ShortPixelなど）：アップロード時に自動変換

TinyPNGで画像を圧縮する（従来の手法・引き続き有効）

Googleでは画像の品質に影響を与えずに圧縮してくれる、高度な圧縮（ロスレス圧縮）ツールを推奨しています。

非可逆圧縮を使ったTinyPNGはPNG・JPEG・WebPをドラッグ＆ドロップで手軽に圧縮できる定番ツールです。PNG、JPG両方対応しているので、まとめて圧縮できます。

高度な圧縮（ロスレス圧縮）は品質に影響を与えない一方、非可逆圧縮と比較すると圧縮率が低くなります。劣化を避けたい場合はロスレス圧縮を使用しましょう。

Lazy Loading（遅延読み込み）を設定する

Lazy Loading（遅延読み込み）とは、画面に表示されていない画像を最初に読み込まず、ユーザーがスクロールしてその位置に近づいた時点で読み込む技術です。

画像タグにloading=”lazy”属性を付与するだけで実装できます。

<img src=”image.jpg” loading=”lazy” alt=”説明文”>

ファーストビュー外（スクロールしないと見えない領域）の画像にはLazy Loadingを設定することで、初期読み込み速度が大きく改善されます。なお、ファーストビュー内の重要な画像（ヒーローイメージなど）にはLazy Loadingを設定しないようにしましょう。LCPに影響し、かえってスコアが下がる場合があります。

適切な画像サイズに調整する

表示サイズより大きな画像ファイルをアップロードすると、ブラウザが縮小して表示するため無駄なデータ転送が発生します。HTMLやCSSで表示される最大サイズに合わせて、あらかじめ画像を適切なサイズにリサイズしてからアップロードしましょう。

レスポンシブ対応する場合は、srcset属性を使って画面サイズに応じた適切な解像度の画像を配信することで、さらなる速度改善が期待できます。

 

3. ソースコードを最適化して表示速度を改善する方法

ソースコードの最適化（ミニファイ）も、比較的手軽に対応できる表示速度改善の方法です。CSS・JavaScript・HTMLから余分なスペース、改行、コメントを取り除くことで、ファイルサイズを削減できます。

オンラインミニファイツールを使う

コマンドライン操作が不要なオンラインツールを使えば、初心者でも手軽にソースコードを最適化できます。ミニファイ作業の前に必ずソースコードのバックアップをとっておきましょう。

以前よく使われていたRefresh-SF（refresh-sf.com）は現在アクセスできない状態となっています。代わりに以下のツールが利用できます。

• CSS Minifier：CSSのミニファイ
• JavaScript Minifier：JSのミニファイ
• HTML Minifier：HTMLのミニファイ

ミニファイ後のコードは、余分なスペースや改行が削除され1行にまとめられます。このコードを直接編集すると可読性が大幅に下がるため、元ファイルのバックアップは必ず保持するようにしてください。

WordPressの場合はプラグインで自動化できる

WordPressサイトの場合、W3 Total CacheやWP Rocketなどのキャッシュ・最適化プラグインを利用することで、CSS・JS・HTMLのミニファイを自動化できます。

これらのプラグインはミニファイに加えて、ブラウザキャッシュの活用・リソースの遅延読み込み・CDN連携など、複数の速度改善施策を一括で管理できるため、WordPressサイトでは積極的に活用することをおすすめします。

4. その他の表示速度改善手法

画像最適化・ソースコード最適化に加えて、以下の手法も表示速度改善に有効です。

レンダリングをブロックするリソースの排除

CSSやJavaScriptファイルが読み込まれるまでブラウザのレンダリングが止まる「レンダリングブロック」は、表示速度低下の大きな原因のひとつです。

JavaScriptにはdefer属性またはasync属性を付与して非同期で読み込むことで、ページの表示をブロックしないようにできます。CSSは必要なスタイルのみをインラインで読み込み、その他は遅延読み込みする手法も有効です。PageSpeed Insightsの「レンダリングを妨げるリソースの排除」という警告が出ている場合は優先的に対応しましょう。

ブラウザキャッシュの活用

ブラウザキャッシュを設定することで、一度訪問したユーザーが再訪した際に画像やCSS・JSファイルをサーバーから再取得せず、ローカルのキャッシュから読み込めるようになります。キャッシュが有効化されると、2回目以降のページ表示が大幅に高速化されます。

Apacheの場合は.htaccessで、Nginxの場合はnginx.confでキャッシュの有効期限を設定できます。WordPressの場合はキャッシュプラグインで対応するのが一般的です。

CDN（コンテンツデリバリネットワーク）の活用

CDNは、画像やCSS・JSなどの静的ファイルを世界中の複数サーバーに分散配置し、ユーザーに最も近いサーバーから配信する仕組みです。

ユーザーのアクセス先が地理的に離れているほど、CDN導入による効果は大きくなります。Cloudflare（無料プランあり）やAmazon CloudFrontなどが代表的なサービスです。

サーバーレスポンスタイムの改善（TTFB）

サーバーがリクエストを受けてから最初のバイトを返すまでの時間（TTFB：Time to First Byte）が長いと、どれだけフロントエンドを最適化しても根本的な改善が難しくなります。サーバースペックの見直し・キャッシュの活用・データベースクエリの最適化でTTFBを改善しましょう。

 

まとめ

ページの表示速度対策はWebマーケティング施策全体・サイト改善施策として極めて重要な項目です。2026年現在、Core Web Vitals（LCP・INP・CLS）がGoogleのランキング要因として定着しており、表示速度はSEO評価に直結します。

まずはPageSpeed InsightsとGoogle Search Consoleの「ウェブに関する主な指標」でサイトの現状を把握し、スコアの低いページから優先的に対応することをおすすめします。改善手法としては、WebP形式への変換・Lazy Loading・ミニファイ・ブラウザキャッシュ・CDN活用を組み合わせることで、着実に速度を改善できます。

1秒早くページが表示されるだけで、機会損失を防ぎ、多くのユーザーがサイトを快適に訪問できるようになります。まだ自社サービスの表示速度を把握していない方は、まずはPageSpeed Insightsでの計測から始めてみてください。

パンタグラフでもクライアント様のWebサービスの構築・改修において表示速度は常々配慮しています。表示速度の課題感をお持ちの方は、お気軽にご相談ください。

お問い合わせはこちら