「e-イヤホン」トップページの表示速度ボトルネック研究

25,000点超の製品を揃える国内最大級のイヤホン・ヘッドホン専門店です。ワイヤレスから有線、ゲーミング、骨伝導、オーダーメイドまで幅広いラインナップを扱うECサイトで、Shopifyプラットフォーム上で運営されています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

総合スコア が70から100へと30ポイント変化するというシミュレーション結果を得ました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が18.8秒から1.0秒へと大きな変化が観測されており、この指標に強く影響するボトルネックが存在していたことが読み取れます。SI（Speed Index = ビューの視覚的な表示進捗の速さ）も6.0秒から1.7秒へと短縮される結果が得られました。

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

LCP にあたるメインスライダー画像の表示は、解消シミュレーション後でも依然として遅めではあります。とはいえ、観測時点と比べれば大幅に早く表示されるようになっており、改善ポテンシャルの大きさが体感できる結果となっています。

なお、ヘッダーの「e☆earphone」というタイトル部分に若干の表示崩れが生じていますが、これは動画作成ツールのレンダリングの都合によるものであり、実際のサイト表示とは異なります。ご了承ください。

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

詳細レポート

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

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

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

e-earphone.jpでは20種類のサードパーティータグが検出されました。

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

Web Pixels Manager / GTM経由で読み込まれているタグ ​

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

全タグを除去した状態では 総合スコア が70から74へ変化し、LCP は18.8秒から13.4秒へ、SI は6.0秒から3.0秒へと短縮される結果が得られました。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルの存在が読み取れます。以降のセクションでは、この状態を起点としてサイト固有のボトルネックを観察していきます。

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

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

ボトルネック1: head内のブロッキングインラインスクリプト ​

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

観察された状況 ​

<head> 内に defer / async 属性のないインラインスクリプトが18個存在していました。これらはHTMLパーサーをブロックし、スクリプトが実行されるまで後続のDOM構築が中断されます。その結果、LCP 対象画像の読み込み開始が大幅に遅れ、LCP が8,000ms~32,000msの幅で不安定に変動していました。

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

18個のブロッキングインラインスクリプトを </body> 直前に移動し、<head> 内にはメタ情報やCSS、defer / async 付きスクリプトのみを残す構成としました。

シミュレーション結果 ​

本研究で最も大きな影響が観測されたボトルネックです。<head> 内のブロッキングインラインスクリプトを <body> 末尾に移動しただけで 総合スコア が99に到達し、LCP も1.7秒に安定する結果が得られました。HTMLパーサーのブロックという構造的な要因が、LCP の極端な変動と高い計測値の主因であったことがこの結果から読み取れます。

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

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

観察された状況 ​

jQueryが ajax.googleapis.com から読み込まれており、別ドメインへの DNS 解決と TLS ハンドシェイクの遅延が発生していました。加えて defer / async 属性がなくレンダリングブロックリソースとなっており、Lighthouse の推定ではsavingsが403msと報告されていました。

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

jQueryの配信元を ajax.googleapis.com から www.e-earphone.jp のドメイン配下に変更し、既存のHTTP接続を再利用できる構成としました。

シミュレーション結果 ​

外部ドメインからの配信を同一ドメインに切り替えただけで FCP が1.3秒短縮され、総合スコア が11ポイント変化する結果が得られました。Public CDN経由でのライブラリ配信は広く使われていますが、同一ドメイン配信との接続コスト差が FCP に対して無視できないボトルネックとなっていたことがこの結果から読み取れます。

ボトルネック3: 日本語Webフォント（Noto Sans Japanese 6.05MB） ​

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

観察された状況 ​

Noto Sans Japanese 3ウェイト（Regular / Semi-Bold / Bold）が使用されており、フォントファイルの合計サイズは6.05MBでした。日本語Webフォントは文字数の多さからデータ量が非常に大きく、英語フォントとは桁違いのリソースサイズになります。このシミュレーションはサイトのフォントの見た目が変わることを前提に行いました。

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

@font-face 定義を削除し、CSS 変数のフォント指定をシステムフォントスタック（-apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN など）にフォールバックする変更を加えました。

シミュレーション結果 ​

総合スコア の変化は+1ですが、SI が3.3秒から1.7秒へと大幅に短縮され、ページ全体の総転送サイズは14.0MBから8.0MBへと43%削減される結果が得られました。フォント転送サイズだけでも6.05MBから62.1KBへと99%の削減です。総合スコア への影響は限定的に見えるものの、SI や転送サイズの数値から、日本語Webフォントがページ読み込み全体の体感速度に与えていた影響の大きさを読み取れます。

まとめ ​

e-earphone.jp（e☆イヤホン）の表示速度を観測したところ、総合スコア 70、LCP 18.8秒という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。

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

• サードパーティータグ（20種類）: 除去によって 総合スコア が +4、LCP が 5.4秒短縮、SI が 3.0秒短縮。GTMが3コンテナ、Okendo Reviews が71リソースを読み込んでいたことが特に目立ちました。
• head内ブロッキングインラインスクリプト（18個）: <body> 末尾への移動で LCP が8.1~32.4秒の変動状態から1.7秒に安定化。総合スコア が24ポイント以上変化した、最大のボトルネックでした。
• jQuery CDNの外部ドメイン配信: 同一ドメイン化で FCP が1.3秒短縮、総合スコア が +11。
• 日本語Webフォント（Noto Sans Japanese 6.05MB）: 削除で SI が1.6秒短縮、総転送サイズが43%減少。

全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は70から100へ、LCP は18.8秒から1.0秒へと変化しました。特にインラインスクリプトによるHTMLパーサーのブロックという構造的な要因が LCP の極端な計測値の主因であり、その解消だけで 総合スコア が99に到達するという影響の大きさが、この一連のシミュレーションによって確認できた形です。