「高島屋オンラインストア」トップページの表示速度ボトルネック研究
依存されていないスクリプトの同期読み込み、CSSが12ファイルに分散、Webフォントのfont-display未設定などのボトルネックが観測され、これらを解消するシミュレーションではLighthouseスコアが71から最大89まで変化する結果が得られました。Core Web Vitalsの大きな改善が期待できます。
高島屋オンラインストア
詳細レポート 
ボトルネック一覧 
差分リポジトリ この研究は自主的に実施したものであり、サイト関係者からの依頼によるものではありません。掲載の取り下げを希望される場合はお問い合わせください。
高島屋は1831年創業の老舗百貨店で、高島屋オンラインストアはその公式ECサイトです。食品・ファッション・ギフトなど幅広いカテゴリの商品を取り扱っており、お中元・お歳暮をはじめとした贈答需要にも対応しています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。
Core Web Vitalsにつながる指標の改善ポテンシャル
観測されたボトルネックを仮に解消した場合、Lighthouseスコアは以下のような変化を示しました。
| 指標 | 観測時点 | 解消シミュレーション後 | 変化量 |
|---|---|---|---|
総合スコア | 71 | 89 | +18 |
LCP | 19.2秒 | 0.2秒 | -19.0秒 |
FCP | 1.8秒 | 0.2秒 | -1.6秒 |
SI | 4.5秒 | 3.1秒 | -1.4秒 |
TBT | 0ms | 0ms | 変化なし |
CLS | 0.047 | 0.209 | +0.162 |
| 観測時点 | 解消シミュレーション後 |
|---|---|
 |  |
