「ユーキャン通販ショップ」トップページの表示速度ボトルネック研究

株式会社ユーキャンが運営する公式通販サイトです。テレビCMや新聞広告で紹介された商品を中心に、電子辞書、オーディオ機器、健康グッズ、食品、ファッションアイテムなど幅広いカテゴリの商品を取り扱っています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているかを研究するため、解消シミュレーションを実施しました。

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

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

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

総合スコア が69から100へと31ポイント変化するというシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が10.5秒から0.1秒へと劇的な変化を示しています。TBT（Total Blocking Time = メインスレッドのブロック時間）は観測時点から0msと良好で、CLS（Cumulative Layout Shift = レイアウトのずれ）も0.046と比較的小さい値であったことから、本サイトのボトルネックは主に LCP と FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）に集中していたことが読み取れます。

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

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

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

詳細レポート

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

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

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

ユーキャン通販ショップのトップページでは、284件のリソースのうち142件（50%）がサードパーティータグ由来であることが確認されました。

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

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

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

サードパーティータグを全て除去した状態では、総合スコア が69から93へ変化し、LCP は10.5秒から3.1秒へと約7.4秒短縮される結果が得られました。特に ReviCo、NaviPlus、GlobalSign、MessagingService の除去だけで 総合スコア が+26ポイント変化しており、これらのタグが大量のリソースをフェッチすることでページ全体の読み込みプロセスに大きな負荷をかけていたことが読み取れます。最終段階で 総合スコア が96から93に変化しているのは計測揺らぎの範囲内です。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが分かります。

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

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

ボトルネック1: パブリックCDNの外部配信 ​

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

観察された状況 ​

jQuery、jQuery UI、slick-carouselといったJavaScriptライブラリが、ajax.googleapis.com や cdnjs.cloudflare.com といった外部CDNから読み込まれている状態が観測されました。外部ドメインからのリソース取得には、DNSルックアップ、TCP接続、SSL/TLSハンドシェイクといった接続コストが発生します。HTMLと同一のドメインであれば既存のHTTP接続を再利用できるため、これらのオーバーヘッドは不要になります。

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

4件のCDNリソース（jQuery、jQuery UI、jQuery UIのCSS、slick-carousel）を、HTMLと同一の www.u-canshop.jp ドメインから配信するようURLを変更しました。

シミュレーション結果 ​

解消前	解消後

LCP が2.8秒から1.8秒へ約1秒短縮されるという変化が観測されました。外部CDNへの接続コストが LCP と FCP の両方に加算されていたことが、このシミュレーション結果から読み取れます。

ボトルネック2: レンダリングブロックJavaScript ​

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

観察された状況 ​

body 要素の途中に複数の script 要素が配置されている状態が観測されました。これらのスクリプトはHTMLパースをブロックし、その地点でスクリプトのダウンロードと実行が完了するまで後続のHTML（画像を含む）の解析が停止していました。結果として、LCP 対象の画像が表示されるまでの時間が長くなっていました。

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

body 途中に配置されていたスクリプト要素を body 末尾に移動し、独立したスクリプトに async / defer 属性を付与しました。

シミュレーション結果 ​

解消前	解消後

LCP が1.7秒から1.0秒へ0.7秒短縮されるという変化が観測されました。FCP には変化がなく SI は微増していますが、body 途中のスクリプトがHTMLパースを止めていたことが LCP の遅延要因であったことが、この結果から読み取れます。

ボトルネック3: Google Fontsの外部読み込み ​

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

観察された状況 ​

Google Fontsから Josefin Sans（欧文フォント）と Noto Sans JP（日本語Webフォント）が <link rel="stylesheet"> として head 要素内で読み込まれている状態が観測されました。このCSSはレンダリングブロックリソースとして機能しており、ブラウザはこのCSSのダウンロードが完了するまで画面の描画を開始できません。Google FontsのCSSのTTFB（Time To First Byte）が327msであり、これが FCP に直接加算されていました。日本語Webフォントはデータ量が非常に大きいため、表示速度への影響は英語フォントと比べて桁違いに大きくなります。

このシミュレーションはフォントの見た目が変わることを前提として行いました。

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

Google Fontsの <link> タグを除去し、CSS内のフォント指定をシステムフォント（sans-serif）にフォールバックさせました。

シミュレーション結果 ​

解消前	解消後

FCP が1.0秒から0.1秒へ、LCP も1.0秒から0.1秒へとそれぞれ約0.9秒短縮されるという変化が観測されました。Google FontsのCSSがレンダリングブロックとなっていたことで、ページの初回描画そのものが遅延していたことがこの結果から明確に読み取れます。デザインとしてWebフォントを使いたい意図は理解できますが、日本語Webフォントが表示速度に与える影響の大きさは、この数値が示すとおりです。

まとめ ​

ユーキャン通販ショップのトップページでは、サードパーティータグが全リソースの50%を占めており、これらを除去するだけで 総合スコア が69から93に変化する結果が得られました。サードパーティータグ由来の負荷がこのサイトの表示速度低下の最大の要因であったことが分かります。

サイト固有のボトルネックとしては、パブリックCDNからの外部配信が LCP を約1秒押し上げており、body 途中に配置されたレンダリングブロックJavaScriptがさらに0.7秒の遅延を生んでいました。また、Google Fontsのレンダリングブロックが FCP と LCP の両方を約0.9秒ずつ遅延させていました。

これらのボトルネックを全て解消するシミュレーションでは、LCP が10.5秒から0.1秒、FCP が1.8秒から0.1秒へと変化し、総合スコア は69から100まで変化する結果が得られました。