「エトヴォス」トップページの表示速度ボトルネック研究

ミネラルファンデーションとセラミドスキンケアを中心に展開するコスメブランドETVOS（エトヴォス）の公式オンラインショップです。敏感肌向けの処方にこだわったスキンケア・メイクアップ製品を幅広く取り扱っています。モバイル環境での表示速度について、どのような要素がボトルネックとなっているのかを研究するため、解消シミュレーションを実施しました。

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

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

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

総合スコア が18から99へと81ポイント変化するというシミュレーション結果が得られました。LCP（Largest Contentful Paint = ページの主要コンテンツが表示されるまでの時間）が6.0秒から0.7秒へ、FCP（First Contentful Paint = 最初のコンテンツが表示されるまでの時間）が4.7秒から0.2秒へと大きな変化が観測されており、複数の顕著なボトルネックが存在していたことが読み取れます。

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

本サイトでは、JavaScriptによる遅延読み込みの制御により多くの画像が動画上ではローディングアイコンのままになっていますが、解消シミュレーション後のほうがワンテンポ早く表示されている様子が見て取れます。

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

詳細レポート

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

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

リソース数比率	転送サイズ比率

ページ全体の346リソースのうち47.1%（163リソース）がサードパーティタグによるものです。転送サイズでも全16.81MBのうち38.0%（6.38MB）をサードパーティタグが占めています。リソース数では約半数、転送サイズでも約4割がサードパーティタグであり、ページの読み込みパフォーマンスに大きな負荷をかけていることがわかります。

etvos.com では合計30種類のサードパーティータグが確認されました。HTMLから直接読み込まれているものと Google Tag Manager 経由のものを含め、以下のとおりです。

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

Google Tag Manager 経由のタグ ​

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

最終段階で 総合スコア が59から50に低下していますが、これは計測揺らぎの範囲内です。FCP は4.7秒から1.6秒へと3.1秒短縮され、リソース数は346から183へ47.1%削減、転送サイズは16.81MBから10.43MBへ38.0%削減されました。

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

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

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

ボトルネック1: CDNリソースが外部ドメインから配信されている ​

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

観察された状況 ​

jQuery、slick、lazysizesといったJavaScriptライブラリが、ajax.googleapis.com、code.jquery.com、cdn.jsdelivr.net、cdnjs.cloudflare.com の4つの外部CDNドメインから配信されている状態が観測されました。外部ドメインからリソースを取得する場合、ドメインごとに DNS 解決と TLS 接続のオーバーヘッドが発生します。これらのライブラリはページ描画に必要なリソースであるため、接続コストが FCP と LCP の遅延に直結していたことが観測されました。

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

4つの外部CDNドメインから読み込んでいたライブラリを、すべて自社ドメイン（etvos.com）から配信する状態に変更し、その影響を計測しました。

シミュレーション結果 ​

LCP が71%短縮されるという大きな変化が観測されました。すでに確立されているHTTP接続を再利用できるようになったことで、4つのドメインへの接続オーバーヘッドが一括して解消された結果です。CDNリソースの外部ドメイン配信が LCP に対して非常に大きなボトルネックであったことが、このシミュレーション結果から読み取れます。

ボトルネック2: テキストリソースにGZIP圧縮が適用されていない ​

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

観察された状況 ​

HTML、CSS、JavaScriptなどのテキストリソースが GZIP 圧縮されずに配信されている状態が観測されました。GZIP 圧縮はサーバーからブラウザへの転送サイズを大幅に削減する技術で、未適用の場合はリソースがそのままのサイズで転送されるため、ダウンロード時間が長くなります。

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

CSS 2件、JavaScript 6件、HTML 2件を含む合計11リソースに GZIP 圧縮を適用し、その影響を計測しました。

シミュレーション結果 ​

GZIP 圧縮の適用だけで 総合スコア が11ポイント、LCP が1.9秒変化するという結果が得られました。テキストリソースの未圧縮配信が、転送サイズの面でボトルネックとなっていたことがこの数値から読み取れます。

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

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

観察された状況 ​

サイトでは Google Fonts から Noto Sans JP が読み込まれており、fonts.googleapis.com と fonts.gstatic.com の2つの外部ドメインへの接続が発生している状態が観測されました。日本語Webフォントは文字数の多さからデータ量が非常に大きく、英語フォントとは桁違いのリソースサイズになります。さらに、フォントCSSはレンダリングブロックリソースとして FCP を遅延させていました。このシミュレーションはサイトのフォントの見た目が変わることを前提として行いました。

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

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

シミュレーション結果 ​

FCP が1.0秒から0.2秒へと80%短縮されるという結果が得られました。日本語Webフォントの読み込みが FCP に対して与えていた影響の大きさが、この数値から読み取れます。Webフォントを利用する理由としてデザインの統一性は理解できますが、日本語フォントの場合はその影響が英語フォントとは比較にならない規模で表示速度に現れるという事実がここに示されています。

まとめ ​

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

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

• サードパーティータグ（30種類）: 除去によって 総合スコア が +32、FCP が 3.1秒 短縮。163リソース・6.38MBの転送サイズが削減されました。
• CDNリソースの外部ドメイン配信: 同一ドメイン化で LCP が 71% 短縮（3.9秒 → 1.1秒）、総合スコア +13。
• テキストリソースのGZIP未圧縮: 圧縮適用で LCP が 1.9秒 短縮、総合スコア +11。
• 日本語Webフォント（Google Fonts）: 読み込み停止で FCP が 80% 短縮（1.0秒 → 0.2秒）。

全ボトルネックの解消シミュレーションを重ねた結果、総合スコア は 18 から 99 へ、LCP は 6.0秒から 0.7秒へと変化しました。30種類ものサードパーティータグに加え、CDN配信の構成やサーバー圧縮設定といった技術的要因が、それぞれ独立して表示速度に影響を与えていたことが、この一連のシミュレーションによって確認できた形です。