総合スコア が71から89へと18ポイント変化するシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が19.2秒から0.2秒へと大幅に変化しており、表示速度に強く影響するボトルネックが存在していたことが読み取れます。なお、CLS（Cumulative Layout Shift = レイアウトのずれ）が悪化しているのは、サードパーティータグが描画していたバナー領域の消失によるものです。
読み込みプロセスの変化を動画で体験
本サイトでは、ファーストビュー付近の表示スピードには大きな変化は見られませんでした。一方、それに続く画像の読み込みタイミングには若干の差が見て取れます。
サードパーティータグの影響
本研究ではまず、サードパーティータグを段階的に除去することで、タグ全体が表示速度に与えている影響を観測しました。あわせて、タグ由来のノイズを取り除くことで、サイト自体のボトルネックを観察しやすくする狙いもあります。タグを完全に除去することは現実的ではありませんが、最適化によってどこまでの改善ポテンシャルがあるかを把握する材料としてご覧ください。
本セクションは「サードパーティータグがページスピードに影響を与えている」という現実を数値で示すとともに、それらを最適化することでどれだけのスピード改善ポテンシャルがあるかを示唆するものです。
オリジナルページの全288リソースのうち、サイト固有のリソースは161件（約6割）、サードパーティタグ由来のリソースは127件（約4割）を占めていました。ページスピードのボトルネックを正確に把握するには、まずこの4割のタグを取り除いてサイト固有のパフォーマンスを分離する必要があります。
高島屋オンラインストアのトップページでは、17種類・127件・4.6MBに及ぶサードパーティータグが確認されました。
HTMLに直接埋め込まれているタグ
| タグ名 | 種別 |
|---|---|
Rtoaster | レコメンド/パーソナライゼーション |
Silver Egg | レコメンドエンジン |
ValueCommerce | アフィリエイト |
Akamai Bot Manager | ボット検知/セキュリティ |
Google Analytics UA | アクセス解析 |
Google Tag Manager | タグマネージャー |
GTM経由で配信されているタグ
| タグ名 | 種別 |
|---|---|
Google Ads | 広告コンバージョン |
Google Analytics 4 | アクセス解析 |
LinkedIn Insight Tag | 広告トラッキング |
Bing UET Tag | 広告トラッキング |
Facebook Pixel | 広告トラッキング |
Criteo | リターゲティング広告 |
Yahoo広告 | 広告コンバージョン |
LINE Tag | 広告トラッキング |
Twitter/X Ads | 広告トラッキング |
Microsoft Clarity | ヒートマップ/行動分析 |
RTB House / AppNexus / OneTag | 広告 |
段階的除去シミュレーションの結果
| 除去段階 | 除去対象 | 総合スコア | 変化量 |
|---|---|---|---|
| 観測時点（タグあり） | - | 71 | - |
| Rtoaster + Silver Egg + ValueCommerce 除去 | HTML直接埋め込み3種 | 58 | -13 |
| Akamai Bot Manager 除去 | HTML直接埋め込み | 58 | - |
| Google Analytics UA 除去 | HTML直接埋め込み | 58 | - |
| GTM + GTM経由タグ一括除去 | GTM + 11種のタグ | 84 | +26 |
| 全タグ除去後 | - | 84 | +13 |
Rtoaster等の除去時に 総合スコア が一時的に低下しているのは、Rtoasterが描画していたバナー領域が消えたことで CLS が0.047から0.354に悪化したためです。一方、FCP は1.8秒から0.2秒へ大幅に短縮されており、表示速度自体は向上しています。
Google Tag Manager の除去では、GTM経由で配信されていた11種類のタグが一括で除去され、111件のリソースが削除されました。この1ステップで 総合スコア が26ポイント変化し、LCP は15.1秒から0.8秒へと短縮されました。
サードパーティータグを全て除去した状態では 総合スコア が71から84へ変化し、LCP は19.2秒から0.8秒、FCP は1.8秒から0.2秒へと短縮される結果が得られました。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。
サイト固有のボトルネック
サードパーティータグの影響を切り離した状態を起点として、サイト固有のボトルネックを調査しました。本研究では全13件のボトルネック仮説を検証しました。その中から、特に影響の大きかった3件を紹介します。
ボトルネック1: 依存されていないスクリプトの同期読み込み
観察された状況
<body> 末尾に配置された外部スクリプトのうち、他のスクリプトから依存されていない3つのスクリプト（footerFixed.js、Chart.min.js、smartphoto.js）が async 属性なしで同期的に読み込まれている状態が観測されました。同期読み込みのスクリプトはHTMLパーサーをブロックし、ダウンロードと実行が完了するまで後続の処理を停止させます。
解消シミュレーションの方法
依存関係を静的解析で確認した上で、他のスクリプトに依存されていない3つのスクリプトに async 属性を付与しました。
<!-- 変更後 -->
<script src="/sto/common/js/footerFixed.js" async></script>
<script src="/cdn/cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js" async></script>
<script src="/sto/common/js/lib/smartphoto.js" async></script>シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
CLS | 0.383 | 0.209 | -0.174 |
総合スコア | 82 | 89 | +7 |
SI | 1.3秒 | 3.1秒 | +1.8秒 |
CLS が0.383から0.209へ大幅に変化し、総合スコア が7ポイント向上するというシミュレーション結果が得られました。async 属性によりスクリプトの実行順序が変化し、レイアウトシフトのタイミングに影響を与えたものと考えられます。SI（Speed Index）は悪化しましたが、CLS の大幅な変化がそれを上回り、総合スコア の向上につながっています。この結果から、スクリプトの読み込み方式が CLS に対して無視できない影響を持っていたことが読み取れます。
ボトルネック2: CSSが12ファイルに分散
観察された状況
<head> 内で12個の CSS ファイルが個別に読み込まれている状態が観測されました。CSS はレンダリングブロックリソース（読み込みが完了するまでページの描画が停止するリソース）であるため、ファイルごとにHTTPリクエストが発生し、RTT（ラウンドトリップタイム）の累積遅延が FCP に影響していました。
解消シミュレーションの方法
12個の CSS ファイルを1つに結合し、HTTPリクエスト数を削減しました。
<!-- 変更前: 12個のCSSを個別読み込み -->
<link rel="stylesheet" href="/sto/common/css/lib/slick.css">
<link rel="stylesheet" href="/sto/common/css/lib/slick-theme.css">
<link rel="stylesheet" href="/sto/common/css/lib/perfect-scrollbar.css">
<link rel="stylesheet" href="/sto/common/css/common.css">
<!-- ...他8ファイル -->
<!-- 変更後: 1ファイルに結合 -->
<link rel="stylesheet" href="/sto/common/css/lib/slick.css">シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
FCP | 0.4秒 | 0.2秒 | -0.2秒 |
LCP | 1.0秒 | 0.2秒 | -0.8秒 |
SI | 1.8秒 | 1.5秒 | -0.3秒 |
FCP が0.4秒から0.2秒へ、LCP が1.0秒から0.2秒へと短縮されるシミュレーション結果が得られました。12回のHTTPリクエストが1回に集約されたことで、RTTの累積遅延が解消されています。レンダリングブロックリソースのファイル分散が FCP に与えていた影響の大きさが、この結果から読み取れます。
なお、CSSの統合・1ファイル化は、現在では HTTP/2 の普及などにより必ずしも有効なプラクティスとは限りません。今回のシミュレーションのように良好な結果が観測されることもありますが、参考程度にとどめてください。
ボトルネック3: Webフォントのfont-display未設定
観察された状況
サイトでは Yu Gothic M、Josefin Sans、Noto Serif JP、Cormorant Infant、kleeone の5種類のWebフォントが使用されていますが、9箇所の @font-face 宣言にいずれも font-display プロパティが設定されていない状態でした。font-display が未設定の場合、フォントの読み込みが完了するまでテキストが非表示（FOIT = Flash of Invisible Text）となり、読み込み完了後にテキストが一斉に表示されることでレイアウトシフトが発生します。
解消シミュレーションの方法
9箇所の @font-face 宣言すべてに font-display: swap を追加しました。これにより、フォント読み込み中はシステムフォントでテキストが表示され、読み込み完了後にWebフォントに切り替わるようになります。
/* 変更後 */
@font-face {
font-family: 'Josefin Sans';
src: url('/sto/common/fonts/josefin-sans-v25-latin-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
CLS | 0.383 | 0.223 | -0.160 |
総合スコア | 82 | 89 | +7 |
LCP | 0.2秒 | 0.7秒 | +0.5秒 |
CLS が0.383から0.223へと変化し、総合スコア が7ポイント向上するシミュレーション結果が得られました。font-display: swap の追加により、フォント読み込み中のテキスト非表示（FOIT）が解消され、テキスト表示タイミングのずれに起因するレイアウトシフトが軽減されたことが読み取れます。LCP が若干悪化していますが、CLS の大幅な変化が 総合スコア の向上に寄与しています。
まとめ
高島屋オンラインストア（www.takashimaya.co.jp/shopping/）のトップページを観測したところ、総合スコア 71、LCP 19.2秒という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。
観測されたボトルネックとその影響は次のように整理できます。
- サードパーティータグ（17種類・127件・4.6MB）: 除去によって
総合スコアが +13、LCPが 19.2秒 から 0.8秒 へ変化。特にGoogle Tag Manager単独で26ポイントの影響が観測されました。 - 依存されていないスクリプトの同期読み込み:
async属性の付与でCLSが 0.383 から 0.209 へ変化し、総合スコアが +7。 - CSSの12ファイル分散: 1ファイルへの結合で
FCPが 0.4秒 から 0.2秒 へ、LCPが 1.0秒 から 0.2秒 へ短縮。 - Webフォントのfont-display未設定:
font-display: swapの追加でCLSが 0.383 から 0.223 へ変化し、総合スコアが +7。
全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は71から89へ、LCP は19.2秒から0.2秒へと変化しました。特にサードパーティータグの影響が極めて大きく、127件のリソースがページの読み込み速度を大幅に押し下げていたことが、この一連のシミュレーションによって確認できた形です。
高島屋オンラインストア
この研究は自主的に実施したものであり、サイト関係者からの依頼によるものではありません。掲載の取り下げを希望される場合はお問い合わせください。
