「LOOK E-SHOP」トップページの表示速度ボトルネック研究
CDNリソースが外部ドメインから配信されている、インラインスクリプトがbody内に散在している、Google Fonts（日本語Webフォント）がレンダリングをブロックしているなどのボトルネックが観測され、これらを解消するシミュレーションではLighthouseスコアが72から最大100まで変化する結果が得られました。Core Web Vitalsの大きな改善が期待できます。
LOOK E-SHOP（ルック アット イーショップ）
詳細レポート 
ボトルネック一覧 
差分リポジトリ この研究は自主的に実施したものであり、サイト関係者からの依頼によるものではありません。掲載の取り下げを希望される場合はお問い合わせください。
SCAPA、KEITH、IL BISONTE、Marimekkoなど複数のファッション・ライフスタイルブランドを取り扱う、ルック公式のオンラインストアです。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。
Core Web Vitalsにつながる指標の改善ポテンシャル
観測されたボトルネックを仮に解消した場合、Lighthouse スコアは以下のような変化を示しました。
| 観測時点 | 全ボトルネック解消シミュレーション後 |
|---|---|
 |  |
| 指標 | 観測時点 | 解消シミュレーション後 | 変化量 |
|---|---|---|---|
総合スコア | 72 | 100 | +28 |
LCP | 7.4秒 | 0.2秒 | -7.1秒 |
FCP | 2.2秒 | 0.1秒 | -2.1秒 |
SI | 4.3秒 | 1.3秒 | -3.0秒 |
TBT | 0ms | 0ms | 変化なし |
CLS | 0.000 | 0.000 | 変化なし |
総合スコア が72から100へと28ポイント変化するというシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が7.4秒から0.2秒へ、FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）が2.2秒から0.1秒へと大きな変化が観測されており、これらの指標に強く影響するボトルネックが存在していたことが読み取れます。
読み込みプロセスの変化を動画で体験
本サイトでは、解消シミュレーション後にワンテンポ早い表示が見て取れます。
なお、本ページではJavaScriptによる画像の遅延読み込み制御が行われている関係で、ほとんどの画像が動画上では非表示のままとなっています。ご了承ください。
サードパーティータグの影響
本研究ではまず、サードパーティータグを段階的に除去することで、タグ全体が表示速度に与えている影響を観測しました。あわせて、タグ由来のノイズを取り除くことで、サイト自体のボトルネックを観察しやすくする狙いもあります。タグを完全に除去することは現実的ではありませんが、最適化によってどこまでの改善ポテンシャルがあるかを把握する材料としてご覧ください。
本セクションは「サードパーティータグがページスピードに影響を与えている」という現実を数値で示すとともに、それらを最適化することでどれだけのスピード改善ポテンシャルがあるかを示唆するものです。
オリジナルページの全182リソースのうち、サイト固有のリソースは107件（約6割）、サードパーティタグ由来のリソースは75件（約4割）を占めていました。ページスピードのボトルネックを正確に把握するには、まずこの4割のタグを取り除いてサイト固有のパフォーマンスを分離する必要があります。
HTMLから直接読み込まれているタグ
| タグ名 | 種別 |
|---|---|
Facebook Pixel（2件） | トラッキング |
Yahoo!リターゲティング | 広告リターゲティング |
FSpark | トラッキング / 広告 |
Scinable | レコメンド / 解析 |
Amazon Login SDK | ログイン機能 |
Google Ads（gtag.js） | 広告コンバージョン |
Google Analytics（UA） | アクセス解析 |
Google Analytics（ga.js） | アクセス解析（レガシー） |
Google Tag Manager 経由で読み込まれているタグ
| タグ名 | 種別 |
|---|---|
Microsoft Clarity | ヒートマップ / セッション録画 |
Criteo | 広告リターゲティング |
ValueCommerce | アフィリエイト |
AccessTrade | アフィリエイト |
ECレポート | EC分析 |
Google Merchant Center Analytics | 商品フィード分析 |
GA4 | アクセス解析 |
| 各種広告同期ピクセル（約20件） | 広告計測 |
除去シミュレーションの結果
| 除去段階 | 総合スコア | 変化量 |
|---|---|---|
| 観測時点（タグあり） | 72 | - |
Facebook Pixel 除去 | 73 | +1 |
Yahoo!リターゲティング / FSpark / Scinable / Amazon Login 除去 | 77 | +4 |
Google Ads / Google Analytics 除去 | 77 | 変化なし |
Google Tag Manager 除去 | 96 | +19 |
| 全タグ除去後 | 96 | +24（観測時点比） |
サードパーティータグを全て除去した状態では、総合スコア は72から96へ変化し、LCP は7.4秒から2.3秒へと短縮される結果が得られました。特に Google Tag Manager 1つの除去で総合スコアが19ポイント変化しており、GTM経由で読み込まれていた56件のリソースが表示速度に大きな影響を与えていたことが分かります。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。
サイト固有のボトルネック
サードパーティータグの影響を切り離した状態を起点として、サイト固有のボトルネックを調査しました。本研究では全13件のボトルネック仮説を検証しました。その中から、特に影響の大きかった3件を紹介します。
ボトルネック1: CDNリソースが外部ドメインから配信されている
観察された状況
Font Awesome CSSとiScroll JSの2つのリソースが、cdnjs.cloudflare.com（外部CDNドメイン）から配信されている状態が観測されました。外部ドメインへのアクセスには DNS ルックアップと TLS ハンドシェイクが必要であり、100〜300msの接続遅延が発生します。サイトのドメイン（www.e-look.jp）に対してはすでにHTTP接続が確立されているため、同一ドメインからの配信であればこの遅延は発生しません。
解消シミュレーションの方法
cdnjs.cloudflare.com から配信されていたFont Awesome CSSとiScroll JSを、サイトと同一ドメイン（www.e-look.jp）から配信するよう変更しました。
<!-- 変更前 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iscroll/5.2.0/iscroll.min.js"></script>
<!-- 変更後 -->
<link rel="stylesheet" href="https://www.e-look.jp/assets/font-awesome/css/all.min.css">
<script src="https://www.e-look.jp/assets/js/iscroll.min.js"></script>シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
FCP | 2.1秒 | 1.8秒 | -0.4秒 |
LCP | 2.3秒 | 1.9秒 | -0.4秒 |
総合スコア | 96 | 98 | +2 |
外部CDNドメインへの接続コスト（DNS ルックアップ + TLS ハンドシェイク）を解消することで、FCP と LCP がそれぞれ約0.4秒短縮される結果が得られました。パブリックCDNはライブラリの配信に便利ですが、接続先ドメインが増えること自体が表示速度のボトルネックになりうるという事実がこの結果から読み取れます。
ボトルネック2: インラインスクリプトがbody内に散在している
観察された状況
HTMLの <body> 内にインラインスクリプトが3ブロック散在している状態が観測されました。そのうち2ブロックは同一内容の重複でした。HTMLパーサーはインラインスクリプトに到達するたびに解析・実行を行うため、ページコンテンツの途中にスクリプトが挟まることでレンダリングが断続的に中断されていました。
解消シミュレーションの方法
散在していた3ブロックのインラインスクリプトを <body> 末尾に移動し、重複していた2ブロックを1つに統合しました。
シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
FCP | 1.8秒 | 1.7秒 | -0.1秒 |
LCP | 1.9秒 | 1.9秒 | -0.1秒 |
SI | 2.1秒 | 2.1秒 | -0.03秒 |
インラインスクリプトの移動と統合によって FCP が0.1秒短縮される結果が得られました。変化幅は大きくありませんが、HTMLパース途中でのJavaScript実行がレンダリングを中断していたという構造的な問題が、この結果から確認できます。
ボトルネック3: Google Fonts（日本語Webフォント）がレンダリングをブロックしている
観察された状況
サイトでは Google Fonts から Open Sans、Tinos、Noto Sans JP の3種類のWebフォントが <link rel="stylesheet"> タグで読み込まれていました。<link rel="stylesheet"> はレンダリングブロッキングリソースであり、CSSのダウンロードとパースが完了するまでページの描画が開始されません。3つのGoogle Fonts CSSそれぞれに対して fonts.googleapis.com への DNS ルックアップと TLS ハンドシェイク（各354〜451ms）が発生しており、さらに日本語フォント（Noto Sans JP）は文字数の多さから複数のフォントファイルがダウンロードされるため、影響は特に大きくなっていました。このシミュレーションはサイトのフォント表示がシステムフォントにフォールバックする（見た目が変わる）ことを前提に行いました。
解消シミュレーションの方法
Google Fonts の <link> タグ3件を除去し、フォント表示をシステムフォントにフォールバックさせました。
<!-- 除去した3件 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tinos:400i&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap">シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
LCP | 1.9秒 | 0.2秒 | -1.6秒（86.9%） |
FCP | 1.7秒 | 0.1秒 | -1.6秒（95.9%） |
SI | 2.1秒 | 1.3秒 | -0.8秒 |
総合スコア | 99 | 100 | +1 |
Google Fonts の読み込みを除去すると LCP が1.9秒から0.2秒へ、FCP が1.7秒から0.1秒へ変化するという結果が得られました。3つの外部CSSが生むレンダリングブロックと、日本語フォントの大きなデータ量が組み合わさることで、LCP と FCP に対して極めて大きな影響を与えていたことが、この数値から読み取れます。WebフォントをWebサイトで利用する場合 Google Fonts は有力な選択肢のひとつですが、日本語Webフォントの場合は文字数の多さからリソースサイズが大きくなり、表示速度への影響が英語フォントとは桁違いになるという事実がここに表れています。
まとめ
LOOK E-SHOP（www.e-look.jp）の表示速度を観測したところ、総合スコア 72、LCP 7.4秒、FCP 2.2秒という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。
観測されたボトルネックとその影響は次のように整理できます。
- サードパーティータグの集合体: 除去によって
総合スコアが +24、LCPが 5.1秒 短縮。特にGoogle Tag Manager単独で19ポイントの影響が観測されました。GTM経由で56件のリソースが読み込まれていたことが、その大きな影響の背景にあります。 - 外部CDNからのリソース配信: 同一ドメイン化で
FCPとLCPがそれぞれ約0.4秒短縮。接続先ドメインの増加がもたらす遅延が確認されました。 - インラインスクリプトの散在:
<body>末尾への移動と統合でFCPが0.1秒短縮。HTMLパース途中でのスクリプト実行による中断が観測されました。 - Google Fonts（日本語Webフォント）: 読み込み除去で
LCPが1.6秒、FCPが1.6秒短縮。レンダリングブロッキングCSSと日本語フォントのデータ量が組み合わさった影響の大きさが確認されました。
全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は72から100へ、LCP は7.4秒から0.2秒へと変化しました。観測された各要素がそれぞれ独立して指標に与えていた影響の大きさが、この一連のシミュレーションによって確認できた形です。
LOOK E-SHOP（ルック アット イーショップ）
この研究は自主的に実施したものであり、サイト関係者からの依頼によるものではありません。掲載の取り下げを希望される場合はお問い合わせください。
