「chuya-online」トップページの表示速度ボトルネック研究
headセクションのレンダリングブロックスクリプト、メインスライダーの高さ未確保によるレイアウトシフト、大容量Webフォント（Material Symbols Outlined）などのボトルネックが観測され、これらを解消するシミュレーションではLighthouseスコアが93から最大100まで変化する結果が得られました。Core Web Vitalsの顕著な改善が期待できます。
chuya-online
詳細レポート 
ボトルネック一覧 
差分リポジトリ この研究は自主的に実施したものであり、サイト関係者からの依頼によるものではありません。掲載の取り下げを希望される場合はお問い合わせください。
ギター・ベース、ドラム、管楽器、電子ピアノ、DJ機器など幅広い楽器を取り扱うWeb総合楽器店です。新品・中古・アウトレット品のほか楽譜や教則本も販売しており、福岡に実店舗も展開しています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。
Core Web Vitalsにつながる指標の改善ポテンシャル
観測されたボトルネックを仮に解消した場合、Lighthouseスコアは以下のような変化を示しました。
| 観測時点 | 解消シミュレーション後 |
|---|---|
 |  |
| 指標 | 観測時点 | 解消シミュレーション後 | 変化量 |
|---|---|---|---|
総合スコア | 93 | 100 | +7 |
LCP | 1.3秒 | 0.2秒 | -1.2秒 |
FCP | 0.9秒 | 0.1秒 | -0.7秒 |
SI | 2.9秒 | 1.5秒 | -1.4秒 |
TBT | 0ms | 0ms | 変化なし |
CLS | 0.151 | 0.000 | -0.151 |
観測時点で 総合スコア は93と比較的高い水準にありましたが、LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が1.3秒から0.2秒へ、CLS（Cumulative Layout Shift = レイアウトのずれ）が0.151から0.000へと大きな変化が観測されました。元のスコアが高い状態でも、個別指標にはまだ大きなボトルネックが潜んでいたことが読み取れます。
読み込みプロセスの変化を動画で体験
本サイトは観測時点でも表示速度が速く、読み込みプロセス動画上での大きな違いは見られませんが、解消シミュレーション後は画像の表示タイミングが若干早くなった様子が見て取れます。
サードパーティータグの影響
本研究ではまず、サードパーティータグを段階的に除去することで、タグ全体が表示速度に与えている影響を観測します。あわせて、タグ由来のノイズを取り除くことで、サイト自体のボトルネックを観察しやすくする狙いもあります。タグを完全に除去することは現実的ではありませんが、最適化によってどこまでの改善ポテンシャルがあるかを把握する材料としてご覧ください。
本セクションは「サードパーティータグがページスピードに影響を与えている」という現実を数値で示すとともに、それらを最適化することでどれだけのスピード改善ポテンシャルがあるかを示唆するものです。
オリジナルページの全198リソースのうち、サイト固有のリソースは191件（約96.5%）、サードパーティタグ由来のリソースは7件（約3.5%）を占めていました。ページスピードのボトルネックを正確に把握するには、まずこの約3.5%のタグを取り除いてサイト固有のパフォーマンスを分離する必要があります。
chuya-online.comで確認されたサードパーティータグは次のとおりです。
| タグ名 | 種別 |
|---|---|
Google Tag Manager | タグマネージャー |
Google Analytics（GA4） | アクセス解析 |
Google/Doubleclick Ads | 広告トラッキング |
GA Audiences | リマーケティング |
上記はすべて Google Tag Manager（GTM-PF5R4M5）経由で読み込まれているため、GTMを除去すると依存リソースもすべて除去されます。本サイトはサードパーティータグの数が少なく、影響は限定的でした。
| 除去段階 | 総合スコア | 変化量 |
|---|---|---|
| 観測時点（タグあり） | 93 | - |
Google Tag Manager + 依存タグ全除去 | 94 | +1 |
サードパーティータグを全て除去した状態では、総合スコア は93から94へ、LCP は1.3秒から1.0秒へ、SI は2.9秒から2.0秒へ変化する結果が得られました。本サイトではタグ数が少ないため影響は限定的ですが、SI が約0.9秒短縮されている点から、一定の改善ポテンシャルがあることが読み取れます。以降のセクションでは、この状態を起点としてサイト固有のボトルネックを観察していきます。
サイト固有のボトルネック
サードパーティータグの影響を切り離した状態を起点として、サイト固有のボトルネックを調査しました。本研究では全11件のボトルネック仮説を検証しています。その中から、特に影響の大きかった3件を紹介します。
ボトルネック1: headセクションのレンダリングブロックスクリプト
観察された状況
<head> セクション内に async や defer 属性のない外部スクリプト（flex.js、swiper.min.js）が配置されている状態が観測されました。このようなスクリプトはHTMLパーサーをブロックし、スクリプトのダウンロードと実行が完了するまで後続のHTML解析が停止します。FCP（First Contentful Paint = 最初のコンテンツが描画されるまでの時間）に直接影響するボトルネックです。
解消シミュレーションの方法
flex.js に defer 属性を付与し、swiper.min.js を <head> から <body> 末尾に移動するという変更を加えました。
<!-- 変更前 -->
<head>
<script src="/template/default/js/flex.js?v1"></script>
<script src="/template/default/js/swiper/swiper.min.js"></script>
</head>
<!-- 変更後 -->
<head>
<script src="/template/default/js/flex.js?v1" defer></script>
</head>
<body>
<!-- ...ページコンテンツ... -->
<script src="/template/default/js/swiper/swiper.min.js"></script>
</body>シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
FCP | 0.7秒 | 0.3秒 | -0.4秒 |
LCP | 0.9秒 | 1.0秒 | +0.2秒 |
SI | 1.9秒 | 2.8秒 | +0.9秒 |
| 解消前 | 解消後 |
|---|---|
 |  |
