「ロコンド」トップページの表示速度ボトルネック研究

靴・ファッションの通販サイトで、約5,000の公式取扱ブランド商品を即日出荷・サイズ交換無料・返品無料で提供しています。「自宅で試着、気軽に返品」をコンセプトに、レディース・メンズ・キッズのシューズやアパレル、バッグなどを幅広く取り扱うECサイトです。

Core Web Vitalsにつながる指標の改善ポテンシャル ​

観測されたボトルネックを仮に解消した場合、Lighthouse スコアは以下のような変化を示しました。

観測時点	全ボトルネック解消シミュレーション後

総合スコア が75から100（満点）へと25ポイント変化するというシミュレーション結果が得られました。特に FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）が4.0秒から1.0秒へ、LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が4.1秒から1.1秒へと大きな変化が観測されており、これらの指標に強く影響するボトルネックが存在していたことが読み取れます。

読み込みプロセスの変化を動画で体験 ​

本サイトでは、解消シミュレーション後に大幅な表示速度の改善が見て取れます。

サードパーティータグの影響 ​

詳細レポート

本研究ではまず、サードパーティータグを段階的に除去することで、タグ全体が表示速度に与えている影響を観測しました。あわせて、タグ由来のノイズを取り除くことで、サイト自体のボトルネックを観察しやすくする狙いもあります。タグを完全に除去することは現実的ではありませんが、最適化によってどこまでの改善ポテンシャルがあるかを把握する材料としてご覧ください。

本セクションは「サードパーティータグがページスピードに影響を与えている」という現実を数値で示すとともに、それらを最適化することでどれだけのスピード改善ポテンシャルがあるかを示唆するものです。

オリジナルページの全590リソースのうち、サイト固有のリソースは523件（約9割）、サードパーティタグ由来のリソースは67件（約1割）を占めていました。ページスピードのボトルネックを正確に把握するには、まずこの1割のタグを取り除いてサイト固有のパフォーマンスを分離する必要があります。なお、「サードパーティタグ」の67件にはjQuery等の公開JavaScript CDN（cdnjs・jsdelivr等）やGoogle Fontsは含まれていません。これらはすべてGTM・広告・計測・越境EC連携などのタグ系リソースで構成されています。

HTMLから直接読み込まれているタグ ​

GTM経由で読み込まれているタグ ​

HTMLに直接記述されているタグは Yahoo Tag と Google Tag Manager の2件のみで、それ以外のタグはすべて GTM 経由で読み込まれていました。GTM を除去すると、上記のタグが連鎖的に読み込まれなくなります。

サードパーティータグを全て除去した状態では、リソース数が590件から523件へ67件削減され、メインスレッド占有時間が約257ms解放されました。ただし元々 TBT が0msであったため、総合スコア への直接的な影響は計測揺らぎの範囲（75から73）にとどまりました。このサイトにおいてはサードパーティータグが 総合スコア に与える直接的な影響は限定的であったものの、67件のリソース削減によって以降のボトルネック特定の精度が向上しました。

サイト固有のボトルネック ​

サードパーティータグの影響を切り離した状態を起点として、サイト固有のボトルネックを調査しました。本研究では全12件のボトルネック仮説を検証しています。その中から、特に影響の大きかった3件を紹介します。

ボトルネック1: パブリックCDNリソースが外部ドメインから配信されている ​

詳細レポート 差分コミット

観察された状況 ​

4つの外部CDNドメイン（ajax.googleapis.com、cdn.jsdelivr.net、cdnjs.cloudflare.com、unpkg.com）から合計28件のJavaScript/CSSライブラリが読み込まれている状態が観測されました。jQuery、UIKit、Vue.js、Slick Carouselなど多くのライブラリが外部CDN経由で配信されており、各ドメインへのDNS解決とTLSハンドシェイクのコストが累積していました。

解消シミュレーションの方法 ​

28件のリソースをすべてHTMLと同一ドメイン（www.locondo.jp）から配信するように変更し、外部ドメインへの接続コストを解消した状態を計測しました。

シミュレーション結果 ​

