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

ヘアケアブランドYOLU（ヨル）やBOTANIST（ボタニスト）、美容家電ブランドSALONIA（サロニア）などを展開するI-neの公式オンラインストアです。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

総合スコア が59から99へと40ポイント変化するというシミュレーション結果が得られました。特に LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が9.1秒から0.4秒へ、FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）が3.3秒から0.1秒へと大きな変化が観測されており、これらの指標に強く影響するボトルネックが存在していたことが読み取れます。

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

観測時点と全ボトルネック解消シミュレーション後のページ読み込みを動画で並べています。左が観測時点、右がシミュレーション後です。視覚的にも表示スピードが大きく改善されていることがわかるでしょう。

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

詳細レポート

本研究ではまず、サードパーティータグ（広告・アクセス解析・チャットなど外部サービスのスクリプト）を段階的に除去した状態を観測しました。目的は、サードパーティータグ全体が表示速度に与えている影響を測り、最適化によって得られる改善ポテンシャルの上限を把握すること、そしてサイト固有のボトルネックを観察するためのノイズを取り除くことの2点です。なお、これらのタグを完全に除去することは運用上現実的ではありません。

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

オリジナルのページが読み込むリソース253件のうち、99件（39.1%）がサードパーティタグによるリクエストです。サイト固有のリソース154件（60.9%）に対して、サードパーティタグが約4割のリソースを占めています。公開CDN（Swiper等）やGoogle Fontsは後続フェーズで最適化するため、ここではサイト固有として集計しています。

andhabit.comで確認されたサードパーティータグは次のとおりです。

段階的に除去した際の 総合スコア の推移は次のとおりです。

全タグを除去した状態では 総合スコア が 59 から 79 へ変化し、SI は 12.6秒 から 3.7秒 へと短縮されました。これはあくまで上限値であり、実際にはこの一部しか実現できないとしても、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。以降のセクションでは、この状態を起点としてサイト固有のボトルネックを観察していきます。

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

サードパーティータグの影響を切り離した状態を起点として、サイト固有のボトルネックを調査しました。本研究では全17件のプラクティスを検証しています。その中から、特に影響の大きさが観測された3つのボトルネックを紹介します。

ボトルネック1: LCP画像に読み込み優先度の指定がない ​

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

観察された状況 ​

ページの LCP 要素（最も大きなコンテンツ）であるトップスライダーの画像に、読み込み優先度の指定がない状態でした。ブラウザはすべての画像をデフォルトの優先度でダウンロードするため、最も重要な画像の表示開始が他のリソースと競合していたことが観測されました。

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

LCP 画像に fetchpriority="high"（ブラウザに優先的なダウンロードを指示する属性）と loading="eager" を付与し、他のスライダー画像には loading="lazy"（遅延読み込み）を設定するという変更を加えました。

<!-- 変更前 -->
<img src="slider-1.jpg" alt="...">
<img src="slider-2.jpg" alt="...">
<img src="slider-3.jpg" alt="...">

<!-- 変更後 -->
<img src="slider-1.jpg" alt="..." fetchpriority="high" loading="eager">
<img src="slider-2.jpg" alt="..." loading="lazy">
<img src="slider-3.jpg" alt="..." loading="lazy">

シミュレーション結果 ​

HTML属性を数行調整するだけで LCP が約半分に短縮されるという変化が観測されました。LCP 要素である画像の読み込み優先度が指定されていないことが、この指標における明確なボトルネックのひとつであったことが読み取れます。

ボトルネック2: CSSが外部ドメインから7ファイルに分割配信されている ​

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

観察された状況 ​

CSS ファイルが CloudFront CDN（外部ドメイン）から配信されており、さらに7つの CSS ファイルが個別に読み込まれている状態でした。CSS はレンダリングブロックリソース（読み込みが完了するまでページの描画が停止するリソース）であるため、外部ドメインへの接続コスト（DNS ルックアップと TLS ハンドシェイク）とファイル数の多さが FCP に影響を与えていることが観測されました。

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

CSS ファイルを CloudFront から自サイトドメインに移動し、さらに7つの CSS ファイルを1つの bundle.css に結合した状態を作り、その影響を計測しました。

<!-- 変更前: 外部CDNから複数CSSを読み込み -->
<link rel="stylesheet" href="https://d2w53g1q050m78.cloudfront.net/css/theme.css">
<link rel="stylesheet" href="https://d2w53g1q050m78.cloudfront.net/css/reset.css">
<link rel="stylesheet" href="https://d2w53g1q050m78.cloudfront.net/css/common.css">
<!-- ...他4ファイル -->

<!-- 変更後: 自サイトから1ファイルで読み込み -->
<link rel="stylesheet" href="/css/bundle.css">

シミュレーション結果 ​

自サイトドメインへの移動によって既存のHTTP接続が再利用可能となり、さらにファイルの一本化でHTTPリクエスト数が削減された結果、レンダリングブロックの影響が大きく後退することが観測されました。外部ドメインからの CSS 配信とファイル分割が、FCP および LCP に対して無視できないボトルネックとなっていたことが読み取れます。

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

ボトルネック3: Google Fonts（日本語Webフォント）の読み込み ​

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

観察された状況 ​

サイトでは Google Fonts（Noto Sans JP、Tenor Sans）が使用されており、fonts.googleapis.com と fonts.gstatic.com から合計29リソースが読み込まれている状態が観測されました。日本語Webフォントは文字数の多さからデータ量が非常に大きく、英語フォントとは桁違いのリソースサイズになります。

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

Google Fonts の読み込みを削除し、CSS の font-family 指定をシステムフォント（OSに標準搭載されたフォント）にフォールバックする変更を加え、その影響を計測しました。

/* 変更前 */
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Tenor Sans', serif;

/* 変更後 */
font-family: sans-serif;
font-family: serif;

<!-- 削除したlink要素 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

シミュレーション結果 ​

日本語Webフォントの読み込みを取り除くと LCP が1.2秒、FCP が0.8秒変化するという結果が得られました。この数値から、日本語Webフォントが LCP や FCP に与えている影響の大きさが読み取れます。WebフォントをWebサイトで利用する場合 Google Fonts は選択肢のひとつですが、日本語Webフォントの場合は、文字数の多さから生じるリソースサイズが指標に対して無視できない大きさで観測されるという事実がここに表れています。

まとめ ​

and Habit（andhabit.com）の表示速度を観測したところ、総合スコア 59、LCP 9.1秒、FCP 3.3秒という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。

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

• サードパーティータグの集合体: 除去によって 総合スコア が +20、SI が 70% 変化。特に Google Tag Manager + Google Ads 単独で +14 ポイントの影響が観測されました。
• LCP画像の読み込み優先度未指定: fetchpriority="high" の付与で LCP が 49.6% 短縮。
• 外部ドメインからの分割CSS配信: 同一ドメイン化と一本化で FCP が 45% 短縮、LCP が 1.7秒 短縮。
• 日本語Webフォント（Google Fonts）: 読み込み停止で LCP が 1.2秒、FCP が 0.8秒 短縮。

全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は 59 から 99 へ、LCP は 9.1 秒から 0.4 秒へと変化しました。観測された各要素がそれぞれ独立して指標に与えていた影響の大きさが、この一連のシミュレーションによって確認できた形です。