「フランドルオンライン」トップページの表示速度ボトルネック研究

INED、Maglie le cassetto、DAY by DAY It's internationalなどのレディースファッションブランドを展開するフランドルの公式オンラインストアです。コート、ニット、ワンピースなど幅広いアイテムを取り扱っています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

観測時点	解消シミュレーション後

総合スコア が47から100へと53ポイント変化するというシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が16.9秒から0.2秒へと大きな変化が観測されており、CLS（Cumulative Layout Shift = レイアウトのずれの大きさ）も1.438から0.022へと劇的に変化しています。これらの指標に強く影響するボトルネックが存在していたことが読み取れます。

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

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

なお、録画の切り上げのタイミングの違いによって、一部のコンテンツに表示の差が見られる箇所がありますが、ご了承ください。

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

詳細レポート

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

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

オリジナルページの全242リソースのうち、サイト固有のリソースは145件（約6割）、サードパーティタグ由来のリソースは97件（約4割）を占めていました。ページスピードのボトルネックを正確に把握するには、まずこの4割のタグを取り除いてサイト固有のパフォーマンスを分離する必要があります。

HTMLに直接埋め込まれていたタグ ​

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

段階的除去のシミュレーション結果 ​

第2段階で 総合スコア が一時的に低下していますが、これはInstagram連携ウィジェット（Xapping）の除去により、それまでウィジェットが占有していた領域がなくなったことでスライダー起因のレイアウトシフトが露出したためです。この CLS の問題は後続のサイト固有ボトルネックのセクションで対処されています。

全タグを除去した状態では 総合スコア が47から79へ変化し、LCP は16.9秒から0.4秒へと短縮されました。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。以降のセクションでは、この状態を起点としてサイト固有のボトルネックを観察していきます。

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

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

ボトルネック1: スライダーの初期化によるレイアウトシフト ​

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

観察された状況 ​

ファーストビューに配置されたslickスライダーで、JavaScript初期化の前後でDOM構造が大きく変わるレイアウトシフトが発生していました。初期化前はスライダー要素が opacity: 0 で非表示とされていたものの、高さが確保されておらず、初期化時に要素が出現することで CLS 値が0.500という非常に高い数値として観測されました。

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

CSSの非表示手法を opacity: 0 から visibility: hidden に変更し、aspect-ratio プロパティでスライダー領域の高さを事前に確保する変更を加えました。これにより、JavaScript初期化前からレイアウト上の領域が確定した状態を作り出しています。

シミュレーション結果 ​

CLS が0.500から0.028へ変化し、総合スコア が21ポイント上昇するという結果が得られました。スライダーの非表示手法と領域確保の未指定が、CLS および 総合スコア に対して極めて大きなボトルネックであったことがこの数値から読み取れます。

ボトルネック2: jQuery CDNが外部ドメインから配信 ​

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

観察された状況 ​

jQuery 1.11.3がGoogle CDN（ajax.googleapis.com）から読み込まれている状態が観測されました。jQueryはHTML解析の初期段階で読み込まれるスクリプトであり、外部ドメインへのDNS解決、TCP接続、TLSハンドシェイクのコストが FCP に直接影響していました。

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

jQueryの読み込み先をGoogle CDNからサイトと同一のドメイン（store.flandre.ne.jp）に変更しました。同一ドメインであれば既存のHTTP接続を再利用できるため、外部ドメインへの接続コストが不要になります。フォールバック用の document.write() コードも不要となったため併せて除去しています。

シミュレーション結果 ​

FCP が約半分に短縮されるという結果が得られました。jQueryという1つのライブラリの配信元を変えるだけでこれだけの変化が観測されたことから、外部ドメインからのスクリプト配信が FCP に与えていた影響の大きさが読み取れます。

ボトルネック3: JPEG/PNG画像のWebP未変換 ​

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

観察された状況 ​

ページ内の111個の画像がJPEGまたはPNG形式のまま配信されていました。画像の合計サイズは9.37MBに達しており、ページ全体の転送量11.68MBの大部分を占めている状態が観測されました。

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

111個のJPEG/PNG画像をWebP形式に変換しました。WebPはJPEGやPNGと比較して同等の画質でファイルサイズを大幅に削減できる画像フォーマットです。

シミュレーション結果 ​

Lighthouse のスコア上は既に100点に到達した状態での変更であったため、指標上の数値変化は小さいものでした。しかし、画像サイズが84.1%削減され、ページ全体の転送量が67.4%削減されたという事実は、ネットワーク帯域が限られるモバイル環境において無視できない要素です。スコアには現れにくいものの、実際のユーザー体験（特に回線速度が遅い環境）において、転送量の大きさが潜在的なボトルネックとなっていたことが読み取れます。

まとめ ​

フランドルオンライン（store.flandre.ne.jp）の表示速度を観測したところ、総合スコア 47、LCP 16.9秒、CLS 1.438という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。

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

• サードパーティータグ17件の集合体: 除去によって 総合スコア が +32、LCP が 16.9秒 から 0.4秒 へと変化。12種類のHTMLタグに加え、Google Tag Manager 経由で5種類のタグが追加で読み込まれており、ページ読み込みへの影響が極めて大きいことが観測されました。
• スライダーのレイアウトシフト: CSSの非表示手法と領域確保の変更で CLS が 0.500 から 0.028 へ変化し、総合スコア が +21。ファーストビューの構造がスコアに直結する典型例として観測されました。
• jQuery CDNの外部ドメイン配信: 同一ドメイン化で FCP が 52.7% 短縮。外部ドメインへの接続コストが初期描画のボトルネックとなっていたことが確認されました。
• JPEG/PNG画像のWebP未変換: 画像サイズ 84.1% 削減、ページ全体の転送量 67.4% 削減。スコアへの反映は限定的ながら、転送量としては無視できない規模が観測されました。

全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は 47 から 100 へ、LCP は 16.9秒 から 0.2秒 へと変化しました。観測された各要素がそれぞれ独立して指標に与えていた影響の大きさが、この一連のシミュレーションによって確認できた形です。