「タマチャンショップ」トップページの表示速度ボトルネック研究

宮崎県都城市に本社を置く九南サービスが運営する自然食品・健康食品のECサイトです。雑穀米、ナッツ、健康茶、宮崎マンゴーなど、自然素材にこだわった食品を幅広く取り扱っています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているかを研究するため、解消シミュレーションを実施しました。

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

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

総合スコア が53から100へと47ポイント変化するというシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が13.3秒から0.1秒へと劇的な変化を示しており、CLS（Cumulative Layout Shift = レイアウトのずれ）も0.447から0.047へ大きく変化しています。一方、FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）は観測時点から0.3秒と既に高速で、TBT（Total Blocking Time = メインスレッドのブロック時間）も0msであったため、本サイトのボトルネックは主に LCP と CLS に集中していたことが読み取れます。

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

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

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

詳細レポート

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

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

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

タマチャンショップのトップページでは、16種類以上のサードパーティータグが確認されました。

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

Google Tag Manager 経由で読み込まれているタグ ​

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

サードパーティータグを全て除去した状態では、総合スコア が53から73へ変化し、LCP は13.3秒から3.2秒へと約10秒短縮される結果が得られました。特に Google Tag Manager と配下の広告・アナリティクスタグの除去だけで 総合スコア が+19ポイント変化しており、GTM配下で並列に読み込まれる多数のタグがページ全体の読み込みプロセスに大きな負荷をかけていたことが読み取れます。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが分かります。

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

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

ボトルネック1: LCP画像がlazyload対象になっている ​

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

観察された状況 ​

ページの LCP 要素（ファーストビューで最も大きなコンテンツ）であるFlickityスライダーの第1画像に、lazysizesによるlazyload（遅延読み込み）が適用されている状態が観測されました。lazyloadは画面外の画像の読み込みを遅らせるための仕組みですが、ファーストビューの最大画像に適用されると、本来すぐに表示されるべき画像の読み込み開始が約1,425ms遅延することになります。src 属性にはSVGプレースホルダーが設定されており、実際の画像URLは data-src 属性に格納されていたため、JavaScriptが実行されるまで画像のダウンロードが開始されませんでした。

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

LCP 画像のlazyloadを解除し、src 属性に実際の画像URLを直接設定しました。さらに loading="eager" と fetchpriority="high" を付与し、ブラウザに即座かつ優先的なダウンロードを指示する状態に変更しました。

シミュレーション結果 ​

解消前	解消後

LCP が3.1秒から0.2秒へ92.5%短縮されるという変化が観測されました。ファーストビューの最大画像にlazyloadが適用されていたことが、LCP における最大のボトルネックであったことがこの結果から読み取れます。

ボトルネック2: lazyload画像の空間が事前確保されていない ​

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

観察された状況 ​

lazysizesでlazyloadされる複数の画像（バナー画像、ナビアイコン、ロゴ等）の src 属性が空（src=""）に設定されており、width / height 属性も指定されていない状態が観測されました。この状態では、画像が読み込まれるまでブラウザが画像の表示サイズを確定できず、読み込み完了時にレイアウトが大きくずれる（レイアウトシフト）現象が発生していました。特にファーストビュー内のバナー画像のサイズが不正確で、CLS を大きく押し上げている状況でした。

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

lazyload画像の src 属性にSVGプレースホルダーを設定し、正確な width / height 属性を付与することで、画像読み込み前からアスペクト比に基づく空間を確保する変更を加えました。Flickityスライダーについても、JavaScript初期化前からCSSで高さを事前確保する設定を追加しました。

シミュレーション結果 ​

2段階にわたるシミュレーションの累計結果です。

解消前	解消後

CLS が0.447から0.047へ89%変化し、総合スコア が74から92へ+18ポイント変化するという結果が得られました。lazyload画像に空間が事前確保されていなかったことが、CLS を大幅に押し上げていたボトルネックであったことがこの数値から読み取れます。

ボトルネック3: jQuery CDNが外部ドメインから配信されている ​

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

観察された状況 ​

jQueryが ajax.googleapis.com（Google Hosted Libraries）から読み込まれている状態が観測されました。外部ドメインからのリソース取得には、DNS解決・TCP接続・TLSハンドシェイクといった接続コストが発生します。同一ドメインであれば既存のHTTP接続を再利用できるため、これらのオーバーヘッドは不要になります。

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

jQueryのファイルを tamachanshop.jp ドメイン上に配置し、同一ドメインからの配信に変更しました。

シミュレーション結果 ​

解消前	解消後

総合スコア 100の状態で実施したシミュレーションのため、スコア上の変化は見られませんでしたが、SI（Speed Index = ビューの視覚的な表示進捗の速さ）が119ms短縮される結果が得られました。外部CDNの接続コストが積み重なることで表示速度に影響を与えうることを示す結果です。

まとめ ​

タマチャンショップ（tamachanshop.jp）のトップページを観測したところ、総合スコア 53、LCP 13.3秒、CLS 0.447という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。

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

• サードパーティータグ（16種類以上）: 除去によって 総合スコア が+20、LCP が約10秒短縮。特に Google Tag Manager と配下タグの除去だけで+19ポイントの変化が観測されました。
• LCP画像へのlazyload適用: 解除と優先読み込み設定で LCP が92.5%短縮（3.1秒→0.2秒）。
• lazyload画像の空間未確保: SVGプレースホルダーとサイズ属性の付与で CLS が89%変化（0.447→0.047）、総合スコア が+18ポイント変化。
• jQuery CDNの外部ドメイン配信: 同一ドメイン化で SI が119ms短縮。

全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は53から100へ、LCP は13.3秒から0.1秒へと変化しました。LCP と CLS に集中していたボトルネックの影響の大きさが、この一連のシミュレーションによって確認できた形です。