WEBサイトの表示速度改善ツール「LandingHub」（運営：株式会社TeN）の責任者である井上は、Chrome DevToolsを活用したLCP（Largest Contentful Paint）改善の実践的手法を公開いたしました。
本手法は、WEBサイト運営者や制作会社が直面する表示速度の課題を、具体的なステップで解決できる内容となっています。
発表の背景
GoogleはCore Web Vitalsをランキング要因として重視しており、特にLCP（最大コンテンツの描画時間）は、ユーザー体験とSEO評価に直結する重要指標となっています。
最新の調査では、国内大手ECサイトの75.1%がGoogleが推奨する2.5秒以内の基準を達成している一方、多くの企業サイトでは依然として課題を抱えている状況です。
このような背景から、実務で即座に活用できる具体的な改善手法のニーズが高まっています。
DevToolsを使ったLCP改善の実践的手法
LandingHub責任者の井上が提唱する改善手法は、計測→分析→改善の3段階で構成され、誰でも実践できる具体的なステップを提供します。
※下記よりも更に詳細を確認したい場合はLCP改善の記事でも紹介しています。
【第1段階】LCPの計測と要素特定と計測環境の基準設定
STEP 1-1：計測環境の基準設定
正確な改善のためには、実際のユーザー環境を反映した計測が不可欠です。
-
Google Analyticsで訪問デバイス比率を確認（モバイル60%以上なら4G環境を基準に）
-
Chrome DevToolsの「ネットワーク」タブでスロットリング設定
（推奨：「低速4G」で実ユーザーの体感速度を再現サイト特性に合わせた基準を明確化させます。）
STEP 1-2：LCPの計測と対象要素の特定
DevToolsの「パフォーマンス」タブを活用し、LCP要素を正確に特定します。
「DevTools」→「パフォーマンスタブ」を開きページを再読み込みします。
上記画像の黄色枠でLCP読み込み時間を確認、赤色枠でLCP対象ファイル（画像やテキストブロック）を特定クリックしてHTMLソースと該当箇所を確認。
STEP 1-3：ネットワークタブで読み込み状況を可視化
「ネットワーク」タブでウォーターフォール（各ファイルの読み込みタイミング）を表示し、LCP要素の読み込み開始位置と完了位置を確認します。
改善のポイント： LCPの横棒（緑から青のライン）ができるだけ左側（早いタイミング）で終わっているかをチェック。
【第2段階】LCP遅延の原因分析
分析①：ダウンロード速度の確認（サーバー帯域チェック）
手順としては、LCPに該当する画像URLのみをChrome DevToolsのネットワークで読み込みます。
LCP画像単体を「スロットリングなし」で読み込み、サーバーの実力値を測定します。
計算式
画像サイズ（KB）÷ コンテンツダウンロード時間（秒）× 8 ÷ 1024 = 読み込み速度（Mbps）
判定基準
100Mbps以上：問題なし
100Mbps未満：サーバー改善を検討
分析②：サーバー応答時間（TTFB）のチェック
サーバー応答時間のチェックの方法として、まずはLCPの画像をChrome DevToolsの「ネットワーク」にかけて確認します。
ウォーターフォールの「サーバーの応答を待機しています」（緑バー）の数値を確認。
判定基準
200ms（0.2秒）以内：理想的
200ms以上：サーバーアプリケーションやデータベースの最適化が必要
合わせて、ドキュメント自体のサーバー応答速度も確認し、PHPやデータベース処理の遅延がないかチェックします。
分析③：コンテンツ容量のチェック
ネットワークタブで「タイプ」と「サイズ」列を確認し、LCP画像のファイルサイズを特定。
改善目安
速度重視なら10〜30KB程度まで圧縮100KB以上の画像は大幅な改善余地あり
分析④：LCP読み込みの阻害要因チェック
LCP画像単体での読み込み時間とページ全体での読み込み時間を比較します。
まずは、下記の手順でページ全体を読み込みます。
「ページ全体を開く＞ネットワーク＞低速4G」にして度読み込みします。
次に下記の手順でLCP画像単体を読み込みます。
「LCP画像URLを開く＞ネットワーク＞低速4G」にして度読み込みします。
上記画像の例であれば、単体6.99秒 vs ページ全体21.8秒 → 約3倍の遅延が発生
要はLCPの画像以外の読み込みに2/3程度のリソースを割かれていることになります。
阻害リソースの特定方法
LCP読み込み開始（オレンジライン）から完了（緑ライン）の間に読み込まれる全リソースが対象CSS、JavaScript、フォント、他の画像などが該当
【第3段階】具体的な改善施策（優先度順）
改善手順①：プリロード（preload）の活用【優先度：最高】
LCPがHTMLの<head>読み込み後に開始されている場合、<link rel=”preload”>で優先読み込みを設定。
headに<link rel=”preload”>で画像を指定する形で対応します。
改善手順②：画像サイズの最適化【優先度：最高】
画像サイズのリサイズの実施
サイズ変更のポイントとして、下記は押さえておきましょう。
-
画像サイズは横幅412pxほどを目安にする（スマホ）
-
高画質を維持したい場合は横幅1,179pxを目安にする（スマホ）
-
PC用の画像はコンテナーのサイズに合わせた画像サイズにする
-
サイズの解像度は72基準にする
画像の圧縮の実施
ウェブツールなどを活用して画像の圧縮を実施
次世代フォーマット変換
画像の拡張子がgifやjpg、pngとなっている場合は、AVIFやwebpなどの次世代フォーマット画像に変換することで画像サイズを小さくできます。
改善手順③：LCP読み込みを阻害するリソースの最適化【優先度：高】
未使用ファイルの削除
ネットワークタブで全読み込みファイルを確認使用していないCSS、JavaScript、画像、フォントを削除GTM（Googleタグマネージャー）内の未使用タグも整理を行います。
ファーストビュー以外の画像を遅延読み込み
ファーストビュー以外の画像要素（LCP画像以外）の画像の遅延読み込みに「loading=”lazy”」を利用します。
設置は簡単で遅延読み込みさせたい画像要素に「loading=”lazy”」を挿入するだけです。
内部CSSの実装
ファーストビューに必要なCSSだけを<head>内にインライン化その他のCSSはbody内で遅延読み込みさせます。
クリティカルCSSツールなどを活用して実装可能です。
JavaScriptの最適配置
javascriptについては1つのファイルでまとめてしまうのではなく、必要に合わせてファイルを分割し必要なDOMの直後に置くようにします。
特にカルーセル、スライダー、アコーディオンなどのコンテンツごとにjavascriptを分けて、最適なタイミングで読み込ませるようにします。
CSS・JavaScriptのミニファイ（圧縮）
ページ上で使用されているCSSやjavascriptファイルをミニファイ（圧縮）させます。
ミニファイツールなどで圧縮.min.css、.min.jsとして実装できます。
フォントの最適化
フォントは主に下記の内容で最適化をかけていきます。
-
サブセット化（使用する文字のみに限定）
-
WOFF2フォーマット推奨
-
JavaScript制御で読み込みタイミングを最後に遅延
改善手順④：サーバーの最適化【優先度：中】
アプリケーションの確認
使用しているアプリケーションについて改善できる点があるか確認の実施を行います。
目標：サーバー応答30〜40ms以下
データベースの最適化
まずは使用しているデータベースサーバーのコントロールパネルを確認し下記の項目をチェックしてみてください。
-
CPU使用率
-
メモリ使用量
-
ネットワーク帯域
-
ストレージスループット
これらが頭打ちになっていないかを確認しましょう。
サイトの内容によって最善の方法は変わりますが、データベースサーバーが分かれているかどうかや、データの取得方法などエンジニアの方と確認してみるといいでしょう。
サーバー地域の確認
サーバーはユーザーがアクセスする場所から距離が遠いと物理的に通信にも時間がかかります。
そのため、サービスを展開する国やエリアにあるサーバーを選ぶ。
スペックの高いサーバーの利用を検討
利用状況を確認し、使用状況が混雑している場合は下記のスペックが高いサーバーの使用を検討。
・CPU
・ネットワーク
・ストレージ
・メモリ
CDNの導入を検討
CDNサービスを導入検討。
導入の場合は下記のような項目の設定をサイトに合わせて最適化をかける。
-
キャッシュ対象
-
キャッシュ時間
-
階層の最適設定
改善手順⑤：レスポンシブ画像の実装【優先度：中】
画像を使用しているサイトであれば、レスポンシブ画像は導入するようにしましょう。
基本的にはsrcset属性とsizes属性を使用して下記のような記述で作成します。
改善手順⑥：各種キャッシュの活用【優先度：中】
キャッシュも色々なキャッシュがありますが、下記のキャッシュは抑えておきましょう
-
ブラウザキャッシュ
-
CDNキャッシュ
-
サーバーキャッシュ
LCP改善手順⑦：サーバー側圧縮の有効化
サーバー側の圧縮（Gzip/Brotli）は、HTML、CSS、JavaScriptなどのテキストベースのファイルを圧縮してから配信する技術です。
適切に設定することで、ファイルサイズを50〜80%削減し非常に効果的な施策です。
井上 寛生（Hiroiku Inoue）プロフィール
井上 寛生：株式会社TeN 執行役員 / LandingHub 事業責任者 / 技術責任者
大学院修了後、株式会社TeNに新卒入社。
開発部門をゼロから立ち上げ、採用・育成を一手に担い、未経験から育成したエンジニアチームを組成。
2021年にWebサイト高速化ソリューション「LandingHub」を立ち上げ、企画・開発・グロースを牽引。現在はプロダクト責任者として、Web高速化の社会実装を推進している。
LandingHubについて
「LandingHub」は、WEBサイトの表示速度を自動で改善するツールです。
DevToolsを使った手動での分析・改善が難しい企業様でも、簡単にCore Web Vitalsのスコアを向上させることができます。
サービスの主な機能
-
自動画像最適化（次世代フォーマット変換・圧縮）
-
リソース読み込み優先度の自動調整
-
レンダリングブロックの自動解消
-
独自の遅延読み込み機能（特許技術）
-
リアルタイムパフォーマンス監視
-
DevToolsベースの詳細分析レポート
概要
LandingHubは、Webサイトにタグを1行追加するだけで、画像・動画の圧縮、次世代フォーマット変換、CDN最適化などを自動で行い、 Webページの表示速度・CVR・SEOをトータルで改善するSaaSです。
URL：https://landinghub.jp/
無料速度診断ツール：https://www.landinghub.net/diagnosis
会社名：株式会社TeN
所在地：東京都渋谷区渋谷3-17-4 山口ビル7階
代表取締役：廣瀬 由典
設立：2019年1月
事業内容：Webマーケティング支援、デザイン制作、テクノロジーソリューション事業等
URL：https://www.andco.group/
