「MTG ONLINESHOP」トップページの表示速度ボトルネック研究

MTG ONLINESHOPは、美容機器や健康機器で知られるMTGが運営する公式通販サイトです。ReFaやSIXPADなど、美容と健康をテーマにした多彩な商品を取り扱っており、メーカー直営ならではの品揃えが特徴のECサイトです。

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

Lighthouseによる計測と、ボトルネック解消シミュレーションの結果、以下の数値変化が観測されました。

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

LCPは4.0秒から0.1秒へと97%、FCPは1.5秒から0.1秒へと93%の変化が観測され、総合スコアは76点から95点に変動しました。観測時点で存在していたボトルネックの影響の大きさが、この数値の差から読み取れます。

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

観測時点と解消シミュレーション後のページ読み込みを並べたものです。左が観測時点、右が解消シミュレーション後です。表示速度がかなり速くなった様子が見て取れます。

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

詳細レポート

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

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

サードパーティタグのリソース構成	サードパーティタグ除去前後のリソース件数

オリジナルデータでは全533件のリソースのうち、サードパーティが291件（54.6%） を占めています。自社リソースは242件（45.4%）であり、ページが読み込むリソースの過半数がサードパーティ由来です。 サードパーティタグを除去した結果、リソース件数は533件→258件に半減しました。除去後も残る24件のサードパーティリソースは、Google Fonts やパブリックCDN（jQuery、Swiper等）であり、これらは後続フェーズで個別に対処しています。

導入されているタグ一覧 ​

観測時点では、2つのタグマネージャーを経由して合計275件のリソースが読み込まれていました。

Tealium iQの配下では、Facebook、Twitter、Taboola、Criteo、SmartNews、Bing、LINE、b-dashなど20以上のサードパーティーサービスが連鎖的に読み込まれていました。Google Tag Manager経由では、Google Analyticsが3プロパティ、Google Adsのコンバージョンタグが8件、DoubleClickなどが動作していました。

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

サードパーティータグを全て除去した状態では、総合スコアは76から96へ、SIは6.4秒から1.6秒へと変化する結果が得られました。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。

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

サードパーティータグの影響を取り除いた状態から、さらにページ構成に起因するボトルネックを切り分けるシミュレーションを行いました。全16件のボトルネックを検証した中から、特に影響の大きかった3つを紹介します。

ボトルネック: 外部CDNから配信されるライブラリ ​

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

観察された状況 ​

jQuery、Swiper、Magnific Popupなどのライブラリが、ajax.googleapis.comやcdnjs.cloudflare.comといった外部CDNから配信されていました。外部ドメインへのアクセスには、DNSの名前解決やTLSハンドシェイクなどの接続確立のコストが発生しており、これが読み込み時間を押し上げる要因として観測されました。

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

外部CDNから配信されていた8つのリソースを、自社ドメイン（www.mtgec.jp）から配信する構成に置き換えてシミュレーションを行いました。

<!-- 観測時点: 外部CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- シミュレーション: 同一ドメイン -->
<script src="/js/lib/jquery.min.js"></script>

対象は、jQuery 1.12.4、jQuery UI 1.12.1、Swiper 4.5.0、Magnific Popup 1.1.0（CSS + JS）の4ライブラリ8ファイルです。

シミュレーション結果 ​

FCPは約54%、LCPは約45%の変化が観測されました。配信元の切り替えのみで見た目や機能に影響を与えないシミュレーションでありながら、外部ドメインへの接続コストがいかに大きなボトルネックとなっていたかが読み取れます。

ボトルネック: LCP画像の読み込み優先度 ​

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

観察された状況 ​

メインビジュアルカルーセルの最初のスライドに表示されるLCP対象画像が、ブラウザのデフォルトの優先度で読み込まれていました。LCP（Largest Contentful Paint）の対象となる画像はページ内で最も大きなコンテンツ要素であり、この画像の表示完了タイミングがスコアを直接左右します。観測時点では、ここに明示的な優先度指定が与えられていない状態でした。

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

LCP対象画像にfetchpriority="high"とloading="eager"を追加してシミュレーションを行いました。

<!-- 観測時点 -->
<img class="spObj_" src="/img/mainvisual/1500x1680_refa_WhiteDay2026_KV_honten_top.jpg" alt="">

<!-- シミュレーション -->
<img class="spObj_" src="/img/mainvisual/1500x1680_refa_WhiteDay2026_KV_honten_top.jpg" alt=""
     fetchpriority="high" loading="eager">

fetchpriority="high"はブラウザに対してこの画像を他のリソースより優先的に取得するよう指示する属性で、loading="eager"は遅延読み込みを無効化します。

シミュレーション結果 ​

HTML属性を2つ追加するシミュレーションだけでLCPが23%変化しました。このサイトではLCP対象画像に優先度指定が与えられていないことが明確なボトルネックとして観測されています。

ボトルネック: Google Fontsによるレンダリングブロック ​

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

観察された状況 ​

Google Fonts（Montserrat）のCSS読み込みがfonts.googleapis.comへの外部リクエストを発生させ、326msのレンダリングブロックが観測されました。レンダリングブロックとは、CSSの読み込みが完了するまでページの描画が停止する現象です。

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

Google FontsのCSS読み込みを削除し、font-familyをシステムフォント（sans-serif）に置き換えた状態でシミュレーションを行いました。

<!-- 削除したタグ -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">

シミュレーション結果 ​

LCPが1.2秒から0.1秒へと約90%変化するという劇的な結果が観測されました。Google FontsをWebサイトで利用する際の手段としての評価とは別の問題として、外部CSSの読み込みがレンダリングブロックとして働き、これほどのボトルネックになり得ることがこのシミュレーションで立証されています。

このサイトではMontserratに加え、自社配信のNoto Sans JP（約1MB）も併用されていました。日本語のWebフォントは英語フォントと比較してデータ量が桁違いに大きく、ここで観測された数値の多くはその重量に起因していると考えられます。日本語Webフォントがどれほど大きなボトルネックになり得るかという一例として、この観測結果は興味深いものです。

まとめ ​

MTG ONLINESHOPを対象としたボトルネック研究では、総合スコアが76点から95点、LCPが4.0秒から0.1秒まで変化するシミュレーション結果が得られました。この差分はすべて、観測時点のページに存在していたボトルネックの影響の大きさを示しています。

今回の研究で特に大きな影響が観測されたのは次の3点です。

1つ目はサードパーティータグの総量です。2つのタグマネージャーから読み込まれる275件のリソースだけで、総合スコアに20点分、SIに約4.9秒の差が観測されました。視覚的な差分がゼロだったことから、ユーザー体験に寄与しないリソースがスコアを大きく押し下げていた事実が読み取れます。

2つ目は外部ドメインへの依存です。CDN経由のライブラリ配信や、Google Fontsの外部CSS読み込みなど、外部ドメインへの接続コストがFCPやLCPに対して大きなボトルネックとして観測されました。

3つ目はレンダリングブロックです。Google FontsのCSS読み込みが326msのレンダリングブロックを引き起こしており、この1点を取り除くだけでLCPが約90%変化するという結果が得られています。単一のリソースがこれほどクリティカルパスを支配し得るという実例として、注目に値するデータです。

本研究は何らかの改善施策を提案するものではなく、観測時点のサイトにどのようなボトルネックが存在し、それぞれがどの程度の数値影響を持っていたかを記録した研究報告です。