「アバハウス」トップページの表示速度ボトルネック研究

ABAHOUSE（アバハウス）は、Rouge vif la cle、qualite、DESIGNWORKS など14以上のブランドを展開するファッション通販サイトです。メンズ・レディースのアパレルからシューズ、雑貨まで約6,600点以上の商品を扱っています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

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

総合スコア が86から100へと14ポイント変化するというシミュレーション結果を得ました。このサイトは観測時点で既に比較的高いスコアでしたが、CLS（Cumulative Layout Shift = レイアウトのずれの大きさ）が0.243と高い値を示しており、レイアウトシフトに関連するボトルネックが存在していたことが読み取れます。また LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）や FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）もシミュレーション後に大幅に短縮されています。

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

本サイトでは、解消シミュレーション後に大幅な表示速度の改善が見られます。

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

詳細レポート

本研究ではまず、サードパーティータグ（広告・アクセス解析・タグマネージャーなど外部サービスのスクリプト）を段階的に除去した状態を観測しました。目的は、サードパーティータグ全体が表示速度に与えている影響を測り、最適化によって得られる改善ポテンシャルの上限を把握すること、そしてサイト固有のボトルネックを観察するためのノイズを取り除くことの2点です。なお、これらのタグの完全な除去は運用上現実的でありません。

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

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

abahouse.jp で確認されたサードパーティータグは次のとおりです。

合計12種類のサードパーティータグが検出され、転送サイズは合計約2.8MB、メインスレッド占有時間は640ms以上に達していました。

段階的に除去した際の指標の推移は次のとおりです。

サードパーティータグを全て除去した状態では、LCP は1.8秒から0.1秒へ、FCP は1.6秒から0.1秒へ、TBT は39msから0msへ変化する結果が得られました。リソース数も215件から127件へと88件削減されています。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルの存在が読み取れます。

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

サードパーティータグの影響を取り除いた上で、サイト固有のボトルネックを観察しました。全12件のボトルネック仮説を検証し、その中から特に影響の大きかった3件を紹介します。

ボトルネック: メインカルーセルのレイアウトシフト ​

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

観察された状況 ​

ファーストビューにあるslickカルーセルが、JavaScript初期化前に全15スライドが縦に展開された状態で表示され、初期化後に1スライド表示へ切り替わるため、大きなレイアウトシフトが発生していました。CLS が0.527という非常に高い値を示しており、総合スコア を大きく引き下げる要因となっていました。

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

CSSでカルーセルの初期状態の高さを制限し、1枚目のスライドのみを表示する設定を適用しました。slick.jsの .slick-initialized クラスが付与された後に制限を解除することで、JavaScript初期化前後のレイアウト変化を最小限に抑えています。

シミュレーション結果 ​

解消前	解消後

CLS が0.527から0.107へと大幅に変化し、総合スコア も79から97へ18ポイント上昇する結果が得られました。カルーセルのJavaScript初期化に伴うレイアウトシフトが、表示品質に極めて大きな影響を与えていたことを確認できます。

ボトルネック: 画像のwidth/height属性未指定 ​

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

観察された状況 ​

ページ内のほぼ全ての img 要素に width / height 属性が設定されておらず、ブラウザが画像のアスペクト比を事前に計算できない状態でした。画像の読み込み完了時にレイアウトが動くため、CLS の悪化要因となっていました。

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

バナー画像、ヘッダーロゴなど8箇所の img 要素に width / height 属性を追加しました。また、ブランドロゴ14画像については CSS の aspect-ratio で対応しました。

シミュレーション結果 ​

解消前	解消後

CLS が0.107から0.037へさらに変化し、総合スコア は100に到達する結果が得られました。前述のカルーセルと合わせ、レイアウトシフト関連のボトルネックが2つ重なっていたことで CLS が高い値を示していたことを確認できます。

ボトルネック: CSSが8ファイルに分散 ​

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

観察された状況 ​

head 内に8個の CSS <link> 要素が配置されており、remodal.css、base.css、style.css、slick.css など個別のCSSファイルがそれぞれ独立してダウンロード・パースされていました。CSSはレンダリングブロックリソースであるため、ファイル数が多いほど初回描画が遅れます。

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

8個のCSSファイルを1つに結合し、HTTPリクエスト数を削減しました。CSS内の相対パスは絶対URLに変換し、body 末尾にあった重複CSSの link 要素も削除しています。

シミュレーション結果 ​

解消前	解消後

サードパーティータグ除去後の時点で FCP が既に0.1秒と極めて高速であったため、CSSファイル結合による指標の変化は限定的でした。ただし、レンダリングブロックリソースの数を8から1に削減したことは、ネットワーク環境が不安定な条件下では表示速度に影響し得る要因です。このサイトの場合、CSS分散よりもサードパーティータグやレイアウトシフトのほうが支配的なボトルネックであったことを確認できます。

なお、CSSの統合・1ファイル化は、現在では HTTP/2 の普及などにより必ずしも有効なプラクティスとは限りません。今回のシミュレーションのように良好な結果が観測されることもありますが、参考程度にとどめてください。

まとめ ​

本研究では、ABAHOUSE ONLINE STORE のトップページについて全12件のボトルネック仮説を検証しました。

最も大きな影響を示したのは サードパーティータグ でした。12種類のタグが合計約2.8MBの転送サイズを占め、LCP を1.8秒から0.1秒へ、FCP を1.6秒から0.1秒へ変化させるほどの影響が観測されました。サイト自体の LCP は0.1秒と極めて高速であり、表示速度の大部分をサードパーティータグが左右していた構造が浮き彫りになりました。

サイト固有のボトルネックとしては、メインカルーセルのレイアウトシフトが CLS 0.527 という高い値を生み出しており、総合スコア を18ポイント引き下げていました。これに画像の width / height 属性未指定が重なり、2つのレイアウトシフト要因が合算された結果として CLS 0.243 という観測値に至っていたことが分かりました。

これらのボトルネックを全て解消するシミュレーションでは、総合スコア が86から100へ、CLS が0.243から0.033へ変化する結果が得られています。