このシミュレーション結果から、外部CDNドメインへの接続コストが FCP や LCP に与えていた影響の大きさが読み取れます。4つのドメインそれぞれに対してDNS解決・TCP接続・TLSハンドシェイクが発生するコストが累積し、総合スコア で12ポイント分のボトルネックとなっていました。本研究で最も大きな変化が観測されたボトルネックです。

ボトルネック2: CSSが外部ドメインから配信されている ​

詳細レポート 差分コミット

観察された状況 ​

21件のCSSファイルが、HTMLドメイン（www.locondo.jp）とは異なるドメイン（media.aws.locondo.jp）から配信されている状態が観測されました。CSSはレンダリングブロックリソース（読み込みが完了するまでページの描画が停止するリソース）であるため、外部ドメインへの接続コストが FCP に直結する構造になっていました。

解消シミュレーションの方法 ​

21件のCSSファイルをHTMLと同一ドメインから配信するように変更し、外部ドメインへの接続コストを解消した状態を計測しました。

シミュレーション結果 ​

CSSはレンダリングブロックリソースであるため、配信元ドメインへの接続コストがそのまま FCP の遅延に反映されます。同一ドメイン化によって FCP が0.7秒短縮されたこのシミュレーション結果から、CSSの配信ドメインが FCP に与えていた影響の大きさが読み取れます。

ボトルネック3: Google Fontsの巨大なアイコンフォント ​

詳細レポート 差分コミット

観察された状況 ​

Google Fonts から Material Symbols Outlined（アイコンフォント、3.88MB）と Lato（欧文フォント、3ウェイト、42KB）が読み込まれている状態が観測されました。特に Material Symbols Outlined のサイズが3.88MBと巨大で、フォントトラフィック全体の大部分を占めていました。このフォントの読み込みがネットワーク帯域を大きく占有し、他のリソースの読み込みにも影響を与えていた構造が推測されます。

このシミュレーションではフォントの読み込みを削除しており、サイトの見た目（フォントの表示）が変わることを前提として行いました。

解消シミュレーションの方法 ​

Google Fonts関連の link 要素をすべて削除し、フォントの読み込みを停止した状態を計測しました。削除後はシステムフォント（sans-serif）にフォールバックされます。

シミュレーション結果 ​

フォントトラフィックが4.0MBから79KBへ3.92MB削減されたことで、LCP が0.7秒、FCP が0.6秒短縮され、総合スコア 100（満点）に到達するシミュレーション結果が得られました。3.88MBの Material Symbols Outlined がネットワーク帯域を圧迫し、ページ全体のリソース読み込みに影響を与えていたことがこの結果から読み取れます。アイコンフォントとして全文字セットを読み込む構造が、表示速度に対して無視できない大きさのボトルネックとなっていたことが分かります。

なお、アイコンフォントをそのまま使い続けたい場合でも、実際に使用しているアイコンだけを含めたサブセットを作成し自社ドメインから配信することで、本シミュレーションに近い大幅な削減効果が得られる可能性があります。

まとめ ​

ロコンド（www.locondo.jp）のトップページを観測したところ、総合スコア 75、LCP 4.1秒、FCP 4.0秒という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。

観測されたボトルネックとその影響は次のように整理できます。

• パブリックCDNリソースの外部ドメイン配信: 4つの外部CDNドメインから28件のリソースを読み込む構造が、FCP を1.1秒、総合スコア を12ポイント押し下げていました。
• CSSの外部ドメイン配信: 21件のCSSが別ドメインから配信されていたことで、レンダリングブロックが発生し FCP に0.7秒の影響が観測されました。
• Google Fontsの巨大アイコンフォント: 3.88MBの Material Symbols Outlined がネットワーク帯域を圧迫し、LCP を0.7秒、FCP を0.6秒押し上げていました。

全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は75から100（満点）へ、FCP は4.0秒から1.0秒へと変化しました。特にこのサイトでは、外部ドメインへの接続コストが表示速度に与える影響が際立って大きく、CDNリソースとCSSの同一ドメイン化だけで 総合スコア が81から94へ13ポイント変化する結果が得られています。観測された各要素がそれぞれ独立して指標に与えていた影響の大きさが、この一連のシミュレーションによって確認できた形です。