Webサイトの表示速度やユーザーエクスペリエンスの向上は、現代のWebサイト運営において避けて通れない重要な要素です。特に2021年8月からGoogle検索の順位決定要因に正式に組み込まれたCore Web Vitalsは、SEOの観点からも無視できない指標となっています。
本記事では、Core Web Vitalsの基本概念から具体的な改善方法まで、実際のWebサイト運営で役立つ実践的な情報を詳しく解説します。表示速度の改善は一朝一夕でできるものではありませんが、適切な知識と手法を身につければ必ず結果は出ます。
目次
Core Web Vitalsとは？なぜ重要なのか
Core Web Vitalsは、Googleが提唱するWebサイトの品質を測定する指標群「Web Vitals」の中でも、特にユーザーエクスペリエンスに直結する3つの重要指標を指します。
Core Web Vitalsの3つの指標
1. Largest Contentful Paint（LCP）
読み込み時間を測定する指標で、ページの最大コンテンツ（通常は画像やテキストブロック）が表示されるまでの時間を計測します。理想的なLCPは2.5秒以内とされています。
2. Interaction to Next Paint（INP）
2024年3月にFirst Input Delay（FID）に代わって導入された指標で、ユーザーの操作（クリック、タップ、キーボード入力など）に対するページの応答性を測定します。良好なINPは200ミリ秒以下です。
3. Cumulative Layout Shift（CLS）
視覚的な安定性を測定する指標で、ページの読み込み中にコンテンツが予期せず移動する現象を数値化します。良好なCLSは0.1以下とされています。
Google検索順位への影響
Core Web Vitalsは2021年8月から「Page Experience Update」として検索順位の決定要因に組み込まれました。これは単なる技術的な指標ではなく、実際のビジネスに直結する重要な要素なんです。
Googleは主にWebベースのサービスを提供しているため、低速なWebサイトはユーザーに敬遠され、結果的にネイティブアプリの使用を促すことになります。そのため、Googleは高速で快適なWeb体験を推進しているのです。
実際、類似のコンテンツと人気を持つ2つのサイトを比較した場合、Core Web Vitalsのスコアが良好なサイトの方が検索結果でより上位に表示される傾向にあります。
Core Web Vitalsの測定方法
基本的な測定ツール
1. Google PageSpeed Insights
最も手軽で一般的なツールです。URLを入力するだけで、モバイルとデスクトップの両方でCore Web Vitalsを測定できます。実際のユーザーデータ（Field Data）と、ラボ環境での測定データ（Lab Data）の両方を確認できるのが特徴です。
2. Google Search Console
サイトの所有者であれば、Search Console内の「Core Web Vitals」レポートで、サイト全体の指標を時系列で確認できます。これにより、改善の効果を長期的に追跡することが可能です。
3. Chrome DevTools
Chromeブラウザに内蔵されているLighthouseツールを使用して、より詳細な分析が可能です。F12キーを押して開発者ツールを開き、「Lighthouse」タブから「パフォーマンス」を選択して測定します。
継続的な監視の重要性
Core Web Vitalsの値は、サーバーの負荷、ネットワーク状況、ユーザーのデバイス性能など様々な要因で変化します。そのため、一度の測定で満足せず、継続的な監視が必要です。
特に、サイトの更新やサーバーの変更を行った際は、必ず測定を行い、パフォーマンスが悪化していないかを確認しましょう。
Largest Contentful Paint（LCP）の改善方法
LCPは、ページの最大コンテンツが表示されるまでの時間を測定する指標です。2.5秒以内が理想的とされていますが、実際にはより短い時間での表示が求められます。
LCPの主な悪化要因
1. サーバーレスポンスの遅延
サーバーの処理能力不足や、距離的に遠いサーバーからのレスポンスが遅い場合、LCPに大きく影響します。共有サーバーを使用している場合は、他のサイトの影響を受けることもあります。
2. 大容量画像の読み込み
特にヒーロー画像やメインビジュアルが大きすぎる場合、LCPのスコアが悪化します。350MBの画像を配信しているサイトも実際に存在しており、これは明らかに改善が必要です。
3. レンダリングブロックリソース
CSSやJavaScriptが適切に最適化されていない場合、メインコンテンツの表示が遅れます。
LCP改善の具体的手法
1. サーバーとホスティング環境の最適化
まず基本となるのがサーバー環境の見直しです。共有サーバーを使用している場合は、専用サーバーやVPS、クラウドサービスへの移行を検討しましょう。
また、CDN（Content Delivery Network）の導入も効果的です。世界中に分散配置されたサーバーから、ユーザーに最も近い場所からコンテンツを配信することで、読み込み時間を大幅に短縮できます。
2. 画像の最適化
Copy<!-- 改善前 -->
<img src="hero-image.jpg" alt="メインビジュアル">
<!-- 改善後 -->
<img src="hero-image.webp"
alt="メインビジュアル"
width="800"
height="600"
loading="eager"
fetchpriority="high">
画像の最適化は最も効果的な改善方法の一つです：
- 適切なフォーマットの選択：WebPやAVIF形式を使用することで、画質を保ちながらファイルサイズを大幅に削減できます
- 適切なサイズでの配信：レスポンシブ画像を使用し、デバイスに応じて最適なサイズの画像を配信します
- プリロードの活用：重要な画像には
fetchpriority="high"を設定し、優先的に読み込みます
3. リソースの最適化
Copy<!-- クリティカルCSSのインライン化 -->
<style>
/* Above the foldで必要な最小限のCSS */
.hero { display: flex; align-items: center; }
</style>
<!-- 非クリティカルCSS の遅延読み込み -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
- 不要なコードの削除：使用していないCSSやJavaScriptは削除します
- ファイルの圧縮：Gzip圧縮やBrotli圧縮を有効にします
- HTTP/2の活用：多重化により、複数のリソースを並行して取得できます
4. プリロードとプリフェッチの活用
Copy<!-- 重要なリソースのプリロード -->
<link rel="preload" href="hero-image.webp" as="image">
<link rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin>
<!-- 次に必要になるリソースのプリフェッチ -->
<link rel="prefetch" href="second-page.html">
実践的なLCP改善事例
実際のWebサイトでLCPを改善した事例を紹介します。
事例1：ECサイトの商品画像最適化
ある ECサイトでは、商品のメイン画像が2MB以上あり、LCPが4.5秒という状況でした。以下の改善を実施：
- 画像をWebP形式に変換（サイズ80%削減）
- レスポンシブ画像の実装
- 重要な商品画像のプリロード
結果：LCP 4.5秒 → 1.8秒に改善
事例2：コーポレートサイトのヒーロー画像最適化
ヒーロー画像が非圧縮で3MBあったサイトの改善：
- 画像圧縮とWebP変換
fetchpriority="high"の設定- 画像のwidth/height属性の明示
結果：LCP 3.2秒 → 1.4秒に改善
ランディングページの作成や運用をお考えの方は、これらの最適化を最初から考慮したサービスを選ぶことが重要です。LandingHubでは、Core Web Vitalsの最適化を考慮したランディングページ作成サービスを提供しています。
Interaction to Next Paint（INP）の改善方法
INPは2024年3月にFIDに代わって導入された新しい指標で、ユーザーの操作に対するページの応答性を測定します。200ミリ秒以下が理想的とされています。
INPの基本概念
INPは、ユーザーがページを操作してから次の画面更新（Paint）が発生するまでの時間を測定します。これには以下の処理時間が含まれます：
- 入力遅延：ブラウザがユーザーの操作を認識するまでの時間
- 処理時間：イベントハンドラーの実行時間
- 表示遅延：DOM更新から画面反映までの時間
INPの主な悪化要因
1. 重いJavaScript処理
特にメインスレッドをブロックする長時間の処理は、INPを大幅に悪化させます。
2. 大量のDOM要素
DOM要素が多すぎると、操作に対する応答が遅くなります。
3. 非効率なイベントハンドラー
最適化されていないイベント処理も要因の一つです。
INP改善の具体的手法
1. JavaScriptの最適化
Copy// 改善前：重い処理でメインスレッドをブロック
function heavyTask() {
for (let i = 0; i < 100000; i++) {
// 重い処理
}
}
// 改善後：処理を分割してyieldポイントを作成
async function optimizedTask() {
for (let i = 0; i < 100000; i++) {
// 処理を分割
if (i % 1000 === 0) {
await new Promise(resolve => setTimeout(resolve, 0));
}
}
}
2. Scheduler API の活用
Copy// Scheduler APIを使用した改善例
async function processLargeDataset(data) {
for (let i = 0; i < data.length; i++) {
await processItem(data[i]);
// 他の処理に制御を譲る
if (scheduler.postTask) {
await scheduler.postTask(() => {}, { priority: 'background' });
}
}
}
3. イベントハンドラーの最適化
Copy// 改善前：すべてのイベントで重い処理を実行
button.addEventListener('click', () => {
heavyCalculation();
updateUI();
});
// 改善後：デバウンスとスロットリングを活用
const debouncedHandler = debounce(() => {
heavyCalculation();
updateUI();
}, 100);
button.addEventListener('click', debouncedHandler);
4. Web Workersの活用
Copy// メインスレッドをブロックしない重い処理
const worker = new Worker('heavy-task-worker.js');
worker.postMessage({ data: largeDataset });
worker.onmessage = (event) => {
// 処理結果を受け取ってUI更新
updateUI(event.data);
};
実践的なINP改善事例
事例1：ECサイトの商品フィルタリング機能
商品の絞り込み機能でINPが500msを超えていたケース：
改善前の問題：
- フィルター変更時に全商品を再描画
- DOM操作が非効率
- 検索処理がメインスレッドをブロック
改善後：
- 仮想スクロールの実装
- 検索処理をWeb Workerに移行
- デバウンス処理の実装
結果：INP 520ms → 150ms に改善
事例2：ダッシュボードのデータ更新
リアルタイムデータ更新でINPが悪化していたケース：
改善前の問題：
- 大量のDOM操作
- 同期的なデータ処理
- メモリリークによる性能低下
改善後：
- 差分更新の実装
- requestAnimationFrameの活用
- メモリ管理の最適化
結果：INP 380ms → 120ms に改善
Cumulative Layout Shift（CLS）の改善方法
CLSは、ページの読み込み中にコンテンツが予期せず移動する現象を数値化した指標です。0.1以下が理想的とされています。
CLSの主な悪化要因
1. サイズ未指定の画像や動画
width/height属性が未設定の画像は、読み込み完了時にレイアウトが変動します。
2. 動的に挿入されるコンテンツ
広告やSNSウィジェットなどが後から挿入されると、既存コンテンツが押し下げられます。
3. Webフォントの読み込み
カスタムフォントが読み込まれる際のフォント切り替えでレイアウトが変動します。
CLS改善の具体的手法
1. 画像や動画のサイズ指定
Copy<!-- 改善前 -->
<img src="image.jpg" alt="サンプル画像">
<!-- 改善後 -->
<img src="image.jpg"
alt="サンプル画像"
width="800"
height="600">
<!-- CSS aspect-ratioを使用した改善 -->
<style>
.responsive-image {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
</style>
2. 動的コンテンツ用のスペース確保
Copy/* 広告スペースの事前確保 */
.ad-container {
min-height: 250px;
background-color: #f0f0f0;
}
/* スケルトンローディングの実装 */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
3. Webフォントの最適化
Copy/* font-displayプロパティの活用 */
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* FOUTを許可してレイアウトシフトを防ぐ */
}
/* フォールバックフォントとのサイズ調整 */
.custom-text {
font-family: 'CustomFont', Arial, sans-serif;
font-size: 16px;
size-adjust: 100%; /* フォント間のサイズ差を調整 */
}
4. アニメーションでのtransform活用
Copy/* 改善前：レイアウトに影響するプロパティを変更 */
.bad-animation {
transition: width 0.3s ease;
}
.bad-animation:hover {
width: 200px; /* レイアウトシフトの原因 */
}
/* 改善後：transformを使用してレイアウトに影響しない変更 */
.good-animation {
transition: transform 0.3s ease;
}
.good-animation:hover {
transform: scaleX(1.2); /* レイアウトシフトが発生しない */
}
実践的なCLS改善事例
事例1：ニュースサイトの記事ページ
記事画像の読み込みでCLSが0.25と悪化していたケース：
改善前の問題：
- 記事内画像にwidth/height未指定
- 広告の遅延読み込み
- SNSウィジェットの動的挿入
改善後：
- 全画像にaspect-ratioを設定
- 広告領域の事前確保
- SNSウィジェットの遅延読み込み
結果：CLS 0.25 → 0.05 に改善
事例2：ECサイトの商品詳細ページ
商品画像ギャラリーでCLSが発生していたケース：
改善前の問題：
- 商品画像の遅延読み込み
- レビューセクションの動的追加
- 関連商品の非同期読み込み
改善後：
- 画像ギャラリーの固定サイズ設定
- コンテンツエリアの事前確保
- プログレッシブローディングの実装
結果：CLS 0.18 → 0.03 に改善
高度な最適化テクニック
1. パフォーマンスバジェットの設定
Webサイトの性能を維持するために、パフォーマンスバジェット（性能予算）を設定することが重要です。
Copy// パフォーマンスバジェットの例
const performanceBudget = {
lcp: 2500, // 2.5秒
inp: 200, // 200ms
cls: 0.1, // 0.1
fcp: 1800, // 1.8秒
totalSize: 3000000, // 3MB
jsSize: 1000000, // 1MB
cssSize: 500000, // 500KB
imageSize: 2000000 // 2MB
};
2. Service Workerの活用
Copy// Service Workerを使用したキャッシュ戦略
self.addEventListener('fetch', event => {
if (event.request.destination === 'image') {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
}
});
3. Web Componentsの最適化
Copy// カスタム要素の遅延読み込み
class LazyImage extends HTMLElement {
connectedCallback() {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.loadImage();
observer.disconnect();
}
});
});
observer.observe(this);
}
loadImage() {
const img = document.createElement('img');
img.src = this.getAttribute('src');
img.alt = this.getAttribute('alt');
this.appendChild(img);
}
}
customElements.define('lazy-image', LazyImage);
4. モニタリングと自動化
Copy// パフォーマンス監視の実装
function monitorWebVitals() {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(console.log);
getFID(console.log);
getFCP(console.log);
getLCP(console.log);
getTTFB(console.log);
});
}
// 自動的なパフォーマンス測定
if ('performance' in window) {
monitorWebVitals();
}
業界別の最適化戦略
ECサイト向け最適化
商品画像の最適化
- 商品画像のWebP変換
- 画像の遅延読み込み
- 商品ズーム機能の最適化
ショッピングカート機能
- カート更新時のINP改善
- 決済フローの最適化
- 在庫情報の非同期更新
コーポレートサイト向け最適化
コンテンツマネジメント
- CMS最適化
- 静的サイト生成の活用
- CDN配信の最適化
お問い合わせフォーム
- フォームバリデーションの最適化
- 入力支援機能の実装
- 送信確認の UX改善
メディアサイト向け最適化
記事コンテンツ
- 記事画像の最適化
- 無限スクロールの実装
- 広告表示の最適化
動画コンテンツ
- 動画の遅延読み込み
- サムネイル最適化
- プレイヤー機能の軽量化
測定と継続的改善
定期的なモニタリング
Core Web Vitalsの改善は一度行えば終わりではありません。以下の点を定期的にチェックすることが重要です：
- 月次レポートの作成
- 競合サイトとの比較
- 新機能追加時の影響確認
- 季節的なトラフィック変動への対応
改善効果の測定
Copy// 改善効果の測定例
function measureImprovement() {
const beforeData = {
lcp: 3200,
inp: 350,
cls: 0.18
};
const afterData = {
lcp: 1800,
inp: 150,
cls: 0.05
};
const improvement = {
lcp: `${((beforeData.lcp - afterData.lcp) / beforeData.lcp * 100).toFixed(1)}%`,
inp: `${((beforeData.inp - afterData.inp) / beforeData.inp * 100).toFixed(1)}%`,
cls: `${((beforeData.cls - afterData.cls) / beforeData.cls * 100).toFixed(1)}%`
};
console.log('改善効果:', improvement);
}
まとめ
Core Web Vitalsの改善は、技術的な最適化だけでなく、ユーザーエクスペリエンスの向上とビジネス成果の向上に直結する重要な取り組みです。
重要なポイントの再確認
- LCP（Largest Contentful Paint）
- 画像最適化とサーバーレスポンス改善が鍵
- 2.5秒以内を目標に継続的な改善を実施
- INP（Interaction to Next Paint）
- JavaScript最適化とメインスレッドの効率化
- 200ミリ秒以下を目標に応答性を向上
- CLS（Cumulative Layout Shift）
- レイアウトシフトの予防が最優先
- 0.1以下を目標に視覚的安定性を確保
今後の取り組み
Core Web Vitalsは今後も進化し続ける指標です。定期的な測定と改善を継続し、ユーザーにとって快適なWebサイトを提供することが重要です。
特にランディングページでは、ユーザーの第一印象を決める重要な要素となるため、Core Web Vitalsの最適化は必須と言えるでしょう。LandingHubでは、これらの最適化を考慮したランディングページ作成サービスを提供しており、最初から高性能なページを構築することができます。
技術的な最適化は複雑に感じるかもしれませんが、一つずつ着実に改善を積み重ねることで、必ず結果は表れます。ユーザーの満足度向上とビジネス成果の向上のために、Core Web Vitalsの改善に取り組んでいきましょう。
