「久原本家」トップページの表示速度ボトルネック研究

茅乃舎（かやのや）の「だし」や、博多椒房庵の明太子などで知られる久原本家グループの公式通販サイトです。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

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

総合スコア が70から100へと30ポイント変化するシミュレーション結果を得ました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が18.5秒から0.1秒へと劇的な変化を示しており、表示速度を大きく制約していたボトルネックの存在が読み取れます。なお CLS（Cumulative Layout Shift = レイアウトのずれ）は0.056の増加が見られますが、Lighthouse の「良好」基準（0.1以下）を十分に満たす範囲にとどまっています。

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

本サイトでは、観測時点で一度途中までレンダリングが進んだ後、描画プロセスが巻き戻ったように見えてから再度進行する様子が確認できます。これはおそらく何らかのサードパーティータグの影響と推測されますが、いずれにせよコンテンツが確定するまでにかなりのタイムラグが見られます。一方、解消シミュレーション後はページの全体像がかなり早いタイミングで確定して表示されるように変化しています。

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

詳細レポート

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

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

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

本サイトではHTMLから直接読み込まれているタグと、Google Tag Manager 経由で読み込まれているタグの2系統が確認されました。

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

GTM-NZBKD3 経由で読み込まれているタグ ​

HTMLに直接記述されたタグとGTM経由のタグを合わせると、約26種類のサードパーティータグが導入されていました。段階的に除去した際の指標変化は次のとおりです。

サードパーティータグを全て除去した状態では、総合スコア は70から100へ変化し、LCP は18.5秒から0.1秒、SI は5.9秒から0.9秒まで短縮される結果が得られました。特に Optimize Next（GTM-K5TLG5HD）はCSSの visibility:hidden でページ全体を最大2秒間非表示にする処理を行っており、単体で LCP を14秒以上遅延させていたことが観測されました。これはあくまで上限値ですが、サードパーティータグの最適化には無視できない改善ポテンシャルの存在が読み取れます。

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

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

なお、サードパーティータグ除去後の時点で 総合スコア は既に100に達しており、サイト自体のHTML・CSSの構成は効率的であることが確認されています。以下のボトルネックは、スコアには大きく反映されないものの、転送効率やリソース取得の最適化という観点で影響が観測されたものです。

ボトルネック1: 画像フォーマットが未最適化 ​

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

観察された状況 ​

ページ内で使用されている107枚のJPEG/PNG画像が、従来のフォーマットのまま配信されていました。画像データの合計サイズは6.13MBに達しており、ページ全体の転送サイズ（11.98MB）の約半分を画像が占めていました。

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

全107枚の画像をWebP形式に変換しました。JPEG画像にはロッシー変換、PNG画像にはロスレス変換を適用し、視覚的な変化がないこと（Diff Percent 0.00%）を確認しています。

シミュレーション結果 ​

Lighthouse のスコアへの反映は限定的でしたが、画像サイズが約70%削減され、ページ全体の転送サイズも約37%減少する結果が得られました。低速回線環境でのユーザー体験に影響を与えうるボトルネックであったことが、転送サイズの変化量から読み取れます。

ボトルネック2: テキストリソースのGZIP圧縮が未適用 ​

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

観察された状況 ​

kubara.jp ドメインから配信されているHTML・CSS・JavaScriptなどのテキストリソース65件に、GZIP 圧縮が適用されていない状態でした。

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

対象の65件のテキストリソースに GZIP 圧縮を適用しました。

シミュレーション結果 ​

スコアへの直接的な影響は小さいものの、転送サイズの約17%削減という結果が得られました。GZIP 圧縮はサーバー設定で適用できるインフラ層のボトルネックであり、サイトの機能や見た目にはまったく影響を与えません。

ボトルネック3: CSSファイルの分散 ​

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

観察された状況 ​

ページのスタイルシートが9個のCSSファイル（base.css、style.css、module.css、system.css、swiper.css など）に分散して読み込まれていました。CSSはレンダリングブロックリソースであり、すべてのCSSファイルのダウンロードが完了するまでページの描画が開始されません。

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

9個のCSSファイルを1ファイルに結合し、HTTPリクエスト数を削減しました。

シミュレーション結果 ​

スコアの変動は微小でしたが、HTTPリクエスト数の削減によりブラウザのリソース取得効率の向上という結果が得られました。レンダリングブロックリソースの数を減らすことで、描画開始までの待ち時間に影響を与えていたボトルネックであったことが構造的に読み取れます。

なお、CSSの統合・1ファイル化は、現在では HTTP/2 の普及などにより必ずしも有効なプラクティスとは限りません。今回のシミュレーションのように良好な結果が観測されることもありますが、参考程度にとどめてください。

まとめ ​

本研究では、久原本家通販サイトのトップページにおける表示速度のボトルネックを観察しました。

最も大きな影響を与えていたのはサードパーティータグであり、特に Optimize Next（GTM-K5TLG5HD）は visibility:hidden によるページ非表示処理で LCP を14秒以上遅延させていました。メインGTM（GTM-NZBKD3）経由の約20種類のタグも SI を3.7秒以上遅延させる要因となっていました。サードパーティータグを全て除去した状態では 総合スコア が70から100へ、LCP が18.5秒から0.1秒へ変化するシミュレーション結果が得られています。

サイト自体のHTML・CSS構成は効率的であり、サードパーティータグ除去後の時点で 総合スコア 100に到達していました。サイト固有のボトルネックとしては、画像フォーマットの未最適化（69.9%の画像サイズ削減ポテンシャル）、GZIP 圧縮の未適用（17%の転送サイズ削減）、CSSファイルの分散（9ファイル→1ファイル）が観測されましたが、いずれもスコアへの反映は限定的でした。この結果から、本サイトの表示速度に対してはサードパーティータグが圧倒的に大きなボトルネックであったことが明確に読み取れます。