「ニトリネット」トップページの表示速度ボトルネック研究
カルーセルのCSS初期レイアウト、LCP画像のfetchpriority未指定、head内スクリプトのレンダリングブロックなどのボトルネックが観測され、これらを解消するシミュレーションではLighthouseスコアが99から最大100まで変化する結果が得られました。Core Web Vitalsには若干の改善余地が残ります。
詳細レポート 
ボトルネック一覧 
差分リポジトリ 
「お、ねだん以上。」でおなじみのニトリが運営する公式通販サイトです。家具・インテリアから日用品、家電まで幅広い商品を取り扱っています。Angular SSRで構築されており、Akamai CDNとImage Managerによる画像の自動AVIF/WebP変換、Brotli圧縮など、サイト基盤自体は高速に設計されています。そのようなサイトにおいて、表示速度上のボトルネックがどこに潜んでいるのかを研究しました。
Core Web Vitalsにつながる指標の改善ポテンシャル
観測されたボトルネックを仮に解消した場合、Lighthouse スコアは以下のような変化を示しました。
| 観測時点 | 解消シミュレーション後 |
|---|---|
 |  |
| 指標 | 観測時点 | 解消シミュレーション後 | 変化量 |
|---|---|---|---|
総合スコア | 99 | 100 | +1 |
LCP | 1.4秒 | 0.2秒 | -1.2秒 |
FCP | 0.2秒 | 0.2秒 | 変化なし |
SI | 1.9秒 | 1.2秒 | -0.7秒 |
TBT | 96ms | 63ms | -33ms |
CLS | 0.013 | 0.016 | +0.003 |
総合スコア は観測時点で既に99と高水準でしたが、LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が1.4秒から0.2秒へ、SI（Speed Index = ビューの視覚的な表示進捗の速さ）が1.9秒から1.2秒へと変化するシミュレーション結果が得られました。スコア上は僅差でも、体感的な表示速度に影響するボトルネックが存在していたことが読み取れます。
読み込みプロセスの変化を動画で体験
本サイトでは、解消シミュレーション後に大幅な表示速度の改善が見て取れます。
サードパーティータグの影響
本研究ではまず、サードパーティータグを段階的に除去することで、タグ全体が表示速度に与えている影響を観測しました。あわせて、タグ由来のノイズを取り除くことで、サイト自体のボトルネックを観察しやすくする狙いもあります。タグを完全に除去することは現実的ではありませんが、最適化によってどこまでの改善ポテンシャルがあるかを把握する材料としてご覧ください。
本セクションは「サードパーティータグがページスピードに影響を与えている」という現実を数値で示すとともに、それらを最適化することでどれだけのスピード改善ポテンシャルがあるかを示唆するものです。
オリジナルページの全516リソースのうち、サイト固有のリソースは282件（約5割）、サードパーティタグ由来のリソースは234件（約5割）を占めていました。ページスピードのボトルネックを正確に把握するには、まずこの約5割のタグを取り除いてサイト固有のパフォーマンスを分離する必要があります。
本サイトでは26種類のサードパーティータグが検出されました。大多数は Google Tag Manager 経由で読み込まれており、HTMLに直接記述されているのは Rtoaster と mPulse の2つです。
HTMLから直接読み込まれているタグ
| タグ名 | 種別 |
|---|---|
Rtoaster | パーソナライズ |
mPulse (Akamai Boomerang) | パフォーマンス監視 |
GTM経由で読み込まれているタグ
| タグ名 | 種別 | リソース数 |
|---|---|---|
Google Tag Manager | タグマネージャー | 27 |
Google Ads | 広告コンバージョン | 30 |
Google Analytics | アクセス解析 | 30 |
Facebook SDK / Pixel | SNSトラッキング | 28 |
staff-start.com | スタッフコーディネート | 22 |
visumo.jp | UGCコンテンツ | 12 |
TikTok Pixel | SNSトラッキング | 11 |
Twitter/X Ads | 広告コンバージョン | 11 |
RTB House | リターゲティング広告 | 9 |
GenieeSSP | 広告タグ | 6 |
Pinterest Tag | SNSコンバージョン | 6 |
Teads | 広告 | 5 |
Bing Ads (UET) | 広告コンバージョン | 5 |
Microsoft Clarity | ヒートマップ | 4 |
Criteo | リターゲティング広告 | 4 |
Yahoo! JAPAN Ads | 広告コンバージョン | 4 |
AppNexus | アドエクスチェンジ | 2 |
GTM Server-Side | サーバーサイドGTM | 2 |
Mercari EagleTag | 広告 | 1 |
SmartNews Ads | 広告 | 1 |
Datadog | ログ・モニタリング | 1 |
GDX Tag | 広告 | 1 |
UNCN (AudienceSearch) | 広告 | 1 |
GTM Snippet | 自社ホストGTM起動 | 1 |
段階的除去シミュレーションの結果
| 段階 | 除去対象 | LCP | SI | TBT | 総合スコア | 転送量 |
|---|---|---|---|---|---|---|
| 観測時点 | - | 1.4秒 | 1.9秒 | 96ms | 99 | 13.20MB |
| 第1段階 | Rtoaster | 0.9秒 | 1.9秒 | 107ms | 99 | - |
| 第2段階 | + mPulse | 0.6秒 | 1.7秒 | 108ms | 99 | - |
| 第3段階 | + GTM + 全GTM経由タグ | 0.6秒 | 1.7秒 | 103ms | 99 | 5.82MB |
サードパーティータグを全て除去した状態では、LCP が1.4秒から0.6秒へ変化し、転送量は13.20MBから5.82MBへ56%削減される結果が得られました。スクリプトファイル数も106から25へ大幅に減少しています。これはあくまで上限値ですが、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。
サイト固有のボトルネック
サードパーティータグの影響を取り除いた上で、サイト固有のボトルネック仮説を全5件検証しました。その中から、特に影響の大きかった3件を紹介します。
ボトルネック: カルーセルのCSS初期レイアウト
観察された状況
ファーストビューのカルーセル（Swiper）で、CSS初期状態が visibility: hidden; height: 900px に設定されていました。JavaScriptの初期化完了後に .initialized クラスが付与されて visibility: visible; height: auto へ変化する設計です。この仕組みにより、JavaScript初期化が完了するまでカルーセルのコンテンツが非表示のままとなり、LCP 対象の画像レンダリングが遅延していました。
解消シミュレーションの方法
CSS初期状態を visibility: visible; height: auto に変更し、JavaScript初期化前でもカルーセルのコンテンツが自然なサイズで表示されるようにしました。
シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
LCP | 0.6秒 | 0.2秒 | -0.4秒 |
SI | 1.7秒 | 1.2秒 | -0.5秒 |
総合スコア | 99 | 100 | +1 |
visibility: hidden が解除されたことで、カルーセル画像がJavaScript初期化を待たずにレンダリング可能となり、LCP が0.6秒から0.2秒へと大きく変化しました。このシミュレーション結果から、カルーセルのCSS初期レイアウトが LCP に与えていた影響の大きさが読み取れます。
ボトルネック: LCP画像のfetchpriority未指定
観察された状況
LCP 対象であるファーストビューカルーセルの最初の画像に、fetchpriority 属性が指定されていませんでした。画像自体はAkamai Image ManagerによりAVIF形式（約33KB）で配信されており、フォーマットの最適化は完了済みでしたが、ブラウザがこの画像を他のリソースより優先してダウンロードする指示がない状態でした。
解消シミュレーションの方法
LCP対象の画像に fetchpriority="high" 属性を追加しました。
シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
LCP | 0.3秒 | 0.3秒 | -0.1秒 |
FCP | 0.2秒 | 0.2秒 | 変化なし |
SI | 1.3秒 | 1.2秒 | -0.1秒 |
変化量としては小さいものの、HTML属性を1つ追加するだけという極めて軽微な変更で LCP と SI の短縮が得られており、fetchpriority 未指定が表示速度に影響していた要因の一つであったことが確認できます。
ボトルネック: head内スクリプトのレンダリングブロック
観察された状況
<head> 内に外部スクリプト6件とインラインスクリプト6件、計12個のスクリプト要素が配置されていました。外部スクリプトには defer や async 属性が付与されていましたが、インラインスクリプトにはこれらの属性を付与できないため、HTMLパーサーがその部分に到達した時点で即座に実行され、パースがブロックされていました。
解消シミュレーションの方法
<head> 内の全12個のスクリプト要素を </body> 直前に移動し、HTMLの主要コンテンツのパースが完了した後にスクリプトが実行されるようにしました。
シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
LCP | 0.3秒 | 0.2秒 | -0.1秒 |
TBT | 87ms | 73ms | -14ms |
SI | 1.2秒 | 1.1秒 | -0.1秒 |
head 内のインラインスクリプトによるHTMLパースのブロッキングが、初期レンダリングの遅延要因となっていたことがシミュレーション結果から読み取れます。LCP と TBT の両方に影響していた点が特徴的です。
まとめ
ニトリネットのトップページは、Angular SSR、Akamai CDN、Brotli圧縮といった高速な基盤を備えており、観測時点の 総合スコア は99と高水準でした。しかし、26種類ものサードパーティータグが転送量の半分以上を占めていたこと、カルーセルのCSS初期レイアウトが visibility: hidden でJavaScript初期化まで非表示になっていたこと、LCP 画像に fetchpriority 属性が未指定だったこと、head 内のインラインスクリプトがHTMLパースをブロックしていたことなど、複数のボトルネックが観測されました。
中でもカルーセルのCSS初期レイアウトの影響は大きく、この1点の解消シミュレーションだけで LCP が0.6秒から0.2秒へ変化する結果が得られています。サードパーティータグについても、全除去シミュレーションでは転送量が13.20MBから5.82MBへ56%削減されており、最適化の改善ポテンシャルの大きさが数値として示されました。
