クリニックWebのCore Web Vitals改善【2026年版・LCP/INP/CLS/モバイル最適化】

※本記事には広告（PR）が含まれます。mitoru編集部は公開情報を整理して比較・解説しており、表示順位や評価は広告主からの依頼ではなく編集部の独自判断によります。

クリニックの公式サイトは、診療時間・アクセス・予約方法など患者が受診前に確認する情報の入口です。表示が遅い、スマートフォンでタップした要素がずれる、といった技術的な問題があると、患者は表示完了を待たずに離脱してしまいます。Googleは「Core Web Vitals(コアウェブバイタル)」という指標群を公表し、実際のユーザー体験の観点からサイトの読み込み速度・応答性・視覚的な安定性を測定できるようにしています(Google Search Central)。本ガイドは、LCP・INP・CLSの3指標の意味、PageSpeed Insightsでのスコア確認方法、画像最適化やJavaScript軽量化といった改善アプローチ、WordPressの高速化ポイント、Search Console(サーチコンソール)を用いた継続監視の方法までを、公開情報に基づいて整理したものです。

自院サーバーの詳細な設定変更、個別のネットワーク環境に起因する表示遅延の切り分け、有料CDN・有料キャッシュサービスの導入判断は本記事の範囲外です。技術的な改善の実装は、契約しているホスティング事業者やWordPress運用に詳しいWeb制作会社・エンジニアとの個別相談を前提にご活用ください。

Core Web Vitalsとは何か(LCP・INP・CLSの3指標)

Core Web Vitalsは、Googleがユーザー体験の指標として位置づける「読み込み」「応答性」「視覚的な安定性」の3領域を数値化したもので、LCP(Largest Contentful Paint)・INP(Interaction to Next Paint)・CLS(Cumulative Layout Shift)の3指標で構成されています(web.dev)。各指標には「良好」「改善が必要」「不良」の3段階のしきい値が定義されており、実際のユーザーの計測データ(フィールドデータ)の75パーセンタイル値を基準に判定されます。

LCP(Largest Contentful Paint)とは

LCPは、ページ内で最も大きな画像・テキストブロック・動画がビューポート内に表示されるまでの時間を計測する指標で、「主要なコンテンツが表示された」と体感するタイミングに近いとされています。web.devの基準では、LCPが2.5秒以内なら「良好」、2.5秒超4.0秒以内は「改善が必要」、4.0秒超は「不良」と分類されます(web.dev「Largest Contentful Paint (LCP)」)。クリニックサイトではトップページのメインビジュアル画像がLCP対象要素になるケースが多く、この読み込み速度が評価を左右します。

INP(Interaction to Next Paint)とは

INPは、ユーザーがクリック・タップ・キー入力を行ってから、その結果が画面に反映されるまでの応答性を計測する指標です。2024年3月、従来のFID(First Input Delay)に代わりINPが正式な指標として採用されました(web.dev)。基準は、200ミリ秒以内が「良好」、200〜500ミリ秒が「改善が必要」、500ミリ秒超が「不良」です。予約フォームのボタン操作など患者が操作する場面が多いページほど、INPの改善優先度が高くなります。

CLS(Cumulative Layout Shift)とは

CLSは、ページの読み込み中に発生する予期しないレイアウトのずれ(要素の位置が突然移動する現象)を数値化した指標です。web.devの基準では、CLSが0.1以下であれば「良好」、0.1超0.25以下は「改善が必要」、0.25を超えると「不良」とされています。広告や埋め込みコンテンツの表示、フォントの読み込みによる文字サイズの変化などが主な原因とされ、患者が診療時間の記載箇所を読もうとした瞬間にレイアウトがずれて誤タップしてしまう、といった離脱要因につながります。

なぜCore Web VitalsがGoogle検索順位に影響するのか

Googleは検索セントラルの案内で、Core Web Vitalsを含む「ページエクスペリエンス」をランキングシステムを構成するシグナルの一つと位置づけています(Google Search Central)。あわせて、有用で信頼できる質の高いコンテンツを提供することが優先されるとも示されており、スコア改善だけで検索順位が大きく変動するとは限りません。とはいえ、実際に訪問した患者の離脱率・回遊率に直結する要素として、技術的な改善に取り組む意義は小さくありません。

