0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@jiliphilti

Core Web Vitals実践入門：LCP・INP・CLSを改善するフロントエンド最適化

0
Posted at

はじめに

Webサービスの使いやすさを考えるとき、デザインや機能だけでなく「どれだけ速く、安定して操作できるか」も非常に重要です。

ページが表示されるまでに時間がかかったり、ボタンを押しても反応が遅かったり、読み込み中にレイアウトが大きく動いたりすると、ユーザー体験は大きく低下します。

こうした体験を数値で評価する代表的な指標が Core Web Vitals です。

本記事では、

  • LCP
  • INP
  • CLS

という3つの主要指標を中心に、Webフロントエンドのパフォーマンスを改善する基本的な方法を紹介します。

KRCLUBでも、安定したデジタルサービスを構築するうえで、フロントエンドパフォーマンスとユーザー体験の最適化を重要な技術テーマとして注目しています。

1. Core Web Vitalsとは

Core Web Vitalsは、Webページのユーザー体験を測定するための指標です。

代表的な3つの指標は以下です。

指標 評価対象
LCP 主要コンテンツの表示速度
INP ユーザー操作への応答性
CLS レイアウトの安定性

単純に「ページが開いた」だけではなく、ユーザーが実際に快適に操作できるかを評価する点が特徴です。

2. LCPとは

LCPは Largest Contentful Paint の略です。

画面内の主要コンテンツが表示されるまでの時間を測定します。

例えば、

  • 大きな画像
  • メインタイトル
  • ヒーローバナー
  • 大きなテキストブロック

などが対象になります。

イメージ：

Request
  ↓
HTML
  ↓
CSS
  ↓
Image
  ↓
Main Content Display

この最後の主要コンテンツ表示までが遅いと、LCPが悪化します。

3. LCPを改善する方法

画像を最適化する

大きな画像はLCP悪化の原因になりやすいです。

改善ポイント：

  • WebPやAVIFを利用する
  • 必要以上に大きい画像を使わない
  • widthとheightを明示する
  • CDNを利用する

Next.jsでは、Imageコンポーネントを利用できます。

import Image from "next/image";

export default function Hero() {
  return (
    <Image
      src="/hero.webp"
      width={1200}
      height={600}
      alt="Hero"
      priority
    />
  );
}

重要なファーストビュー画像にはpriorityを指定することで、読み込み優先度を上げられます。

4. 不要なJavaScriptを減らす

JavaScriptが多すぎると、ブラウザの解析や実行に時間がかかります。

特に初期表示に必要ないコードまで最初から読み込むと、表示速度が低下します。

Dynamic Importを使う方法があります。

import dynamic from "next/dynamic";

const Chart = dynamic(
  () => import("./Chart"),
  {
    ssr: false
  }
);

これにより、必要になったタイミングでコンポーネントを読み込めます。

5. INPとは

INPは Interaction to Next Paint の略です。

ユーザーが、

  • ボタンをクリックする
  • メニューを開く
  • 入力フォームを操作する

といったアクションを行ったとき、画面が反応するまでの時間を評価します。

例えば、

Click
  ↓
JavaScript Processing
  ↓
State Update
  ↓
Render

この処理が長いと、ユーザーは「反応が遅い」と感じます。

6. INPを改善する方法

長時間タスクを減らす

JavaScript処理が長時間メインスレッドを占有すると、操作への反応が遅れます。

例えば、大量データを一度に処理する場合です。

const result = hugeArray.map(item => {
  return expensiveFunction(item);
});

改善方法として、

  • 処理を分割する
  • Web Workerを利用する
  • 必要なデータだけ処理する

などがあります。

イベント処理を軽量化する

例えばscrollイベントで重い処理を毎回実行すると、パフォーマンスが低下します。

window.addEventListener("scroll", () => {
  heavyFunction();
});

ThrottleやDebounceを利用して処理頻度を下げます。

const handler = debounce(() => {
  heavyFunction();
}, 200);

7. Reactで不要な再レンダリングを減らす

Reactアプリケーションでは、不要な再レンダリングもINPへ影響することがあります。

例えば、

const Component = React.memo(function Component(props) {
  return <div>{props.title}</div>;
});

React.memoを利用することで、propsが変化していない場合の再レンダリングを抑制できます。

また、

  • useMemo
  • useCallback

も適切に利用できます。

ただし、何でもMemo化すればよいわけではありません。

実際のパフォーマンスを測定してから導入することが重要です。

8. CLSとは

CLSは Cumulative Layout Shift の略です。

ページ読み込み中に、コンテンツの位置がどれだけ移動したかを評価します。

例えば、

Before

[Title]
[Button]


