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

富澤商店（TOMIZ）は、製菓・製パン材料を中心に扱うECサイトです。小麦粉、バター、チョコレート、ナッツ、製菓道具など幅広い商品を取り揃え、家庭での手作りからプロフェッショナル用途まで対応しています。このトップページについて、モバイル環境での表示速度上のボトルネックを研究するため、解消シミュレーションを実施しました。

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

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

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

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

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

本サイトでは、読み込みプロセス動画上では観測時点と解消シミュレーション後で大きな差は見られません。一部の画像の表示タイミングに若干の改善が観測される程度に留まっています。

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

詳細レポート

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

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

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

富澤商店オンラインショップで確認されたサードパーティータグは次のとおりです。

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

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

合計13種類、転送サイズは約2MBに達しており、ページ全体のJavaScript（3.62MB）の大部分を占めていました。段階的に除去した際の指標変化は次のとおりです。

サードパーティータグを全て除去した状態では、総合スコア は60から82へ変化し、LCP は13.5秒から2.2秒まで短縮される結果が得られました。特に広告コンバージョンタグの除去で LCP が11.2秒から3.6秒へと7.6秒短縮されており、広告タグが直列的にJavaScriptを実行していたことの影響の大きさが読み取れます。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。

以降のセクションでは、この状態を起点としてサイト固有のボトルネックを観察していきます。

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

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

ボトルネック1: 画像のwidth/height属性未指定によるレイアウトシフト ​

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

観察された状況 ​

ページ内の131個の <img> 要素のうち、width / height 属性を持っているものは39個のみで、92個の画像にこれらの属性が設定されていない状態が観測されました。width / height 属性がない場合、ブラウザは画像のダウンロードが完了するまで表示領域を確保できず、画像が読み込まれたタイミングで周囲のコンテンツが押しのけられる「レイアウトシフト」が発生します。CLS（Cumulative Layout Shift = レイアウトシフトの累積量）の値は0.323と、「良好」の基準である0.1を大きく超えていました。

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

92個の <img> 要素に対して、各画像ファイルの実寸に基づいた width / height 属性を追加しました。

シミュレーション結果 ​

CLS が0.323から0.061へと大きく変化し、総合スコア が一つのボトルネック解消だけで82から98へ16ポイント変化するという結果が得られました。width / height 属性の未指定が CLS の悪化を通じて 総合スコア に対して非常に大きな影響を与えていたことが、このシミュレーション結果から読み取れます。

ボトルネック2: JPEG/PNG画像のWebP未変換 ​

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

観察された状況 ​

ページ内のJPEG/PNG画像41件が、次世代フォーマットであるWebPに変換されずに配信されている状態が観測されました。LCP画像はCloudinary経由で自動的にWebPに変換されていましたが、d3d7exujemgi7m.cloudfront.net から配信されるヘッダーバナーやカテゴリアイコンなどの画像はJPEG/PNGのまま配信されていました。

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

JPEG/PNG画像41件をWebP形式に変換しました。元サイズ合計938.6KBに対して変換後は496.9KBとなり、441.7KB（47.1%）の削減となりました。

シミュレーション結果 ​

LCP 画像は既にCloudinaryでWebP変換済みであったため、LCP への直接的な影響は観測されませんでした。ただし、41件の画像で合計441.7KB（47.1%）のデータ削減が確認されており、ネットワーク帯域の効率化やページ全体の転送量削減には寄与しています。WebP未変換の画像が大量に存在していたこと自体は、潜在的なボトルネック要因として観測に値する事実です。

まとめ ​

富澤商店オンラインショップのトップページの表示速度を観測したところ、総合スコア 60、LCP 13.5秒という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。

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

• サードパーティータグの集合体（13種類・約2MB）: 除去によって 総合スコア が +22、LCP が11.3秒短縮。特に広告コンバージョンタグの除去で LCP が7.6秒短縮される大きな影響が観測されました。
• 画像のwidth/height属性未指定（92個の <img> 要素）: 属性追加によって CLS が0.323から0.061へ変化し、総合スコア が +16。単独で最も大きなスコア変化をもたらしたサイト固有のボトルネックでした。
• JPEG/PNG画像のWebP未変換（41件）: 変換によって441.7KBのデータ削減。指標上の変化は小さかったものの、ページ全体の転送効率に関わる要因として観測されました。

全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は60から98へ、LCP は13.5秒から2.2秒へと変化しました。サードパーティータグの影響が突出して大きい一方で、画像の width / height 属性という基本的なHTML属性の未指定が CLS と 総合スコア に対して非常に大きな影響を持っていたことが、この一連のシミュレーションによって確認できた形です。