ホームページの表示速度を改善する方法｜Core Web Vitals入門
表示速度をまず改善したいなら、効く一手はほぼ決まっています。画像を軽くする・性能に余裕のあるサーバーを使う・不要なものを削るの3つです。とくに画像は、多くのサイトで最も重く、しかも手をつけやすい領域です。逆にいえば、ここに手をつけずに小手先の設定をいじっても、体感はほとんど変わりません。
「サイトが遅い」という感覚は、訪問者の離脱・問い合わせの減少・検索順位の低下に静かに直結します。本記事では、なぜ速度が重要なのか、Googleが見ているCore Web Vitalsとは何か、遅くなる原因と改善策、無料での計測方法、WordPressでの対策と進め方までを、中小企業の担当者が自分で判断できる粒度で整理します。
なぜ表示速度が重要か
表示速度は「速ければ気持ちいい」という話にとどまりません。次の3つの面で、事業の成果に直結します。
訪問者の離脱を防ぐ。 人は表示を待ってくれません。スマートフォンで開いて白い画面が続けば、内容を見る前に戻ってしまい、広告や検索で集めた訪問者も最初の数秒で失われます。
成果(CVR)が上がる。 表示が速いほどページを読んでもらえ、問い合わせや購入につながりやすくなります。フォームの表示がもたつくだけでも離脱は増えます。集客を増やす前に入口の速度を整えるほうが効率的なことは少なくありません(成果率の改善はCVR改善もあわせてご覧ください)。
SEO・ユーザー体験に効く。 Googleは表示速度を含む「ページ体験」を検索のランキング要素の一つにしています。速度そのものが順位を一気に押し上げる魔法ではありませんが、内容が同程度なら、快適なサイトのほうが評価で有利になります。検索の基本はSEOの始め方で整理しています。
速度は、離脱防止・成果向上・SEOの3つに同時に効く、数少ない「やって損のない」施策です。
Core Web Vitalsとは
Core Web Vitals(コアウェブバイタル)は、Googleがページ体験を測るために定めた代表的な指標です。3つの観点があり、それぞれ「良好」とされる目安が決まっています。下の数値は、実際の訪問者の上位75パーセンタイル(おおむね大多数の体感)で判定されます。
| 指標 | 何を測るか | 良好の目安 |
|---|---|---|
| LCP(表示の速さ) | 主要なコンテンツが表示される速さ | 2.5秒以内 |
| INP(反応の速さ) | クリックやタップへの反応の速さ | 200ミリ秒以内 |
| CLS(表示の安定) | レイアウトのガタつきの少なさ | 0.1未満 |
LCP(Largest Contentful Paint) は、画面内で最も大きな画像・テキスト・動画が表示されるまでの時間です。ページの主役が見えるまでの速さと考えると分かりやすいです。トップの大きな写真が重いと、ここが悪化します。2.5秒以内が良好、4秒を超えると改善が必要な水準です。
INP(Interaction to Next Paint) は、クリックやタップ、キー入力に対して画面が反応するまでの速さを測ります。INPは2024年3月にFID(First Input Delay)に代わって導入された指標で、訪問中のすべての操作への応答性を見ます。200ミリ秒以内が良好、500ミリ秒を超えると改善が必要です。多くは重いプログラム(JavaScript)の処理が原因です。
CLS(Cumulative Layout Shift) は、表示の途中でボタンや文章が突然ずれる「ガタつき」の量です。読もうとした瞬間に画像が割り込んで位置が動き、押すつもりのないリンクを押してしまう、あの不快感を数値にしたものです。0.1未満が良好、0.25を超えると改善が必要です。画像や広告の枠を最初から確保しておくことで防げます。
3つは「速さ・反応・安定」と性質が異なります。順位を狙う前に、まず自分のサイトがどこで引っかかっているかを知ることが出発点です。
なぜ遅くなるのか(主な原因)
改善策に入る前に、何が速度を奪っているかを押さえます。多くのサイトは、次のいずれか(複数)が原因です。
- 画像が重い。 撮ったままの大きな写真をそのまま載せている、表示は小さいのに元データは巨大、というケースが最も多い原因です。
- サーバーの応答が遅い。 安価な共用プランで処理が混み合うと、最初の反応そのものが遅れます。ここは設定では救いにくい根本要因です。
- JavaScript・CSSが多すぎる。 装飾やアニメーション、外部の埋め込みが増えると、読み込みも処理も重くなり、INPの悪化にもつながります。
- プラグインの入れすぎ。 WordPressでよくある原因です。機能を足すたびに読み込むファイルが増え、知らぬ間に重くなります。
- キャッシュを活用していない。 一度読み込んだ内容を再利用する仕組みがないと、毎回ゼロから読み込み、再訪問でも速くなりません。
原因は1つとは限りません。だからこそ、思い込みで対処せず、まず計測して「自分のサイトで何が重いのか」を特定することが大切です。
改善の主な打ち手
原因が分かったら、効果の大きいものから手を入れます。優先度の高い順に並べます。
| 打ち手 | 内容 | 主に効く指標 |
|---|---|---|
| 画像の最適化 | 圧縮・表示寸法に合わせる・次世代フォーマット(WebPなど)・遅延読み込み | LCP |
| サーバー・CDNの見直し | 性能に余裕のあるプラン、配信を速くするCDNの利用 | LCP |
| コードの軽量化 | 不要なJavaScript・CSSや使っていない外部タグを減らす | INP |
| キャッシュの活用 | 一度読み込んだ内容を再利用し、再訪問を速くする | LCP |
| レイアウトの安定化 | 画像や広告の枠をあらかじめ確保し、ガタつきを防ぐ | CLS |
画像の最適化が最優先です。 圧縮して容量を落とし、表示する寸法に合わせ、可能ならWebPなどの次世代フォーマットを使います。画面外の画像を後から読み込む「遅延読み込み(レイジーロード)」も有効です。多くのサイトは、ここだけで体感がはっきり変わります。
次にサーバーとCDNです。 応答が遅いサーバーは設定では救えません。性能に余裕のあるプランへの見直しが効きます(選び方はレンタルサーバーの選び方・比較を参照)。さらに、画像などを利用者の近くから配信するCDNを併用すると、距離による遅れも減らせます。
コードの軽量化とキャッシュは、その上で取り組みます。使っていない装飾や外部の埋め込みを削り、キャッシュで再訪問を速くします。あわせて、画像や広告の表示枠を最初から確保しておくと、CLSのガタつきも抑えられます。
スマートフォンは回線も端末の処理能力も不利になりがちで、速度の問題が出やすい環境です。スマホ対応(レスポンシブ)とあわせて確認しましょう。
計測ツールで現状を把握する
「速くなった気がする」では判断できません。改善は必ず数値で確認します。中小企業が無料で使える代表的なツールは次の3つです。
PageSpeed Insights。 URLを入れるだけで、点数と具体的な改善点が出ます。実際の訪問者のデータ(フィールドデータ)と、その場で測る診断(ラボデータ)の両方が見られ、Core Web Vitalsの状況も確認できます。まずここから始めるのが基本です。
Search Consoleの「ウェブに関する指標」。 実際の訪問者の体験をもとに、サイト全体でどのページが「良好・改善が必要・不良」のどれに当たるかを一覧で把握できます。1ページずつではなく、サイト全体の傾向をつかみたいときに役立ちます。導入や見方はアクセス解析の基礎で扱っています。
Lighthouse。 Chromeに付属する計測機能で、自分の環境でその場のスコアと改善提案を確認できます。改修の前後を手元で比べたいときに便利です。
3つは役割が違います。PageSpeed Insightsで具体的な改善点をつかみ、Search Consoleでサイト全体の傾向を見て、Lighthouseで手元の検証を行う、という使い分けが分かりやすいです。
WordPressでの対策
WordPressサイトの場合、対策は大きく3つの方向に整理できます。導入の基礎はWordPressの始め方もあわせてご覧ください。
プラグインで対処する。 キャッシュ、画像の最適化・圧縮、不要なコードの削減に対応したプラグインを使うのが基本です。ただし、入れすぎは逆効果です。役割の重なるものを並行して使うと不具合や速度低下を招くため、目的を絞って必要なものだけにします。
テーマを見直す。 装飾や機能を盛り込んだテーマは、それ自体が重いことがあります。シンプルで表示が軽いテーマを選ぶだけで、土台から速くなります。デザインを大きく変える場合は、サイトリニューアルの機会に見直すのも手です。
サーバーを選ぶ。 WordPressは表示のたびにプログラムが動くため、サーバーの性能が体感に直結します。WordPressの動作に最適化されたプランや、性能に余裕のあるプランを選ぶと安定します。
WordPressは便利な反面、放っておくと機能が増えて重くなりがちです。定期的に不要なプラグインを見直すことも、保守運用の一部として習慣にしましょう。
進め方(計測 → 特定 → 着手 → 再計測)
順番を間違えると、効果の薄い作業に時間を取られます。次の流れで進めるのが確実です。
- 計測する。 まずPageSpeed Insightsで現状の点数と問題点を確認します。スマートフォン表示のスコアをとくに重視します。
- 重い原因を特定する。 表示された改善点から、何が一番足を引っ張っているかを見極めます。多くの場合は画像、次にサーバーやスクリプトです。
- 画像から着手する。 効果が大きく手をつけやすい画像の最適化を最初に行います。続いてサーバーやコードへと広げます。
- 再計測する。 改修のたびに測り直し、数値で効果を確認します。良くなっていれば次へ、変わらなければ原因の見立てを修正します。
一度に全部やろうとせず、効果の大きいものから一つずつ進め、そのつど数値で確かめる。この繰り返しが、最短で体感を変える進め方です。
よくある失敗例
最後に、ありがちな失敗を挙げます。逆を行えば、それだけで多くの遠回りを避けられます。
- 計測せずにやみくもに手を入れる。 どこが重いか分からないまま設定をいじっても、効果が出たかどうかすら判断できません。必ず計測から始めます。
- 画像を放置したまま小手先の設定に走る。 最大の原因である画像に手をつけず、細かい設定だけ調整しても、体感はほとんど変わりません。
- プラグインを入れすぎる。 「速くするため」のプラグインを次々に足した結果、かえって重くなる、というのは典型的な失敗です。役割を絞り、必要なものだけにします。
- パソコン表示だけで満足する。 多くの訪問者はスマートフォンです。スマホでの速度を確認しないと、肝心の利用者の体感を見落とします。
まとめ
表示速度は、離脱防止・成果向上・SEOの3つに同時に効く施策です。Googleが見るCore Web Vitals(LCP=表示の速さ、INP=反応の速さ、CLS=表示の安定。INPは2024年3月にFIDから変わった指標)を意識しつつ、まずPageSpeed Insightsで計測し、重い原因を特定します。
着手は、効果が大きく手をつけやすい画像の最適化から。続いてサーバーやCDNの見直し、コードの軽量化、キャッシュの活用、レイアウトの安定化と広げます。スマートフォンでの速度をとくに重視し、改修のたびに再計測して数値で確かめる。この流れが、最短で体感を変える近道です。
「自社サイトの速度を計測してほしい」「成果につながるサイト改善を相談したい」という場合は、計測から一緒に取り組めます。お気軽にご相談ください。
関連記事
よくある質問
ホームページの表示速度はなぜ重要?
表示が遅いと、訪問者が待てずに離脱し、問い合わせや購入の機会を失います。さらにGoogleは表示速度を含むページ体験を検索のランキング要素の一つにしているため、SEOにも影響します。速度改善は、離脱防止・成果向上・SEOの3つに効く重要な施策です。
Core Web Vitalsとは?
Googleが重視するページ体験の指標で、LCP(主要な内容が表示される速さ)、INP(操作への反応の速さ)、CLS(表示のガタつきの少なさ)の3つがあります。INPは2024年3月にFIDに代わって導入された指標です。これらが基準を満たすと、ユーザーにとって快適で、検索評価の面でも有利になります。
表示速度は何から改善すればいい?
多くのサイトで効果が大きいのは『画像の最適化』です。サイズの大きすぎる画像を圧縮し、表示する寸法に合わせるだけで改善することがよくあります。次にサーバーの見直し、不要なスクリプトの削減、キャッシュの活用と進めます。まず現状を計測してから着手しましょう。
計測はどのツールを使えばいい?
無料のPageSpeed Insightsが基本です。URLを入れるだけで点数と改善点が出ます。Search Consoleの『ウェブに関する指標』では実際の訪問者のデータをもとにした状況を確認でき、Chromeに付属するLighthouseでも自分の環境で計測できます。まずPageSpeed Insightsから始めるのがおすすめです。
WordPressのサイトはどう改善する?
画像最適化・キャッシュ・不要なプラグインの整理に対応したプラグインを使うのが基本です。あわせて、表示が軽いテーマを選ぶこと、性能に余裕のあるサーバーを使うことが効きます。プラグインを入れすぎると逆に重くなるため、目的を絞って必要なものだけ使いましょう。
