「ワコールウェブストア」トップページの表示速度ボトルネック研究
LCP画像がアニメーションGIF（1.4MB）で配信されていた、カルーセル非表示画像が初期表示時に一斉ダウンロードされていた、Google Fontsがレンダリングをブロックしていたなどのボトルネックが観測され、これらを解消するシミュレーションではLighthouseスコアが65から最大100まで変化する結果が得られました。Core Web Vitalsの大幅な改善が期待できます。
ワコールウェブストア
詳細レポート 
ボトルネック一覧 
差分リポジトリ この研究は自主的に実施したものであり、サイト関係者からの依頼によるものではありません。掲載の取り下げを希望される場合はお問い合わせください。
ワコール公式のオンラインストアで、ブラジャー・ショーツ・ランジェリーなどインナーウェアを中心に、ウェブ限定商品を含む幅広い品揃えを展開しています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。
Core Web Vitalsにつながる指標の改善ポテンシャル
| 観測時点 | 全ボトルネック解消シミュレーション後 |
|---|---|
 |  |
観測されたボトルネックを仮に解消した場合、Lighthouse スコアは以下のような変化を示しました。
| 指標 | 観測時点 | 解消シミュレーション後 | 変化量 |
|---|---|---|---|
総合スコア | 65 | 100 | +35 |
LCP | 13.2秒 | 0.3秒 | -12.9秒 |
FCP | 3.0秒 | 0.1秒 | -2.9秒 |
SI | 5.6秒 | 0.9秒 | -4.7秒 |
TBT | 81ms | 0ms | -81ms |
CLS | 0.022 | 0.022 | 変化なし |
総合スコア が65から100へと35ポイント変化するというシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が13.2秒から0.3秒へと大きな変化が観測されており、複数のボトルネックが積み重なって LCP を押し上げていたことが読み取れます。
読み込みプロセスの変化を動画で体験
本サイトでは、解消シミュレーション後に大幅な表示速度の改善が見て取れます。
サードパーティータグの影響
本研究ではまず、サードパーティータグを段階的に除去することで、タグ全体が表示速度に与えている影響を観測しました。あわせて、タグ由来のノイズを取り除くことで、サイト自体のボトルネックを観察しやすくする狙いもあります。タグを完全に除去することは現実的ではありませんが、最適化によってどこまでの改善ポテンシャルがあるかを把握する材料としてご覧ください。
本セクションは「サードパーティータグがページスピードに影響を与えている」という現実を数値で示すとともに、それらを最適化することでどれだけのスピード改善ポテンシャルがあるかを示唆するものです。
オリジナルページの全288リソースのうち、サイト固有のリソースは182件（約6割）、サードパーティタグ由来のリソースは106件（約4割）を占めていました。ページスピードのボトルネックを正確に把握するには、まずこの4割のタグを取り除いてサイト固有のパフォーマンスを分離する必要があります。
HTMLに直接記述されているタグ
| タグ名 | 種別 |
|---|---|
Yottaa | パフォーマンス最適化 |
Adobe Experience Platform Launch | アナリティクス |
Brightcove | 動画プレーヤー |
STAFF START | スタッフレビュー |
CQuotient (Einstein) | レコメンデーション |
GTM経由で読み込まれるタグ
| タグ名 | 種別 |
|---|---|
Google Ads（3件） | 広告 |
Google Analytics | アナリティクス |
Facebook Pixel | 広告計測 |
Yahoo広告タグ | 広告計測 |
Bing UET | 広告計測 |
Twitter/X Ads | 広告計測 |
Mercari Eagle Tag | 広告計測 |
楽天マーケティングタグ | 広告計測 |
MicoCloud | コミュニケーション |
Sprocket | Web接客 |
WorldShopping | 越境EC |
Google Ads Conversion Tracking | 広告計測 |
合計21件のサードパーティータグが確認されました。
段階的な除去シミュレーション結果
| 除去段階 | 除去対象 | 総合スコア | 変化量 |
|---|---|---|---|
| 観測時点 | - | 65 | - |
| 段階1 | Yottaa | 74 | +9 |
| 段階2 | Adobe Launch + Brightcove + STAFF START + CQuotient | 100 | +26 |
| 段階3 | Google Tag Manager + GTM経由タグ全12種 | 99 | -1 |
タグの影響まとめ
サードパーティータグを全て除去した状態では、総合スコア が65から99へ変化し、LCP は13.2秒から2.2秒へ、TBT は81msから0msへと短縮されました。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。以降のセクションでは、この状態を起点としてサイト固有のボトルネックを観察していきます。
サイト固有のボトルネック
サードパーティータグの影響を切り離した状態を起点として、サイト固有のボトルネックを調査しました。本研究では全12件のボトルネック仮説を検証しています。その中から、特に影響の大きさが観測された3件を紹介します。
ボトルネック1: LCP画像がアニメーションGIF（1.4MB）で配信されていた
観察された状況
ページの LCP 要素であるカルーセル1枚目のバナー画像が、アニメーションGIF形式（約1.4MB、180フレーム）で配信されている状態が観測されました。CloudflareのPolish機能によりWebPへの自動変換は行われていましたが、アニメーション情報を保持したままの変換であったため、ファイルサイズはほぼ変わっていませんでした。
解消シミュレーションの方法
アニメーションGIF画像を静的WebP画像に変換しました。実際のページではアニメーションとして動作する必要のないバナー画像であったため、最初のフレームのみを静的WebPとして書き出しています。
変換前: spring_cp_top.gif（1,486,019バイト / アニメーションGIF 180フレーム）
変換後: spring_cp_top.webp（30,198バイト / 静的WebP）
サイズ削減率: 97.97%シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
LCP | 2.6秒 | 1.2秒 | -1.4秒（54.8%） |
SI | 1.9秒 | 1.4秒 | -0.5秒 |
総合スコア | 97 | 100 | +3 |
LCP が半分以下に短縮されるという結果が得られました。1.4MBのアニメーションGIFが30KBの静的WebPに置き換わることで、画像のダウンロード時間が劇的に短縮されたことが読み取れます。画像フォーマットの選択が LCP に与えるインパクトの大きさを示すシミュレーション結果です。
なお、本シミュレーションでは静的WebPへの変換を行いましたが、アニメーションをそのまま残したい場合は MP4 形式を <video> 要素で配信するのが現在ではベストプラクティスとされています。アニメーションGIFを MP4 に置き換えることで、本シミュレーションを上回るさらなる軽量化が期待できる可能性があります。
ボトルネック2: カルーセル非表示画像が初期表示時に一斉ダウンロードされていた
観察された状況
カルーセルには10枚の画像がHTMLに記述されていましたが、初期表示で見えるのは1枚目のみです。にもかかわらず、2枚目以降の9枚の画像にも loading="lazy" が指定されておらず、ページの読み込みと同時にすべての画像のダウンロードが開始されている状態でした。これにより、LCP 画像と帯域を争う状況が生じていました。
解消シミュレーションの方法
カルーセルの2〜10枚目の画像に loading="lazy" を付与し、初期表示に不要な画像の読み込みを遅延させました。1枚目の LCP 画像は loading="eager" + fetchpriority="high" のまま維持しています。
<!-- 1枚目: LCP画像（変更なし） -->
<img src=".../spring_cp_top.webp" loading="eager" fetchpriority="high" ...>
<!-- 2枚目以降: lazy-load追加 -->
<img src=".../slide2.jpg" loading="lazy" ...>
<img src=".../slide3.jpg" loading="lazy" ...>シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
LCP | 1.2秒 | 1.0秒 | -0.2秒（16.0%） |
SI | 1.4秒 | 1.3秒 | -0.1秒 |
初期表示に不要な画像の帯域争奪を解消することで、LCP 画像のダウンロードが優先された結果、LCP に0.2秒の変化が観測されました。HTML属性の追加のみで実現できるシミュレーションであり、カルーセルの非表示スライドが LCP のボトルネックとなり得ることが読み取れます。
ボトルネック3: Google Fontsがレンダリングをブロックしていた
観察された状況
サイトでは Google Fonts（Lato、Montserrat）が <link rel="stylesheet"> で読み込まれていました。この読み込み方式ではCSSがレンダリングブロッキングリソースとなり、ブラウザはCSSのダウンロードが完了するまでページの描画を開始できません。さらに、CSS内からwoff2フォントファイルが読み込まれるため、多段階のネットワークリクエストが発生していました。このシミュレーションはフォントの見た目が変わることを前提として行いました。
解消シミュレーションの方法
Google Fontsの読み込みを削除し、CSSの font-family 指定をシステムフォントにフォールバックさせました。
<!-- 削除した要素 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
FCP | 0.4秒 | 0.1秒 | -0.3秒（80.6%） |
LCP | 0.8秒 | 0.2秒 | -0.6秒（78.2%） |
SI | 1.4秒 | 0.9秒 | -0.5秒 |
Google Fontsの読み込みを除去すると、FCP が80.6%、LCP が78.2%短縮されるという結果が得られました。Lato、Montserratは英語フォントであるため日本語フォントほどのデータ量ではありませんが、レンダリングブロッキングリソースとして <head> 内に配置されていたことで FCP と LCP の両方に与える影響が大きかったことが読み取れます。
まとめ
ワコールウェブストア（store.wacoal.jp）の表示速度を観測したところ、総合スコア 65、LCP 13.2秒、FCP 3.0秒という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。
観測されたボトルネックとその影響は次のように整理できます。
- サードパーティータグ（21件）: 除去によって
総合スコアが+34、LCPが13.2秒から2.2秒へ変化。特にYottaaとAdobe Experience Platform Launch+Brightcove等の除去だけで総合スコアが65から100まで変化しました - LCP画像のアニメーションGIF配信: WebP変換で
LCPが54.8%短縮。1.4MBから30KBへの圧縮により画像ダウンロード時間が劇的に短縮されました - カルーセル非表示画像の一斉読み込み:
loading="lazy"付与でLCPが16.0%短縮。帯域の競合を解消することでLCP画像の優先度が実質的に高まりました - Google Fontsのレンダリングブロック: 読み込み停止で
FCPが80.6%、LCPが78.2%短縮。レンダリングブロッキングCSSとしての配置が影響の大きさに直結していました
全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は65から100へ、LCP は13.2秒から0.3秒へと変化しました。観測された各要素がそれぞれ独立して指標に与えていた影響の大きさが、この一連のシミュレーションによって確認できた形です。
ワコールウェブストア
この研究は自主的に実施したものであり、サイト関係者からの依頼によるものではありません。掲載の取り下げを希望される場合はお問い合わせください。