クリニックサイトで特に重要視される理由

総務省が公表する情報通信白書では、スマートフォンによるインターネット利用が生活の中心的な手段として継続的に取り上げられており(総務省「情報通信白書」)、体調不良時や外出先から検索する患者ほど、通信環境が不安定なスマートフォン回線でアクセスする場面が多いと考えられます。表示に時間がかかるページは、患者が診療時間・住所・予約方法を確認する前に離脱する要因となります。また、厚生労働省が示す医療法上の広告規制では、医療機関サイトに掲載する情報の正確な表示が前提とされており(厚生労働省「医療法における病院等の広告規制について」)、表示崩れによって必要な情報が正しく伝わらない状態は避けるべき課題です。

PageSpeed Insightsでスコアを計測する方法

Core Web Vitalsの現状把握には、Googleが無償で提供する「PageSpeed Insights」(https://pagespeed.web.dev/)の利用が広く案内されています。診断したいURLを入力するだけで、モバイル・パソコンそれぞれのスコアと、LCP・INP・CLSを含む各指標の評価、改善提案の一覧が表示されます。

ラボデータとフィールドデータの違い

PageSpeed Insightsのレポートには、シミュレーション環境で計測される「ラボデータ」と、実際の訪問者の端末・通信環境から集計される「フィールドデータ(Chrome UX Report、CrUX)」の2種類が表示されます。検索順位のシグナルとして参照されるのはフィールドデータですが、アクセス数が少ないページではCrUXデータが表示されないこともあり、その場合はラボデータを目安にする運用が実務上の対応です。

モバイル・パソコン別に確認するポイント

Googleはモバイルファーストインデックス(サイトの評価をモバイル版ページの内容を基準に行う仕組み)を採用しているため、パソコン版のスコアが良好でも、モバイル版のスコアが低い場合はそちらを優先して改善する設計が実務上の基本です。診断時は、トップページだけでなく、予約ページやアクセスページなど患者の閲覧頻度が高いページも個別に確認しておくと、サイト全体の課題を把握しやすくなります。

画像最適化でLCPを改善する(WebP/AVIF・遅延ロード)

クリニックサイトのLCP要素は、院内写真やメインビジュアルといった画像であることが多く、画像の最適化はLCP改善において優先度の高い施策の一つです。

WebP/AVIF形式への変換

従来のJPEG・PNG形式に比べ、WebPやAVIFといった次世代画像フォーマットは、同程度の画質でもファイルサイズを抑えられる特性があり、画像の読み込み時間短縮に直結します。WordPressでは、画像最適化系プラグインを利用してアップロード時に自動変換する運用や、ブラウザが対応形式を判定して配信するタグ構造を用いる運用が一般的です。あわせて、表示サイズに対して不必要に大きい元画像をそのまま使わず、掲載箇所に応じた解像度にリサイズしておくことも、ファイルサイズ削減の基本です。

遅延ロード(レイジーローディング)の設定と注意点

画面外の画像にloading="lazy"属性を付与し、スクロールして表示領域に入るタイミングで読み込む「遅延ロード」は、初期表示の負荷軽減に有効な手法です。ただし、LCP対象となるファーストビューの画像に遅延ロードを設定すると、かえって表示開始が遅れてLCPスコアを悪化させる原因になります。ファーストビュー内の主要画像は遅延ロードの対象から外し、優先度を示すfetchpriority="high"属性を付与する設計が、web.devの改善ガイドでも紹介されている考え方です。

JavaScript軽量化とレンダリング阻害CSSの解消(INP・CLS対策)

INPとCLSの改善には、JavaScriptとCSSの読み込み・実行を見直す視点が欠かせません。

サードパーティスクリプトの整理

アクセス解析タグ、チャットツール、SNS埋め込み、外部予約システムなど複数のサードパーティスクリプトを読み込んでいるサイトでは、各スクリプトがメインスレッドを占有し、操作への応答を遅らせる「長いタスク」の原因になる場合があります。利用実態のないタグを削除し、読み込みタイミングをdefer属性や非同期読み込みに変更する整理で、INPの改善につながる余地があります。

レンダリング阻害CSSとCLSの原因対策

ページ表示に必要なCSSファイルが多い、あるいはサイズが大きいと、ブラウザが描画を開始するまでの時間(レンダリング阻害)が延びます。ファーストビュー表示に必要な最小限のCSSをHTML内に直接記述する「クリティカルCSS」の手法や、それ以外のCSSを非同期で読み込む設計が解消策として紹介されています。CLSについては、画像や広告枠にwidth・height属性を指定して表示領域を確保すること、Webフォント読み込み時の文字サイズ変化を抑えるfont-display設定が代表的な対策です。

CDN活用とモバイルファースト対応

CDN(Content Delivery Network)は、画像やCSS・JavaScriptといった静的ファイルを世界各地の配信拠点(エッジサーバー)にキャッシュし、ユーザーの所在地に近い拠点から配信する仕組みです。オリジンサーバーまでの通信距離を短縮できるため、通信環境が不安定なモバイル回線からのアクセスでも表示速度の底上げが期待できます。多くのレンタルサーバー・WordPressホスティングサービスがCDN機能を標準またはオプションで提供しており、既存契約内で有効化できるか確認する運用が第一歩です。

モバイルファースト対応で確認すべき項目

デジタル庁が公開する「デザインシステム」は、官民問わず参照できる形で、ウェブサービスの使い勝手や情報の探しやすさ、アクセシビリティ向上に関する考え方を整理しています(デジタル庁「デザインシステム」)。タップしやすいボタンサイズの確保、viewportの適切な設定、文字サイズが小さすぎないレイアウトといった基本要件は、表示速度の改善とあわせて患者が迷わず情報にたどり着ける体験づくりの土台になります。

WordPress特有の高速化ポイント

国内の多くのクリニックサイトはWordPressで構築・運用されており、WordPress特有の設計・運用上の工夫によってCore Web Vitalsの改善余地が生まれます。

キャッシュプラグインとサーバー環境

ページキャッシュを生成するプラグイン、あるいはサーバー側のキャッシュ機能(LiteSpeed Cacheなど)を有効化することで、毎回のデータベース処理を省略し、表示時間を短縮できます。あわせて、PHPのバージョンを開発元がサポートする最新の安定版に保つこと、TTFB(サーバーが最初の応答を返すまでの時間)が長い場合はサーバープラン・ホスティング事業者の見直しを検討することも、表示速度全体の底上げにつながる基本的な確認項目です。

プラグイン・テーマの見直し

利用していないプラグインや、機能が重複するプラグインを複数有効化している状態は、余分なCSS・JavaScriptの読み込みにつながり、レンダリング阻害やINPの悪化要因になります。定期的にプラグイン一覧を棚卸しし、稼働実態のないものを停止・削除する運用が有効です。テーマも、装飾機能を多く搭載した高機能テーマより軽量設計のテーマを選ぶことで、初期読み込み負荷を抑えやすくなります。投稿のリビジョンやスパムコメントが蓄積したデータベースの定期整理も推奨されます。

Search Console(検索コンソール)で継続的に監視する

改善施策は一度実施して終わりではなく、継続的に状態を監視し、悪化を早期に発見する運用が重要です。Googleが無償で提供する「Search Console」(https://search.google.com/search-console/about)には、「ウェブに関する主な指標」というレポートが用意されており、サイト内のURLを「良好」「改善が必要」「不良」のグループに分類し、実際のユーザーから収集されたフィールドデータをもとに表示してくれます。

Search Consoleのレポートの見方

「ウェブに関する主な指標」レポートは、モバイル・パソコンを分けて表示し、問題のあるURLグループをクリックすると、該当する具体的なページの一覧を確認できます。同一テンプレートを使うページが同じ問題を抱えているケースが多いため、個別ページを一つずつ確認するよりも、テンプレート単位で原因を特定し、共通の改善を反映させる方が効率的な運用につながります。

継続監視のための運用ポイント

プラグインの更新やテーマの変更、新しい埋め込みコンテンツの追加は、意図せずCore Web Vitalsのスコアを悪化させる場合があります。月次などの定期的なタイミングでPageSpeed InsightsとSearch Consoleの両方を確認し、スコアの推移を記録しておく運用が問題の早期発見につながります。あわせて、独立行政法人情報処理推進機構(IPA)が案内する「安全なウェブサイトの作り方」等の情報セキュリティ関連の公開情報も参考に(IPA)、表示速度だけでなくサイト全体の健全性を定期的に点検する視点を持つことも有効です。

よくある質問(FAQ)

Q1. Core Web Vitalsの3指標とは何ですか?

読み込み速度を示すLCP(Largest Contentful Paint)、応答性を示すINP(Interaction to Next Paint)、視覚的な安定性を示すCLS(Cumulative Layout Shift)の3つです。それぞれに「良好」「改善が必要」「不良」のしきい値が定められており、実際のユーザーの計測データをもとに判定されます。

Q2. INPとFIDの違いは何ですか?

FID(First Input Delay)は最初の操作に対する応答遅延のみを計測していましたが、INPはページ滞在中に発生するすべての操作を対象に応答性を評価する指標です。2024年3月にCore Web Vitalsの正式な指標がFIDからINPへ切り替えられています。

Q3. PageSpeed Insightsのスコアが低いと検索順位はすぐ下がりますか?

Googleはページエクスペリエンスをランキングシステムを構成するシグナルの一つと位置づけており、コンテンツの有用性・信頼性を優先する考え方を示しています。スコアの高低だけで順位が直接的に大きく変動するとは限りませんが、患者の離脱率や回遊率には直結するため、改善に取り組む意義はあります。

Q4. 画像の遅延ロードはすべての画像に設定すべきですか?

ファーストビュー(画面外にスクロールしないと見えない範囲より上)に表示される画像に遅延ロードを設定すると、かえってLCPが悪化する場合があります。画面外の画像にのみ遅延ロードを設定し、ファーストビューの主要画像は優先的に読み込む設計が推奨される考え方です。

Q5. WordPressで手軽に着手できる改善項目はありますか?

利用していないプラグインの停止・削除、画像最適化プラグインによるWebP変換、キャッシュプラグインの有効化は、専門的な開発知識がなくても着手しやすい項目として挙げられます。変更後はPageSpeed Insightsで数値を確認し、想定どおり改善しているかを確かめる運用が実務上の基本です。

Q6. Core Web Vitalsはどのくらいの頻度で確認すべきですか?

月次など定期的なタイミングでSearch Consoleの「ウェブに関する主な指標」レポートを確認し、プラグインの更新やコンテンツの追加といった変更を行った際には、あわせてPageSpeed Insightsで数値の変化を確認しておく運用が、問題の早期発見につながります。

出典・参考資料

• Google Search Central「ページエクスペリエンスが Google 検索のランキングに与える影響について」 https://developers.google.com/search/docs/appearance/core-web-vitals
• web.dev「Learn Core Web Vitals」 https://web.dev/articles/vitals
• web.dev「Largest Contentful Paint (LCP)」 https://web.dev/articles/lcp
• web.dev「Interaction to Next Paint (INP)」 https://web.dev/articles/inp
• web.dev「Cumulative Layout Shift (CLS)」 https://web.dev/articles/cls
• Google「PageSpeed Insights」 https://pagespeed.web.dev/
• Google「Search Console」 https://search.google.com/search-console/about
• 総務省「情報通信白書」 https://www.soumu.go.jp/johotsusintokei/whitepaper/
• 総務省「通信利用動向調査」 https://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
• デジタル庁「デザインシステム」 https://www.digital.go.jp/policies/servicedesign/designsystem
• 厚生労働省「医療法における病院等の広告規制について」 https://www.mhlw.go.jp/stf/seisakunitsuite/bunya/kenkou_iryou/iryou/kokokukisei/index.html
• 独立行政法人情報処理推進機構(IPA)「安全なウェブサイトの作り方」 https://www.ipa.go.jp/security/vuln/websecurity.html

関連記事(mitoru編集部おすすめ)

• クリニックの医療情報サイバーセキュリティ完全ガイド
• クリニックの特徴訴求マーケティング完全ガイド
• 医療機関の広報・PR活動完全ガイド