「ホームセンターバロー」トップページの表示速度ボトルネック研究

中部地方を中心にホームセンターを展開するバローグループの公式オンラインショップです。園芸用品、DIY資材、家電、日用品など幅広い商品カテゴリを取り扱っています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

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

総合スコア が35から100へと65ポイント変化するというシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が20.2秒から1.2秒へと大幅な変化が観測されています。また、CLS（Cumulative Layout Shift = レイアウトのずれ）も1.039から0.016へと大きく変化しており、表示速度とレイアウト安定性の両面にボトルネックが存在していたことが読み取れます。

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

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

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

詳細レポート

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

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

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

本サイトで確認されたサードパーティータグは次のとおりです。いずれもGoogle Analytics / GTM関連のトラッキングコードであり、機能が重複していました。

これらのタグを段階的に除去した際の指標変化は以下のとおりです。

第2段階ではシミュレーション誤差により数値が一時的に悪化していますが、スクリプト転送量は997KBから622.5KBへ374.5KB削減されています。

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

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

サードパーティータグの影響を排除した上で、サイト固有のボトルネックを観察していきます。全15件のボトルネック仮説を検証しました。その中から、特に影響の大きかった3件を紹介します。

ボトルネック: ファーストビュー外画像の一括読み込み ​

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

観察された状況 ​

ファーストビュー外に配置された13枚の画像（合計約1.9MB）が、ページ読み込み時に一括でダウンロードされていました。これにより、LCP 対象であるメインスライダー画像とネットワーク帯域を奪い合い、主要コンテンツの表示が遅延する状態が観測されました。

主な画像のサイズは以下のとおりです。

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

ファーストビュー外の13枚の <img> タグに loading="lazy" 属性を付与しました。この属性により、画像がビューポートに近づくまでダウンロードが開始されなくなり、初期読み込み時のネットワーク帯域が LCP 画像に集中します。

シミュレーション結果 ​

loading="lazy" という1つのHTML属性を付与するだけで、LCP が4.5秒短縮し、総合スコア が22ポイント上昇するというシミュレーション結果が得られました。ファーストビュー外の画像が初期読み込み時のネットワーク帯域に与えていた影響の大きさが読み取れます。

ボトルネック: jQuery CDNの外部ドメイン配信 ​

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

観察された状況 ​

jQueryライブラリが外部CDN（ajax.googleapis.com）から配信されていました。外部ドメインからリソースを取得する場合、DNSルックアップやTLSハンドシェイクといった追加の接続コストが発生します。jQueryはページの描画に必要な基盤ライブラリであるため、この接続コストが FCP に直接影響していました。

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

ajax.googleapis.com から配信されていたjQuery 1.12.4を、サイトと同一ドメイン（homecentervalor.co.jp）から配信するように変更しました。これにより、既存のHTTP接続を再利用してリソースを取得できるようになります。

シミュレーション結果 ​

外部ドメインからの配信を同一ドメインに移行するだけで、FCP が約半分に短縮されるシミュレーション結果が得られました。外部CDNの接続オーバーヘッドが FCP に与えていた影響の大きさが読み取れます。

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

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

観察された状況 ​

ページ内の全38枚の画像がJPEGまたはPNG形式で配信されていました。特に LCP 対象のメインスライダー画像は278.6KBあり、画像の転送サイズが表示速度に影響を与えている状態が観測されました。

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

全38枚のJPEG/PNG画像をWebPフォーマットに変換しました。WebPはJPEGやPNGと比較して、同等の画質でファイルサイズを大幅に削減できるフォーマットです。

シミュレーション結果 ​

画像フォーマットをWebPに変換することで、LCP がさらに1.3秒短縮し、総合スコア は100に到達するシミュレーション結果が得られました。特に LCP 画像は86.9%のサイズ削減となっており、画像フォーマットの選択が表示速度に与える影響の大きさが読み取れます。

まとめ ​

本研究では、ホームセンターバロー公式オンラインショップのトップページについて、表示速度のボトルネックを観察しました。

サードパーティータグ（Google Tag Manager、MonsterInsights、WCEX_Google_Analytics_4）は、いずれもGoogle Analytics関連のトラッキングコードが重複して導入されている状態にあり、除去シミュレーションでは 総合スコア が35から64へ変化する結果が得られました。

サイト固有のボトルネックとしては、ファーストビュー外の13枚の画像（約1.9MB）が一括読み込みされていたことが最大の要因であり、loading="lazy" 属性の付与だけで LCP が4.5秒短縮するシミュレーション結果が得られました。また、jQueryが外部CDNから配信されていたことによる接続オーバーヘッドが FCP に影響しており、同一ドメインへの移行で約0.5秒の短縮が観測されました。画像フォーマットについては、WebPへの変換で画像サイズが64.2%削減され、LCP がさらに1.3秒短縮しています。

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