FCP が0.7秒から0.3秒へ約58%短縮されるという結果が得られました。本プロジェクト全体で最も大きな FCP 変化です。一方で LCP と SI がわずかに増加していますが、これはスクリプト実行タイミングの変化によるもので、後続のボトルネック解消シミュレーションで解消されています。この結果から、<head> 内のレンダリングブロックスクリプトが FCP に対して大きなボトルネックとなっていたことが読み取れます。
ボトルネック2: メインスライダーの高さ未確保によるレイアウトシフト
観察された状況
メインスライダー（SliderPro）の高さがJavaScript初期化まで確定しない状態が観測されました。SliderProの .sp-slide は position: absolute が指定されているため、JavaScript実行前はスライド領域の高さが0として扱われ、初期化時に大きなレイアウトシフトが発生していました。CLS 0.151 という値の主因です。
解消シミュレーションの方法
インラインCSSで #mainSlider に min-height を事前定義し、ヘッダーやポイントバナーの寸法も固定しました。画像62箇所への width/height 属性追加、ヘッダー高さの事前定義と合わせた3段階の解消シミュレーションです。
<style>
#mainSlider {
min-height: calc(480 * (100vw / 1200));
overflow: hidden;
}
</style>シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
CLS | 0.151 | 0.000 | -0.151 |
総合スコア | 94 | 100 | +6 |
LCP | 1.0秒 | 0.8秒 | -0.2秒 |
FCP | 0.8秒 | 0.7秒 | -0.1秒 |
| 解消前 | 解消後 |
|---|---|
 |  |
CLS が0.151から0.000に完全解消され、総合スコア が94から100に到達するという結果が得られました。スライダー領域の高さをCSSで事前確保するだけで、レイアウトシフトの根本原因が解消されたことが分かります。CLS はユーザーにとって「読んでいたコンテンツが突然ずれる」という体験に直結する指標であり、このボトルネックの影響の大きさが数値として確認できた形です。
ボトルネック3: 大容量Webフォント（Material Symbols Outlined）
観察された状況
Google Fontsから Material Symbols Outlined フォント（転送サイズ3.70MB）が読み込まれている状態が観測されました。このフォントは全リソースの52%を占めていましたが、実際に使用されている箇所はアイコン3箇所のみでした。3.70MBという容量は通常のWebページ全体のリソースに匹敵する大きさであり、fonts.googleapis.com および fonts.gstatic.com への接続コストとダウンロード時間の両方が指標に影響していました。
このシミュレーションではフォントの読み込みを廃止しUnicode文字で代替しているため、サイトのアイコンの見た目が変わることを前提としています。
解消シミュレーションの方法
Material Symbols Outlined の <link> 要素を削除し、使用していた3箇所のアイコンをUnicode文字とCSSで代替しました。
<!-- 削除したlink要素 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">シミュレーション結果
| 指標 | 解消前 | 解消後 | 変化量 |
|---|---|---|---|
LCP | 0.8秒 | 0.2秒 | -0.7秒 |
FCP | 0.2秒 | 0.1秒 | -0.1秒 |
SI | 2.0秒 | 1.5秒 | -0.5秒 |
| 解消前 | 解消後 |
|---|---|
 |  |
3.70MBのフォントファイルを取り除くと LCP が0.8秒から0.2秒へ変化し、転送サイズが全体で52%削減されるという結果が得られました。使用箇所がわずか3箇所であるにもかかわらず、全リソースの半分以上を占めていたという事実から、このフォントが表示速度に与えていた影響の大きさが際立っています。
なお、アイコンフォントをそのまま使い続けたい場合でも、実際に使用しているアイコンだけを含めたサブセットを作成し自社ドメインから配信することで、本シミュレーションに近い大幅な削減効果が得られる可能性があります。
まとめ
chuya-online.com（www.chuya-online.com）の表示速度を観測したところ、総合スコア 93、LCP 1.3秒、FCP 0.9秒、CLS 0.151という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。
観測されたボトルネックとその影響は次のように整理できます。
- headセクションのレンダリングブロックスクリプト:
defer属性の付与と配置変更でFCPが58%短縮（0.7秒 → 0.3秒）。<head>内のスクリプト配置がページ描画開始を遅らせていたことが確認されました。 - メインスライダーの高さ未確保: CSSによる
min-heightの事前定義でCLSが0.151から0.000に完全解消。総合スコアが94から100に到達し、レイアウトシフトが最大のスコア抑制要因だったことが分かりました。 - 大容量Webフォント（Material Symbols Outlined、3.70MB）: フォント廃止で
LCPが0.8秒から0.2秒に短縮。使用箇所3箇所に対して全リソースの52%を占めていたフォントの影響が可視化されました。
全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は93から100へ、LCP は1.3秒から0.2秒へ、CLS は0.151から0.000へと変化しました。元のスコアが93と高い水準にあっても、個別の指標にはまだ大きなボトルネックが残されていたことが、この一連のシミュレーションによって確認できた形です。
chuya-online
この研究は自主的に実施したものであり、サイト関係者からの依頼によるものではありません。掲載の取り下げを希望される場合はお問い合わせください。
