Webページの読み込み速度は、ユーザー体験だけでなく SEO でも重要な要素です。特に Largest Contentful Paint (LCP) は、ページが「実際に使える」状態になるまでの時間を示す指標として、Google の Core Web Vitals に採用されています。この記事では、プログラミング初心者でも手軽に LCP や FID、CLS といった主要指標を取得し、改善のヒントを得る方法を解説します。
1. 主要指標の概要
| 指標 | 意味 | 推奨値 |
|---|---|---|
| LCP (Largest Contentful Paint) | ページ内で最大のテキスト・画像が描画されるまでの時間 | 2.5 秒未満 |
| FID (First Input Delay) | ユーザーが最初に操作したときの遅延 | 100 ms未満 |
| CLS (Cumulative Layout Shift) | レイアウトの予期せぬ変動の合計 | 0.1未満 |
LCP が遅いと、ユーザーは「ページがまだ読み込まれていない」と感じて離脱しやすくなります。まずは 測定 から始めましょう。
2. ブラウザの Performance API で測定
最新のブラウザは PerformanceObserver を提供しており、JavaScript だけでリアルタイムに指標を取得できます。以下のコードをページの <head> 直下に貼り付けるだけで、コンソールに LCP が出力されます。
<script>
// LCP を取得してコンソールに表示
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
const lastEntry = entries[entries.length - 1];
console.log('LCP:', Math.round(lastEntry.renderTime));
}).observe({ type: 'largest-contentful-paint', buffered: true });
// FID と CLS も同時に取得（任意）
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'first-input') {
console.log('FID:', entry.processingStart - entry.startTime);
} else if (entry.entryType === 'layout-shift' && !entry.hadRecentInput) {
console.log('CLS:', entry.value);
}
}
}).observe({ type: 'first-input', buffered: true });
new PerformanceObserver((list) => {
let clsValue = 0;
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) clsValue += entry.value;
}
console.log('CLS (累積):', clsValue);
}).observe({ type: 'layout-shift', buffered: true });
</script>
コードのポイント
-
buffered: trueを指定すると、ページロード前に発生したイベントも取得できます。 -
largest-contentful-paintは画像やテキストブロックの描画完了時に発火し、renderTimeが実際の表示時間です。 - 開発環境で Chrome DevTools の Performance タブを併用すると、可視化されたタイムラインと合わせて確認できます。
3. Next.js での実装例
Next.js を使っている場合、_app.js に上記スクリプトを組み込むと、全ページで自動的に測定できます。以下は最小構成です。
// pages/_app.js
import '../styles/globals.css';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
useEffect(() => {
if (typeof window !== 'undefined') {
// ここに先ほどの PerformanceObserver コードを貼り付け
}
}, []);
return <Component {...pageProps} />;
}
export default MyApp;
このようにコンポーネントのマウント時に実行すれば、SSR（サーバーサイドレンダリング）でもクライアント側の実測値が取得できます。
4. 改善のヒント
測定結果が期待値を下回っている場合、以下の対策を試してみましょう。
| 対策 | 効果 |
|---|---|
| 画像を WebP などの次世代フォーマットに変換 | ダウンロードサイズ削減 → LCP 短縮 |
next/image の priority 属性で重要画像を先読み |
重要コンテンツの描画を早める |
| CSS の Critical CSS 抽出 | 初期レンダリングブロックを減少 |
| 不要なサードパーティスクリプトの遅延ロード | FID と CLS の低減 |
5. まとめ
- LCP はユーザーが実感するページ速度の指標で、2.5 秒未満が目安です。
-
PerformanceObserverを使えば、コードを書くだけで簡単に測定できます。 - Next.js でも同様に組み込めるので、開発フローに自然に取り入れられます。
- 測定結果を基に画像最適化や CSS 最適化を行うと、実際のパフォーマンスが大幅に改善します。
実際に手を動かして測定・改善を繰り返すことで、初心者でも確実に「速い」サイトを作れるようになります。ぜひ本記事のコードを試して、あなたのページの LCP をチェックしてみてください。