「アイルミネ」トップページの表示速度ボトルネック研究

株式会社ルミネが運営するファッション通販サイトです。ルミネやニュウマンなどの商業施設に出店するブランドの商品をオンラインで購入でき、ルミネカードでの5%OFFや店舗受取といったサービスが特徴です。モバイル環境での表示速度について、どのような要素がボトルネックとなっているかを研究するため、解消シミュレーションを実施しました。

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

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

観測時点で 総合スコア は94と比較的高い水準にありましたが、SI（Speed Index = ビューの視覚的な表示進捗の速さ）が6.7秒と大きな値を示していました。全ボトルネックを解消するシミュレーションでは SI が0.8秒まで変化し、総合スコア も100に到達するという結果が得られました。FCP（First Contentful Paint）がわずかに増加していますが、いずれも0.2秒以下の極めて高速な値であり、スコア100圏内です。

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

本サイトでは、解消シミュレーション後に全体的にかなり表示が早くなった様子が見て取れます。

なお、動画撮影の切り上げタイミングの都合により、ページの中間部分に展開されるコンテンツで一部差分が見られる箇所がありますが、ご了承ください。

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

詳細レポート

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

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

オリジナルの全311件のリソースのうち、サードパーティタグが98件（31.5%）を占めています。サイト固有のリソースは213件（68.5%）です。なお、このサイトではjQueryやBootstrap等のパブリックCDNおよびGoogle Fontsは使用されていないため、サードパーティタグの集計には含まれていません。

アイルミネのトップページでは、HTMLから直接読み込まれるタグとGoogle Tag Manager（GTM）経由で配信されるタグを合わせて、21種類のサードパーティータグが確認されました。

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

GTM経由で配信されるタグ（15種） ​

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

合計98リソース・34ドメイン以上のサードパーティー通信が削減されました。サードパーティータグを全て除去した状態では、総合スコア は94から99へ変化し、TBT が54msから0msに完全解消、SI が6.7秒から2.7秒へ約60%短縮されるという結果が得られました。一方、LCP は0.8秒から2.1秒に増加していますが、これはサードパーティータグのJavaScriptがLCP要素の計測タイミングに影響を与えていたためと考えられ、後続のサイト固有ボトルネック解消で対処されています。

これはあくまでタグを全て除去した場合の上限値ですが、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。

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

サードパーティータグを除去した状態から、全9件のボトルネック仮説を検証しました。その中から、特に影響の大きかった3件を紹介します。

ボトルネック: カルーセル非表示画像の即時読み込み ​

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

観察された状況 ​

トップページのカルーセル（スライダー）には11枚の画像が含まれていますが、すべての画像に fetchpriority="high" と loading="eager" が設定されていました。画面に表示されるのは1枚目だけであるにもかかわらず、非表示の2〜11枚目も高優先度で即時読み込みされており、LCP要素である1枚目の描画が遅延していました。

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

1枚目（LCP要素）は fetchpriority="high" loading="eager" を維持したまま、2〜11枚目の画像に loading="lazy" を設定し fetchpriority="high" を除去しました。

シミュレーション結果 ​

このシミュレーション結果から、カルーセル非表示画像の即時読み込みが LCP に与えていた影響の大きさが読み取れます。非表示画像10枚が高優先度で帯域を奪い合うことで、本来最も早く描画されるべき1枚目の画像が遅延していたことが、数値として立証されました。

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

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

観察された状況 ​

ページ内の101枚の画像がすべてJPEG形式で配信されており、画像の総サイズは10.46MBに達していました。WebP形式に変換することで大幅なサイズ削減が可能な状態でした。

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

全101枚のJPEG画像をWebP形式に変換しました。変換後の総サイズは2.36MBとなり、8.11MB（77.5%）の削減となりました。

シミュレーション結果 ​

画像の総サイズが10.46MBから2.36MBへ77.5%削減されたことで、LCP がさらに短縮される結果が得られました。スコア100圏内での変化ではありますが、画像フォーマットの違いが転送量に与える影響の大きさが確認できます。

ボトルネック: 日本語Webフォントの大容量ファイル ​

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

観察された状況 ​

NotoSansJPのWebフォントファイル2つ（Bold: 2,324KB、Regular: 2,274KB）が読み込まれており、合計約4.6MBで転送サイズの約58%を占めていました。日本語Webフォントは収録文字数が多いためファイルサイズが非常に大きく、表示速度への影響が英語フォントとは桁違いになります。

このシミュレーションはフォントの見た目が変わることを前提に行いました。

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

NotoSansJPのWebフォントファイル2つを除去し、システムフォント（デバイスに標準搭載されたフォント）にフォールバックさせました。

シミュレーション結果 ​

約4.6MBのWebフォントを除去したことで、SI が約32%短縮される結果が得られました。転送サイズの半分以上を占めていた日本語Webフォントが、ページの視覚的な表示完了速度に影響を与えていたことが数値から読み取れます。

まとめ ​

アイルミネのトップページは観測時点で 総合スコア 94と比較的高い水準にありましたが、SI が6.7秒という大きな値を示していました。

サードパーティータグ（21種類・98リソース）が TBT と SI に大きな影響を与えており、これらを除去したシミュレーションでは TBT が完全解消、SI が約60%短縮されました。

サイト固有のボトルネックとしては、カルーセル非表示画像の即時読み込みが LCP を約1.7秒遅延させていたことが最大の要因でした。JPEG画像の未WebP変換（10.46MBの画像を2.36MBに削減可能）、日本語Webフォントの大容量ファイル（約4.6MBで転送サイズの58%）も、それぞれ表示速度に影響を与えていたことがシミュレーション結果から立証されました。

これらの全ボトルネックを解消したシミュレーションでは、総合スコア が94から100へ、SI が6.7秒から0.8秒へ変化するという結果が得られています。