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

北海道・小樽の洋菓子舗ルタオの公式オンラインショップです。看板商品「ドゥーブルフロマージュ」をはじめ、チーズケーキやスイーツ、焼菓子などを販売しており、ギフト・贈答品としての利用に特化した品揃えが特徴です。本記事では、モバイル環境における表示速度のボトルネックを観察・計測した研究結果を報告します。

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

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

総合スコア は63から97へと34ポイントの変化が観測されました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）は11.8秒から0.2秒へ、FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）は3.8秒から0.2秒への変化が観測されており、ボトルネックの影響がきわめて大きかったことが読み取れます。CLS（Cumulative Layout Shift = レイアウトのずれ）は観測時点の0.000から0.114に増加していますが、これはサードパーティータグ除去シミュレーションに伴う副次的な影響であり、Good判定の範囲内に収まっています。

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

観測時点と解消シミュレーション後のページ読み込みを動画で比較したものです。左が観測時点、右が解消シミュレーション後です。データ転送量がほぼ10分の1まで削減され、表示速度が劇的に改善された様子がわかります。

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

詳細レポート

本研究ではまず、サードパーティータグ（広告・アクセス解析・チャットなど外部サービスのスクリプト）を除去するシミュレーションを行いました。これには2つの目的があります。ひとつは、サードパーティータグ全体が表示速度に与えている影響、すなわち最適化による最大の改善ポテンシャルを観測すること。もうひとつは、サイト固有のボトルネックを観察するためのノイズ除去です。本サイトでは合計132個のリソースがサードパーティータグに関連していました。なお、これらのタグを完全に除去することは現実的ではありません。

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

オリジナルデータの全272リソースのうち、サードパーティタグが132件（48.5%）を占めています。リソース数ではページのほぼ半分がサードパーティタグであり、ページ表示に必要なサイト固有のリソースと同等の数が外部タグによって消費されていることがわかります。

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

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

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

段階的に除去した際の指標変化は以下の通りです。

最終段階で総合スコアが51まで低下していますが、これはGTMの async-hide スニペット（ページのちらつきを防ぐためにページ全体を一時的に非表示にする仕組み）が除去されたことで CLS が0.571に変化した副作用であり、後続のシミュレーションで対処しています。CLS の増加分を除けば、FCP は3.8秒から2.1秒、SI は6.0秒から2.5秒、LCP は11.8秒から10.6秒へと変化しており、サードパーティータグが描画時間に与えていた影響の大きさが数値として観測されました。なお、これらのタグはいずれもサイト運営上の役割を担っているため完全な除去は現実的ではありません。ここからはノイズを除去した状態で、サイト固有のボトルネックを観察していきます。

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

サードパーティータグの影響を切り分けた上で、サイト固有のコーディングに残存するボトルネックを観察しました。全14件のプラクティスを検証しています（うち1件は不採用）。その中から、特に影響の大きかった3つのボトルネックを取り上げます。

ボトルネック: 非WebPフォーマットの画像 ​

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

観察された状況 ​

本サイトでは80個のJPEG/PNG画像が使用されており、画像転送量は合計19.47MBに達していました。特にLCP対象であるトップスライダーの画像（456KB）のダウンロードに時間がかかっており、LCP が10.6秒という観測値を示していました。画像転送が LCP の主要なボトルネックとして機能していることが読み取れます。

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

80個のJPEG/PNG画像をすべてWebP形式に変換するシミュレーションを行いました。WebPはGoogleが開発した画像フォーマットで、JPEG/PNGと同等の画質を保ちながらファイルサイズを大幅に削減できる特性があります。

シミュレーション結果 ​

実施前	実施後

画像転送量が85%削減されたことで、LCP が10.6秒から2.8秒へと変化し、総合スコア は21ポイントの変化が観測されました。画像転送量そのものが LCP の主要なボトルネックとして機能していたことが数値的に立証されました。

ボトルネック: width/height属性のないimg要素 ​

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

観察された状況 ​

サードパーティータグ除去後、CLS が0.571という観測値を示しました。原因のひとつとして、96個のimg要素に width / height 属性が設定されておらず、画像読み込み時にブラウザがアスペクト比を事前計算できない状態であったことが観察されました。その結果、画像読み込みのたびにレイアウトが大きくずれる現象が確認されています。

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

96個のimg要素に、各画像の実際のピクセルサイズに基づいた width / height 属性を追加するシミュレーションを行いました。

<!-- 変更前 -->
<img src="/images/top/item01.jpg" alt="商品画像">

<!-- 変更後 -->
<img src="/images/top/item01.jpg" alt="商品画像" width="300" height="300">

ブラウザは画像のダウンロード前に width / height 属性からアスペクト比を計算し、必要な領域を事前に確保します。これにより、画像読み込み時のレイアウトシフトがどの程度変化するかを観測しました。

シミュレーション結果 ​

実施前	実施後

CLS が0.427から0.114へ、総合スコア が16ポイント変化する結果が観測されました。width / height 属性の欠落がレイアウトシフトの主要なボトルネックとして機能していたことが立証されました。

ボトルネック: Google Fonts（Noto Serif JP）の読み込み ​

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

観察された状況 ​

本サイトでは Google Fonts から日本語Webフォント「Noto Serif JP」を読み込んでいました。このフォントに関連するリソースが描画プロセスにおいて主要なボトルネックとして機能している様子が観察されました。

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

Google Fonts（Noto Serif JP）の読み込みを除去し、CSSの font-family をシステムフォント（serif）に置き換えた状態で再計測しました。

シミュレーション結果 ​

実施前	実施後

LCP が2.8秒から0.2秒へ、FCP が1.4秒から0.2秒への変化が観測されました。日本語Webフォントはラテン文字フォントに比べてデータ量が桁違いに大きく、本サイトでは933msのレンダリングブロックと約400KBのフォント転送が発生していました。数値の上では、日本語Webフォントの読み込みが描画速度に対する主要なボトルネックとして機能していたことが立証される結果となっています。

まとめ ​

ルタオの公式オンラインショップを対象とした表示速度ボトルネックの実例研究では、一連の解消シミュレーションを通じて 総合スコア が63から97へ34ポイント変化する結果が観測されました。

本研究を通じて、以下3種類のボトルネックの影響の大きさが立証されました。

1つ目は、サードパーティータグが描画時間に与えていた影響の大きさです。132個のリソースが関連しており、FCP や SI の遅延の大部分がここに集中していたことが段階的な除去シミュレーションから読み取れました。

2つ目は、画像フォーマットが LCP に与えていた影響の大きさです。WebP変換シミュレーションによって画像転送量が85%削減された結果、LCP に7秒以上の変化が観測されました。画像転送量そのものが LCP の主要なボトルネックとして機能していたことが明確になっています。

3つ目は、width / height 属性の欠落がレイアウトシフトに与えていた影響の大きさです。属性追加シミュレーションにより CLS が0.427から0.114に変化し、総合スコア は16ポイントの変化が観測されました。

本記事は、これらの項目を改善すべきと指南するものではなく、観察されたボトルネックの性質と影響の大きさを数値で記録した研究報告です。