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

皮膚の専門家が作ったメディカルコスメとして知られるドクターシーラボの公式オンラインショップです。スキンケア・メイクアップ・ボディケア・健康食品など幅広い製品を取り扱っており、モバイル環境での表示速度について、どのような要素がボトルネックとなっているかを研究するため、解消シミュレーションを実施しました。

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

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

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

総合スコア が50から100へと50ポイント変化するというシミュレーション結果が得られました。特に CLS（Cumulative Layout Shift = ページ読み込み中のレイアウトのズレを数値化した指標）が0.772から0.017へと劇的に変化しており、レイアウトの安定性に大きなボトルネックが存在していたことが読み取れます。LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）も5.0秒から0.1秒へ短縮されています。

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

本サイトでは、観測時点では一つ一つの画像の読み込みにかなりの遅延が見て取れます。一方、解消シミュレーション後は早いタイミングで全てのコンテンツの読み込みが完了し、ページ全体が確定している様子が見て取れます。

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

詳細レポート

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

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

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

ドクターシーラボのトップページで確認されたサードパーティータグは次のとおりです。

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

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

GTM経由では60ドメイン・156リソースが読み込まれており、合計で171件のサードパーティーリソースが確認されました。

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

サードパーティータグを全て除去した状態では、総合スコア が50から74へと変化し、SI は7.9秒から1.8秒へ短縮される結果が得られました。特に Conductrics（A/Bテストツール）は同期読み込みであったことから単独で15ポイントの変化をもたらしており、サードパーティータグの最適化には無視できない改善ポテンシャルがあることが読み取れます。以降のセクションでは、この状態を起点としてサイト固有のボトルネックを観察していきます。

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

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

ボトルネック1: カルーセルの初期レイアウト未確保 ​

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

観察された状況 ​

ヒーローカルーセル（slickスライダー）の CSS に .ecm-hero .js-slide { display: none } が指定されていました。slickが初期化されるまで全スライドが非表示になり、初期化完了後に表示されることで、カルーセル領域の高さが0からヒーローバナー分まで一気に広がるレイアウトシフトが発生していました。CLS が0.562という大きな値を示していたのは、この構造が主要因です。

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

CSS で初期状態のまま最初のスライドだけを表示し、slick初期化前にもカルーセル領域が高さを持つよう修正しました。あわせてヒーローバナー画像に width/height 属性を追加し、ブラウザが画像読み込み前にアスペクト比を確保できるようにしました。

シミュレーション結果 ​

解消前	解消後

CLS が0.562から0.056へ、総合スコア が74から97へと23ポイント変化するという結果が得られました。カルーセルの初期レイアウトが確保されていないことが、レイアウト安定性の指標に対して極めて大きなボトルネックであったことが、この数値から読み取れます。

ボトルネック2: LCP画像の読み込み優先度未設定 ​

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

観察された状況 ​

LCP 要素であるヒーローカルーセルの最初の画像に、読み込み優先度の指定がありませんでした。カルーセル内の画像はブラウザによって優先度が低く判定されることがあり、最も重要な画像の表示開始が他のリソースと競合している状態が観測されました。

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

LCP 画像に fetchpriority="high"（ブラウザに優先的なダウンロードを指示する属性）と loading="eager" を付与しました。

<!-- 変更前 -->
<img src="hero-banner.jpg" width="784" height="440" alt="...">

<!-- 変更後 -->
<img src="hero-banner.jpg" width="784" height="440" alt="..."
     fetchpriority="high" loading="eager">

シミュレーション結果 ​

解消前	解消後

HTML属性を2つ追加するだけで LCP が2.5秒から0.9秒へと1.6秒短縮されるという結果が得られました。LCP 画像の読み込み優先度が指定されていないことが、LCP における明確なボトルネックであったことがこのシミュレーション結果から読み取れます。

ボトルネック3: Google Fontsによるレンダリングブロック ​

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

観察された状況 ​

サイトでは Google Fonts から4つのフォントファミリー（Roboto、Noto Sans JP、Noto Serif JP、Dosis）が読み込まれており、fonts.googleapis.com からの4件の CSS（レンダリングブロッキングリソース）と、fonts.gstatic.com からの37件の woff2 フォントファイル（合計約1.4MB）が確認されました。日本語Webフォントは文字数の多さからデータ量が非常に大きく、英語フォントとは桁違いのリソースサイズになります。このシミュレーションはサイトのフォントの見た目が変わることを前提として行いました。

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

Google Fonts の読み込みを全て削除し、CSS の font-family 指定をシステムフォントにフォールバックさせました。CSS 内の @import によるフォント読み込みも削除しています。

シミュレーション結果 ​

解消前	解消後

Google Fonts の読み込みを取り除くと LCP が0.9秒、FCP が0.4秒変化するという結果が得られました。4件のレンダリングブロッキング CSS と37件のフォントファイル（約1.4MB）が解消されたことで、ブラウザはフォントの読み込みを待たずに描画を開始できるようになったことが分かります。WebフォントをWebサイトで利用する場合 Google Fonts は有力な選択肢のひとつですが、日本語Webフォントでは文字数の多さに起因するリソースサイズが表示速度に無視できない影響を与えていたことが、このシミュレーション結果に表れています。

まとめ ​

ドクターシーラボ（ci-labo.com）のトップページの表示速度を観測したところ、総合スコア 50、LCP 5.0秒、CLS 0.772という値が計測されました。本研究では、この計測値の背後にあるボトルネックを切り分けて観測するため、順に解消シミュレーションを実施しました。

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

• サードパーティータグの集合体: 除去によって 総合スコア が +24、SI が 6.1秒 短縮。特に Conductrics（同期読み込みA/Bテストツール）単独で +15 ポイントの影響が観測されました。
• カルーセルの初期レイアウト未確保: CSS修正で CLS が 0.562 から 0.056 へ変化し、総合スコア が +23 ポイント変化。レイアウトの安定性に対する最大のボトルネックでした。
• LCP画像の読み込み優先度未設定: fetchpriority="high" の付与で LCP が 1.6秒 短縮。HTML属性の追加だけで得られた変化の大きさが目を引きます。
• Google Fonts（日本語Webフォント）: 読み込み停止で LCP が 0.9秒、FCP が 0.4秒 短縮。41件・約1.4MBのリソースが表示速度に与えていた影響の大きさが確認できました。

全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は50から100へ、LCP は5.0秒から0.1秒へ、CLS は0.772から0.017へと変化しました。観測された各要素がそれぞれ表示速度に与えていた影響の大きさが、この一連のシミュレーションによって確認できた形です。