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

ブックオフ公式オンラインストアは、本・漫画・CD・DVD・ゲームの中古品・新品を取り扱う通販サイトです。中古商品のまとめ買い（オトナ買い）など独自のサービスを提供しています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

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

総合スコア は観測時点で既に98と高い水準でしたが、FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）は1.9秒、LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）も1.9秒であり、秒単位の短縮ポテンシャルがあることがシミュレーション結果から読み取れます。

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

本サイトでは、読み込みプロセス動画上では観測時点と解消シミュレーション後の差は微妙なものにとどまりますが、シミュレーション後はわずかに早く表示される様子が見て取れます。

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

詳細レポート

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

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

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

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

GTM経由で動的に読み込まれるタグ ​

合計で49件のサードパーティーリソース（約1.98MB）が読み込まれていました。

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

第1段階で Actag Tracker を除去した際にスコアが一時的に低下していますが、これは計測揺らぎの範囲です。注目すべきは第2段階で、Ad-Lpo のタグに含まれる document.write がレンダリングを大きくブロックしていたことが数値から読み取れます。Ad-Lpo を除去した時点で FCP は1.9秒から1.1秒へ、総合スコア は94から100へ変化しました。

サードパーティータグを全て除去した状態では、FCP が1.9秒から1.2秒へ、LCP が1.9秒から1.3秒へ変化する結果が得られました。実際にはこの全てを除去することはできませんが、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。

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

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

ボトルネック: CSSが別ドメインから配信されている ​

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

観察された状況 ​

4つのCSSファイルが、HTMLの配信元（shopping.bookoff.co.jp）とは異なるドメイン（content.bookoffonline.co.jp、content.bookoff.co.jp、fonts.googleapis.com）から配信されていました。CSSはレンダリングブロックリソースであるため、別ドメインへの接続確立（DNS解決 + TLS接続）にかかる100〜300msの追加遅延が、そのまま画面描画の遅延につながります。

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

4つのCSSファイルを全てHTMLと同じドメインから配信するよう変更しました。これにより、HTMLの取得時に確立済みの接続をそのまま再利用できる状態になります。

シミュレーション結果 ​

解消前	解消後

FCP が1.2秒から0.4秒へ0.8秒短縮されており、CSSの配信ドメインが表示速度に与えていた影響の大きさが読み取れます。CSSはブラウザが画面描画を開始するために必要不可欠なリソースであるため、その取得にかかる接続遅延がそのまま描画開始の遅れとなって表れていました。

ボトルネック: CSSが10ファイルに分散している ​

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

観察された状況 ​

ページの描画に必要なCSSが10個のファイルに分かれて読み込まれていました。CSSはレンダリングブロックリソースであるため、ファイル数が多いほどHTTPリクエストのオーバーヘッドが蓄積し、描画開始が遅れます。

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

10個のCSSファイルを1つのファイルに結合しました。CSS内で @import により読み込まれていたGoogle Fontsのスタイルシートも、結合後のCSSに含めています。

シミュレーション結果 ​

解消前	解消後

FCP が0.4秒から0.2秒へ、LCP が0.6秒から0.2秒へ変化しています。CSSの同一ドメイン化と合わせると、CSSの配信方法だけで FCP は1.2秒から0.2秒へ、合計約1.0秒の短縮となっており、レンダリングブロックリソースの配信構成がいかに表示速度を左右するかが分かります。

ボトルネック: JSが別ドメインから配信されている ​

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

観察された状況 ​

8つのJavaScriptファイルが、HTMLとは異なるドメイン（content.bookoff.co.jp）から配信されていました。head 内で同期的に読み込まれる script タグの場合、別ドメインへの接続遅延がレンダリングブロックに直結します。

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

content.bookoff.co.jp から配信されていた8つのJSファイルを、HTMLと同じドメイン（shopping.bookoff.co.jp）から配信するよう変更しました。

シミュレーション結果 ​

解消前	解消後

CSSほどの大きな変化ではありませんが、FCP が0.2秒から0.1秒へ短縮されました。CSSの同一ドメイン化で接続コストの大半は解消されていたものの、JSについても別ドメイン配信が追加の遅延要因となっていたことが確認できます。

まとめ ​

ブックオフオンラインのトップページは、観測時点で 総合スコア 98と既に高い水準にありましたが、FCP と LCP にはそれぞれ1.9秒という値が観測されていました。

サードパーティータグについては、特に Ad-Lpo の document.write によるレンダリングブロックが大きな影響を与えていたことが、除去シミュレーションの数値から読み取れました。

サイト固有のボトルネックとしては、CSSやJSがHTMLとは別のドメインから配信されていたことと、CSSが10ファイルに分散していたことが、FCP に対する主要な要因でした。これらのボトルネックを解消するシミュレーションでは、FCP が1.2秒から0.1秒へと大幅に短縮される結果が得られており、レンダリングブロックリソースの配信構成が表示速度に与える影響の大きさが確認されました。