PR：この記事にはアフィリエイトリンクが含まれます。
表示に時間がかかるページは、検索から来た人にも商品や記事を見に来た人にも負担になります。知りたい内容に届く前に離れてしまうことも。速度改善では、待ち時間や操作の反応を減らしましょう。
Core Web Vitalsはページの表示・応答・安定性を測る指標です。Chrome DevToolsで原因を探る視点と、改善手法を学べる書籍を紹介します。
| 書籍 | 参考価格（税込） | 主なテーマ | ページ数 |
|---|---|---|---|
 超速！ Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる | 2,838円 | DevTools、ネットワーク・描画・スクリプト | 288 |
 Webフロントエンド ハイパフォーマンス チューニング | 2,948円 | ブラウザ描画、画像、JavaScript、レイアウト | 352 |
 Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた | 3,278円 | Next.js、Core Web Vitals、Lighthouse | 312 |
表の金額は希望小売価格（税込）です。実売価格は時期や販売店によって変わるため、購入時に現在の価格を確かめてください。
指標の基本
Core Web Vitalsの柱はLCP、INP、CLSの三つです。LCPは主要コンテンツの表示、INPは操作への応答、CLSは意図しない画面のずれを測ります。それぞれ、見ている問題が異なります。
良好とされる目安はLCPが2.5秒以内、INPが200ミリ秒以内、CLSが0.1以下です。一度の最速値で判断せず、実際の利用者の75パーセンタイルを基準にします。
LCPが悪ければ、ファーストビューの画像や見出しが遅れていないか確認します。クリック後のJavaScript処理が重いならINP、画像や広告の読み込みで配置が動くならCLSが調査の糸口です。
三つの数値は同じ現象を測るものではありません。画面が先に出ても操作の反応が鈍いことがあります。逆に、操作が軽くても後から画面の配置がずれる場合も。困っている場面に対応する値を見ましょう。
LCPを縮める
記事のヒーロー画像や商品写真がLCPになる例はよくあります。画像の表示寸法に合ったファイルを使い、圧縮や適切な形式で転送量を抑えましょう。小さく表示する画像に大容量ファイルを送るのは無駄です。
ファーストビューの主役画像を遅延読み込みにすると、かえって表示が遅れる場合があります。最初に必要な画像は優先して読み込み、画面下の画像は必要になるまで後回しにする。この分け方なら、必要な画像を先に表示しやすくなります。
画面幅や解像度に合わせて画像を配信すれば、スマートフォンにデスクトップ用の大きなファイルを送らずに済みます。Next.jsのnext/imageやレスポンシブ画像は、こうした仕組みを実装する具体策です。
画像の容量を抑えてもLCPが改善しない場合があります。CSSやフォントの取得、サーバー応答に時間がかかるためです。表示開始前の待ち時間を分けて調べれば、修正する場所を絞れます。
INPと処理負荷
INPはクリックやタップ後に画面が応答するまでを測る指標です。2024年にFIDを置き換え、ページを使う間の複数の操作を評価します。
長時間のJavaScript処理でメインスレッドがふさがると、ボタンを押してもイベント処理が始まらず、反応が遅れます。DevToolsで長いタスクを探し、時間を使っているスクリプトや処理を確かめてみてください。
データ処理を小分けにし、不要な実行や入力のたびに走る処理を減らすと、操作への応答を妨げにくくなります。重い計算をWeb Workersへ移す手もありますが、データの受け渡しにかかる時間も測ってください。
JavaScriptを一律に削るだけでは解決しません。操作に必要な機能まで遅らせると不便になります。まず遅い操作を特定し、そのコードを見直すのが近道ですよね。
CLSを抑える
画像や広告が読み込まれ、読んでいる本文が後から押し下げられる。CLSでよく見られる画面のずれです。画像や動画に幅と高さを指定して領域を先に確保すれば、位置が動くのを防げます。
広告や埋め込みコンテンツの表示枠も、読み込み前から確保しておくと安定します。画面上部に通知を後から差し込むと本文が動く場合があるので、配置に注意しましょう。
Webフォントの切り替えで文字幅や折り返し位置が変わり、画面がずれることもあります。端末で見た目を確かめ、マージンやフォント設定を調整しましょう。CLSは数値と実際の画面の両方で確認します。
数字の読み違い
Lighthouseの総合スコアだけを目標にすると、実際の利用者が困る操作や表示の遅れを見落とす場合があります。複数の測定結果をまとめた値だからです。
DevToolsで行うラボ計測と利用者データは、端末や通信条件が異なります。ラボで改善しても現場の数値にすぐ反映されないことがあります。利用者数の少ないページは集計値も揺れやすいものです。
指標も時代とともに更新されます。FMPは非推奨となり、LighthouseのTTIも現在のCore Web Vitalsではありません。古い資料では指標名と測り方を現在のCore Web Vitalsと照らし合わせて読みましょう。
速度予算
ページの転送量やJavaScript容量に上限の目安を設けるのが、パフォーマンス予算です。画像や機能を追加する段階で、速度への影響を話し合うために使えます。
上限はサイトの目的や利用端末に合わせます。記事ページと動画の多いトップページで、同じ数値を使う必要はありません。過去の計測値を基準に、無理なく守れる範囲から始めるのが現実的です。
リリース後も同じページを定期的に測ると、改修で速くなった箇所や、機能追加で遅くなった箇所を追えます。数値をチームで共有し、悪化したときに原因を調べる流れが改善の継続につながります。
速度改善ガイド
『超速！ Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる』は、佐藤歩さんと泉水翔吾さんが著した技術評論社刊の本です。2017年11月23日発行、A5判288ページ。ネットワーク処理、レンダリング処理、スクリプト処理を扱います。
Chrome DevToolsでの調査と改善を各テーマで解説し、画像リソースの最適化やJavaScriptによる演算・DOM操作も取り上げます。FCP、FMP、TTI、Speed Indexとパフォーマンス予算も学べます。
2017年刊行で、現行のCore Web VitalsやINPを中心に扱う本ではありません。FCPなどの指標を押さえつつ、ネットワーク・描画・スクリプトに分けて改善を学びたい人におすすめです。
チューニング書
『Webフロントエンド ハイパフォーマンス チューニング』は久保田光則さん著、技術評論社刊の本です。2017年5月26日発行、A5判352ページ。ブラウザ描画の仕組みと個別の改善方法を扱います。
画像では形式選びやファイル最適化、端末に応じた切り替えを学べます。JavaScriptの実行モデルを踏まえ、ボトルネックを特定する方法も紹介。Web Workersや高頻度イベントの扱いも含まれます。
レイアウトツリーの性能計測と描画オーバーヘッドの分析も扱います。Core Web Vitals登場前の本なので、最新APIの解説を求める人より、ブラウザ描画の仕組みを理解したい人におすすめです。
Next.js入門書
『Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた』は翔泳社から2024年7月8日に発売された本です。B5判312ページ。
著者は柴田和祈さん、森茂洋さん、野崎洋平さんと千葉大輔さんです。Next.jsとmicroCMSで架空のコーポレートサイトを制作しながら、Core Web VitalsとLighthouseの計測を学びます。
画像の優先読み込みとレスポンシブ対応を扱い、next/imageによる最適化にも触れます。キャッシュを使ったパフォーマンス改善も取り上げます。
HTML/CSSまたはWordPressの知識があり、Webフレームワークは初めての人が対象です。Next.js制作に取り組む人なら、計測から実装まで一続きで学べる内容でしょう。
結論
現行のCore Web Vitalsを学ぶには、LCP・INP・CLSと利用者データを押さえ、DevToolsで原因を調べるのが実践的です。遅い箇所を直したら、同じ条件で再計測します。これが継続改善の基本です。
ブラウザの仕組みを広く学びたい人には『超速！ Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる』がおすすめです。描画やJavaScriptの個別手法を知りたい人には『Webフロントエンド ハイパフォーマンス チューニング』をおすすめします。
Next.js制作とCore Web Vitalsをまとめて学びたい人には『Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた』がおすすめです。サイト制作例に沿って実装を学びたい人に適しています。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