After Image Loaded

[Large Image]
[Title]
[Button]

のように画像読み込み後に全体が下へ移動すると、CLSが悪化します。

9. CLSを改善する方法

画像サイズを事前指定する

悪い例：

<img src="banner.jpg">

改善例：

<img
  src="banner.jpg"
  width="1200"
  height="600"
>

あらかじめ領域を確保しておくことで、読み込み後のレイアウト移動を防げます。

動的コンテンツ用のスペースを確保する

広告やおすすめコンテンツなどを後から表示する場合も、事前に高さを確保します。

.recommendation-area {
  min-height: 300px;
}

これにより、コンテンツ追加時のレイアウト移動を抑えられます。

10. Webフォントも注意する

Webフォントの読み込みによって文字サイズが変わると、レイアウトが移動する場合があります。

改善方法：

  • font-displayを設定する
  • 使用するフォント数を減らす
  • 必要なウェイトだけ読み込む

例：

@font-face {
  font-family: "ExampleFont";
  src: url("/font.woff2");
  font-display: swap;
}

11. パフォーマンスは実際に測定する

最適化で重要なのは、感覚ではなく数値で確認することです。

利用できるツール：

  • Lighthouse
  • Chrome DevTools
  • PageSpeed Insights
  • Web Vitals API

ブラウザ側で計測する例：

import {
  onCLS,
  onINP,
  onLCP
} from "web-vitals";

onCLS(console.log);
onINP(console.log);
onLCP(console.log);

これによって実際の指標を取得できます。

12. Lab DataとField Data

Webパフォーマンスデータには、大きく分けて2種類あります。

Lab Data

一定のテスト環境で測定するデータです。

メリット：

  • 再現しやすい
  • 開発中に確認しやすい

Field Data

実際のユーザー環境から取得するデータです。

メリット：

  • 実際の利用状況を反映する
  • デバイスや通信環境の違いを把握できる

理想的には両方を利用します。

13. モバイル環境を重視する

WebサービスをPCだけでテストすると、実際の問題を見逃す場合があります。

特にモバイルでは、

  • CPU性能
  • メモリ
  • 通信速度
  • 画面サイズ

に差があります。

そのため、

Desktop Test
+
Mobile Test
+
Real User Data

を組み合わせて確認することが重要です。

14. パフォーマンスバジェットを設定する

開発チームでは、あらかじめパフォーマンス目標を設定する方法があります。

例えば、

JavaScript < 300KB
LCP < 2.5s
INP < 200ms
CLS < 0.1

のように基準を設定します。

これをCI/CDに組み込むことで、機能追加によるパフォーマンス悪化を早期に発見できます。

15. KRCLUBが注目するユーザー体験とパフォーマンス

KRCLUBでは、Webサービスの品質を考える際、デザインや機能だけでなく、ユーザーが実際に感じる速度と操作性も重要だと考えています。

特に、

  • 初期表示速度
  • 操作レスポンス
  • モバイル最適化
  • APIレスポンス
  • レイアウト安定性

といった要素は、継続的に改善すべき技術テーマです。

Webサービスの利用環境はユーザーごとに異なります。

そのため、開発環境で高速に動いているだけでは十分ではありません。

実際の利用データを収集しながら改善することが重要です。

16. AI機能とCore Web Vitals

現在では、WebサービスにAI機能を組み込むケースも増えています。

例えば、

  • AIチャット
  • AI検索
  • 自動要約
  • レコメンド

などです。

しかしAI処理は時間がかかる場合があります。

そのため、

User Request
   ↓
Immediate UI Feedback
   ↓
AI Processing
   ↓
Streaming Response

のように、ユーザーを待たせすぎない設計が重要です。

ローディング表示、ストリーミング、非同期処理などを組み合わせることで、体感速度を改善できます。

まとめ

Core Web Vitalsは、Webサービスのユーザー体験を数値で評価する重要な指標です。

特に重要なのは、

  • LCP：表示速度
  • INP：操作レスポンス
  • CLS：レイアウト安定性

です。

改善ポイントとしては、

  • 画像最適化
  • JavaScript削減
  • 不要な再レンダリング抑制
  • レイアウト領域の事前確保
  • Webフォント最適化
  • 実ユーザーデータの計測

があります。

KRCLUBでも、Webサービスをより快適に利用できる環境を目指し、フロントエンドパフォーマンスとユーザー体験の継続的な改善に注目しています。

高性能なWebサービスとは、機能が多いサービスではなく、ユーザーがストレスなく利用できるサービスです。

Core Web Vitalsを継続的に測定することは、その状態を実現するための重要な第一歩になるでしょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?