「SANYO ONLINE STORE」トップページの表示速度ボトルネック研究

三陽商会が運営する公式オンラインストアで、MACKINTOSH LONDON、Paul Stuart、EPOCA、AMACAなどのファッションブランドを取り扱っています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

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

総合スコア が80から100へと20ポイント変化するというシミュレーション結果が得られました。特に SI（Speed Index = ビューの視覚的な表示進捗の速さ）が13.0秒から1.2秒へ、FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）が2.7秒から0.2秒へと大きな変化が観測されており、複数のボトルネックが表示速度に強く影響していたことが読み取れます。

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

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

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

詳細レポート

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

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

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

観測時点のトラフィックは、リソース数455件、転送サイズ13.87MBという規模でした。このサイトで確認されたサードパーティータグは次のとおりです。

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

Google Tag Manager経由で配信されているタグ ​

Shopifyアプリ経由のタグ ​

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

サードパーティータグを全て除去した状態では、総合スコア は80から99へ変化し、SI は13.0秒から2.0秒、TBT は118msから5msという値まで変化する結果が得られました。特に KARTE 単体の除去で 総合スコア が80から95へ15ポイント変化しており、単一のタグとしては極めて大きな影響を持っていたことが分かります。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。

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

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

ボトルネック: パブリックCDNリソースの外部ドメイン配信 ​

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

観察された状況 ​

jQuery、Slick Carousel、crypto-jsなど9件のリソースが、cdnjs.cloudflare.com や ajax.googleapis.com といった外部ドメインから配信されていました。外部ドメインからリソースを取得する場合、DNS解決、TCP接続、TLSハンドシェイクといった接続コストがドメインごとに追加で発生します。

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

外部CDNから配信されていた9件のリソース（jQuery 3系が3バージョン重複していた点も含む）を、サイトと同一ドメインである store.sanyo-shokai.co.jp から配信する構成に変更しました。

シミュレーション結果 ​

このシミュレーション結果から、外部ドメインへの接続コストが LCP に0.5秒程度の影響を与えていたことが読み取れます。同一ドメインからの配信に切り替えることで、追加の接続コストが不要になり、リソース取得が高速化されるという構造です。

ボトルネック: モバイルで不要なPC用KV画像のダウンロード ​

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

観察された状況 ​

このサイトではPC用とモバイル用で異なるキービジュアル（KV）画像が用意されていますが、モバイル環境でもPC用のKV画像10枚（合計約911KB）がダウンロードされていました。CSSの display: none で画面上は非表示にしていても、ブラウザはリソースのダウンロードを行うため、転送量の削減にはなりません。

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

モバイル表示で使用されないPC用KV画像10枚を配信対象から除外し、約911KBの転送を削減しました。

シミュレーション結果 ​

数値上は LCP がわずかに増加していますが、これは計測の揺らぎの範囲です。約911KBの転送削減は、特にモバイル回線が低速な環境で表示速度に寄与する要因となります。CSSによる非表示ではブラウザのダウンロードを抑制できないという点は、モバイル向けの画像配信において見落とされやすいボトルネックです。

ボトルネック: Google Fontsによる多数のWebフォント読み込み ​

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

観察された状況 ​

このサイトでは Google Fonts から Noto Sans JP、Open Sans、Inter Tight の3書体が読み込まれており、CSSファイル2件とフォントファイル24件、合計26リソースが fonts.googleapis.com および fonts.gstatic.com から取得されていました。日本語フォントである Noto Sans JP は文字数が多いためデータ量が大きく、Webフォントの読み込みはレンダリングをブロックするため、特に FCP への影響が顕著です。このシミュレーションはフォントの見た目が変わることを前提として行いました。

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

Google Fonts の <link> タグと preconnect ヒントを除去し、フォントファイル26リソースの読み込みを停止しました。

シミュレーション結果 ​

FCP が0.9秒から0.2秒へと約74%変化するという結果が得られました。26リソースの読み込みがレンダリングをブロックしていたことが、この数値から読み取れます。日本語Webフォントは英語フォントと比較してデータ量が桁違いに大きいため、表示速度への影響もそれに比例して大きくなるという構造的な特性があります。

まとめ ​

SANYO ONLINE STOREのトップページでは、サードパーティータグ（特に KARTE）、パブリックCDNリソースの外部ドメイン配信、Google Fontsによる多数のWebフォント読み込みが、表示速度に対する主要なボトルネックとして観測されました。

サードパーティータグの除去シミュレーションでは 総合スコア が80から99へ、SI が13.0秒から2.0秒へ変化しており、タグ全体の影響の大きさが数値として表れています。サイト固有のボトルネックとしては、外部CDNリソースの同一ドメイン化で LCP が0.5秒短縮し、Google Fontsの除去で FCP が0.7秒短縮するという結果が得られました。

全てのボトルネックを解消したシミュレーションでは、総合スコア 80から100、LCP 3.0秒から0.6秒、FCP 2.7秒から0.2秒、SI 13.0秒から1.2秒という値が得られており、これらのボトルネックが表示速度全体に与えていた影響の大きさが分かります。