「京都きもの市場」トップページの表示速度ボトルネック研究

着物・帯・和装小物を幅広く取り扱う日本最大級の着物専門ECサイトです。新品からリサイクル着物まで豊富な品揃えを誇り、モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

総合スコア が62から100へと38ポイント変化するというシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が21.7秒から0.2秒へと大幅な変化が観測されており、複数の強いボトルネックが存在していたことが読み取れます。

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

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

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

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

詳細レポート

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

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

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

www.kimonoichiba.com のHTMLに直接埋め込まれていたサードパーティータグは以下の2件です。

Google Tag Manager 経由では、以下のような約20種類のサービスが動的に読み込まれていました。

これらのサードパーティータグを段階的に除去した際の指標変化は次のとおりです。

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

特に、タグ除去後に残っていた不要な preconnect 要素19件の除去だけで 総合スコア が+6ポイント、LCP が9.3秒短縮されている点は注目に値します。サードパーティータグの除去後に、対応する preconnect が残存していると、使われない外部ドメインへのDNS解決やTLSハンドシェイクが無駄に発生し、他のリソースの読み込みを阻害する要因となっていました。

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

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

ボトルネック1: テキストリソースが未圧縮 ​

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

観察された状況 ​

HTML、CSS、JavaScriptなどのテキストリソース合計35件が、サーバーから GZIP 圧縮されずに配信されている状態が観測されました。テキストリソースは一般に60〜80%の圧縮率が得られるため、未圧縮のままでは転送データ量が本来の3〜5倍となり、ダウンロード時間に直接影響します。

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

35件のテキストリソース（HTML 2件、CSS 28件、JavaScript 5件）に GZIP 圧縮を適用した状態を作成し、その影響を計測しました。

シミュレーション結果 ​

解消前	解消後

GZIP 圧縮の適用だけで LCP が1.8秒短縮され、総合スコア が91から100に到達するという結果が得られました。テキストリソースの未圧縮がこのサイトにおける大きなボトルネックのひとつであったことが読み取れます。

ボトルネック2: 外部CDNからのリソース配信 ​

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

観察された状況 ​

jQuery、jQuery UI、Slickなどのライブラリ26件が、ajax.googleapis.com、cdnjs.cloudflare.com、cdn.jsdelivr.net といったパブリックCDNから読み込まれている状態が観測されました。外部ドメインからリソースを取得する場合、ドメインごとにDNS解決とTLSハンドシェイクが必要となり、100〜300ms程度の遅延が発生します。特に head 内のレンダリングブロックリソース（jQuery等）でこの遅延が生じると、ページ描画の開始が直接遅れることになります。

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

パブリックCDNから配信されていた26件のJavaScript/CSSリソースを、HTMLと同一のドメイン（www.kimonoichiba.com）から配信する状態を作成し、その影響を計測しました。

シミュレーション結果 ​

解消前	解消後

LCP が1.7秒から0.2秒へと1.5秒短縮される結果が得られました。総合スコア は既に100に達していたため変化しませんでしたが、実際のユーザー体験としては LCP の1.5秒短縮は大きな差です。パブリックCDNからのリソース配信が、接続コストを通じて表示速度のボトルネックとなっていたことが読み取れます。

ボトルネック3: head内のレンダリングブロックスクリプト ​

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

観察された状況 ​

head 内および本文途中に49個の script 要素が散在している状態が観測されました。head 内の script 要素はHTMLの解析をブロックし、スクリプトのダウンロードと実行が完了するまでブラウザが次の処理に進めなくなります。特にボトルネック2で同一ドメイン化されたJQuery等のスクリプトが head 内に残っていたため、レンダリングの開始が遅れる要因となっていました。

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

49個の script 要素を </body> 直前に移動し、HTMLの解析とコンテンツの描画を先行させる状態を作成しました。スクリプトの出現順序は維持しています。

シミュレーション結果 ​

解消前	解消後

FCP の変化量は0.1秒と小さいものの、CLS が0.027から0.017へと変化している点が注目されます。スクリプトの実行位置がレイアウトの安定性にも影響を与えていたことがこのシミュレーションから読み取れます。なお、このボトルネック単体の変化量は前の2件と比べると控えめですが、ボトルネック1（GZIP圧縮）やボトルネック2（CDN同一ドメイン化）と組み合わさることで、全体として LCP 21.7秒 → 0.2秒という大きな変化につながっています。

まとめ ​

京都きもの市場（www.kimonoichiba.com）の表示速度を観測したところ、総合スコア 62、LCP 21.7秒、FCP 2.7秒という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。

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

• サードパーティータグの集合体: 除去によって 総合スコア が +11、SI が 6.3割短縮。特に不要な preconnect 要素の残存が大きな影響を与えていました。
• テキストリソースの未圧縮: GZIP 圧縮の適用で LCP が 1.8秒短縮、総合スコア が +9。サーバー設定レベルのボトルネックでありながら、影響は非常に大きいものでした。
• 外部CDNからのリソース配信: 同一ドメイン化で LCP が 1.5秒短縮。パブリックCDNの接続コストが積み重なっていました。
• head内のレンダリングブロックスクリプト: body末尾への移動で FCP が 0.1秒短縮、CLS が 0.010 変化。

全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は62から100へ、LCP は21.7秒から0.2秒へと変化しました。特にGZIP圧縮とCDN同一ドメイン化という2つの技術的要因が、このサイトの表示速度に与えていた影響の大きさが、シミュレーション結果から確認できます。