Webサイト最適化の新アプローチ|CSSコンテインメントとその可能性

この記事のタイトルとURLをコピーする

デジタルマーケティングの世界で、ウェブサイトのパフォーマンスは常に重要なトピックです。サイトの読み込み速度やインタラクティブ性は、ユーザー体験(UX)に直接影響を与え、結果としてコンバージョン率や顧客満足度にも大きく関わってきます。

今回は、ウェブサイトのパフォーマンス最適化に関する新しいアプローチ、「CSSコンテインメント」について紹介します。この技術は、特にeコマースサイトのようなコンテンツが豊富なウェブサイトで効果を発揮する可能性があります。

Baqend社が実施した詳細な研究結果を基に、CSSコンテインメントがどのようにウェブサイトのパフォーマンスを向上させる可能性があるか、そしてそれがマーケティング戦略にどのような影響を与えうるかを見ていきましょう。

参照元:Field Testing CSS Containment for Web Performance Optimization

CSSコンテインメントとは

CSSコンテインメントは、ウェブサイトの表示速度を向上させるための新しい手法です。専門的な説明は避けますが、簡単に言えば、ウェブページの特定の部分の表示をコントロールすることで、全体的なパフォーマンスを改善する技術です。

具体的には以下のような効果が期待できます。

  1. ページの初期読み込み速度の向上
  2. スクロール時のスムーズさの改善
  3. インタラクション(クリックなどの操作)に対する反応速度の向上

これらの改善は、特に商品一覧ページや詳細ページなど、多くの情報を表示する必要があるeコマースサイトで効果を発揮する可能性があります。

Baqend社の研究:CSSコンテインメントの効果

Baqend社は、CSSコンテインメントの効果を検証するため、複数のeコマースサイトで詳細な実験を行いました。これらの実験は、実際のウェブサイトでのパフォーマンス改善の可能性を探るために設計されました。

ローカルテストの結果

まず、1000の要素を持つテストページでCSSコンテインメントを適用したところ、ページの初期表示に要する時間が約80%削減されました。具体的には、レンダリング時間が825ミリ秒から172ミリ秒に短縮されました。これは理想的な環境での結果ですが、実際のウェブサイトでも大きな改善が期待できることを示唆しています。

フィールドテストの結果

Baqend社は、実際のeコマースサイトで3つの異なるタイプのページに対してABテストを実施しました。各テストの詳細と結果は以下の通りです。

仮説

大規模で複雑な、ファーストビュー以下の要素にCSSコンテインメントを適用することで、他のパフォーマンス指標に影響を与えることなく、INP(Interaction to Next Paint)を改善できる。

方法

Speed Kitを使用した一連のABテストにおいて、2つの異なるウェブサイトの3種類のウェブページでCSSコンテインメントをテストしました。

大手スポーツ用品小売業者:

  • サーバーサイドレンダリングのカテゴリページ
  • サーバーサイドレンダリングの商品詳細ページ

小規模衣料品小売業者:

  • クライアントサイドレンダリングのカテゴリページ

テストグループでは、初期ビューポート外の商品タイルやサイトセクションにCSSコンテインメントを追加しました。パフォーマンスの変化が最も顕著に現れる可能性が高い、小さな画面をターゲットにしています。

テスト #1: サーバーサイドレンダリングのカテゴリページ

大手スポーツ用品小売業者のサイトで、商品カテゴリページのINP(Interaction to Next Paint)時間が高いことに気づきました。

このeコマース小売業者の場合、カテゴリページは視覚的に複雑で、以下の特徴がありました。

  • トラフィックが最も多いカテゴリページには、36個のサーバーサイドレンダリング(SSR)された商品タイルがある
  • 各商品タイルは画像スライダーとバリアントセレクターで構成され、最大130の子孫要素を持ち、ノードの深さは合計6となっている

サーバー側でレンダリングされた製品タイルの例

私たちの仮説は、CSSコンテインメントが、ブラウザが最初に行う必要のあるレンダリング作業量と、ページ上で商品をフィルタリングする際のレンダリング作業量を減らすことで、モバイルデバイスでのINPとレンダリング時間を改善できるというものでした。

そこで、このページタイプについてABテスト(総サンプル数 n = 813,323、目標分割比率:50/50)を実施し、テストグループのモバイルデバイスの商品タイルに以下のスタイル宣言を適用しました。

トラフィックが最も多い上位3つのモバイルブラウザを見ると、75パーセンタイル(つまり、最も遅い25%)において以下のことがわかりました。

  • ペイント指標である初回コンテンツ表示(FCP)と最大コンテンツ表示(LCP)はあまり変化しなかった
  • インタラクション後の次のペイントまでの時間(INP)がSamsung Browserで約120ミリ秒改善した
  • 累積レイアウトシフト(CLS)がモバイルChromeで約0.09、モバイルSamsung Browserで約0.02悪化した

緑色のマイナス値は改善、赤色のマイナス値は悪化を示します。SafariはLCP、INP、CLSの指標をサポートしていません。

これにより、いくつかの興味深い追加質問が生まれました。

  • なぜモバイルSamsung Browserユーザーでは、INPがこれほど劇的に改善したのか?彼らのデバイスが遅いからか?
  • なぜCSSコンテインメントによってレイアウトのシフトが大きくなったのか?カテゴリページのコンテンツの違いか?

テスト #2: クライアントサイドレンダリングのカテゴリページ

小規模衣料品小売業者のカテゴリページ(これも高いINPを示していた)でもCSSコンテインメントのABテストを実施しました。このケースでは、クライアントサイドレンダリングされた商品タイルにコンテインメントを適用しました。

このサイトのカテゴリページは、以下の特徴を持つ視覚的に複雑なものでした。

  • 初期状態で1ページあたり30個のクライアントサイドレンダリング(CSR)された商品タイル
  • 「無限スクロール」機能により、追加で30個のCSR商品タイルがレンダリングされる
  • 各商品タイルは画像スライダーと色選択機能で構成され、最大106の子孫要素を持ち、ノードの深さは合計14

クライアントサイドレンダリングされた商品タイルの例

このテスト(総サンプル数 n = 209,012)では、ページレイアウトが2列の商品タイル行を持つ画面に対して、以下のCSSを商品タイルに適用しました。

75パーセンタイルにおいて、最も顕著なパフォーマンスの違いは以下の通りでした。

  • モバイルSamsung BrowserでLCPが148ミリ秒改善
  • モバイルChromeでINPが27ミリ秒改善
  • Samsung BrowserでINPが47ミリ秒速くなり、CLSが約0.1減少

緑色のマイナス値は改善、赤色のマイナス値は悪化を示します。SafariはLCP、INP、CLSの指標をサポートしていません。

確かに、75パーセンタイルでの約47ミリ秒のINP改善は無視できるものではありません。しかし、依然としていくつかの疑問が残ります。

  • なぜこれらのクライアントサイドレンダリングされたカテゴリページでは、CSSコンテインメントによってINPとCLSが改善したのでしょうか?
  • なぜモバイルChromeと比較して、モバイルSamsung BrowserでCLSがより大きく改善したのでしょうか?
  • なぜ最初のテストと比べて、指標の変化が異なったのでしょうか?

テスト #3: サーバーサイドレンダリングの商品詳細ページ

商品詳細ページ(テスト#1と同じスポーツ用品サイト)でも、最適とは言えないINPを示していたため、ABテストを実施しました。

このページタイプは以下の理由から視覚的に複雑だと考えられます。

  • 過剰なDOMサイズ(1,500以上の要素)
  • 過剰な長さ(高さ17,000ピクセル以上)
  • コンテンツに応じて高さが変わる多数のコンテンツブロック
  • 多数のサードパーティウィジェット(例:動画プレーヤー、商品評価、クーポン)

ファーストビュー以下のセクションにCSSコンテインメントを適用したことを示す商品詳細ページのワイヤーフレーム

複数の商品ページで特定したセクションにCSSコンテインメントを適用しました。

このテスト(総サンプル数 n = 1,154,365)では、75パーセンタイルのデータを見ると、CSSコンテインメントによる大きな改善も悪化も見られませんでした。

緑色のマイナス値は改善、赤色のマイナス値は悪化を示します。SafariはLCP、INP、CLSの指標をサポートしていません。

これにより、次の疑問が生じます。

  • 複雑な要素にCSSを十分に適用していなかったのか?

これらの結果から、CSSコンテインメントの効果はページの種類、レンダリング方法、そして適用箇所によって大きく異なることが分かりました。特に、クライアントサイドレンダリングのカテゴリページで最も顕著な改善が見られ、サーバーサイドレンダリングのカテゴリページでも一部の指標で改善が確認されました。

一方で、商品詳細ページではほとんど効果が見られなかったことから、CSSコンテインメントの適用には慎重な検討と実験が必要であることも示唆されています。

マーケティング担当者が知っておくべきポイント

CSSコンテインメントは興味深い可能性を秘めていますが、マーケティング担当者として以下のポイントを押さえておくことが重要です。

  1. ユーザー体験への影響
    • ページ読み込みの高速化やスムーズなスクロールは、直接的にユーザー満足度の向上につながる可能性があります。
    • これは特に、モバイルユーザーや通信環境の悪いユーザーにとって重要です。
  2. 導入を検討する際の注意点
    • CSSコンテインメントの効果は、ウェブサイトの構造や内容によって大きく異なります。
    • 一律に適用するのではなく、ABテストなどで効果を検証しながら導入を進めることが望ましいでしょう。
  3. Webサイト最適化戦略への組み込み方
    • CSSコンテインメントは、既存の最適化戦略を補完するものとして考えるべきです。
    • 画像最適化、コード最適化など、基本的な施策と併せて検討することで、より大きな効果が期待できます。

 

まとめ

CSSコンテインメントは、ウェブサイトのパフォーマンス最適化における新たなアプローチとして注目されています。Baqend社の研究結果は、この技術が特定の状況下で大きな改善をもたらす可能性を示しています。

しかし、その効果は一様ではなく、サイトの構造や内容、ユーザーの利用環境によって変わってくることも明らかになりました。マーケティング担当者としては、この技術を魔法の杖として捉えるのではなく、包括的なウェブサイト最適化戦略の一部として検討することが重要です。

ウェブサイトのパフォーマンス最適化は、ユーザー体験の向上、そしてひいてはコンバージョン率の改善につながる重要な要素です。CSSコンテインメントのような新しい技術の動向にも注目しつつ、常にユーザーファーストの視点でサイト改善に取り組んでいくことが、デジタルマーケティングの成功につながるでしょう。

Speed Kitの無料診断を今すぐ体験!

ギャプライズでは、Speed Kitを活用した無料のウェブサイト診断サービスを提供しています。貴社のサイトのパフォーマンスを分析し、改善の可能性を具体的に示します。

以下のリンクから、無料診断のお申し込みやお問い合わせが可能です。専門のコンサルタントが、貴社のビジネスに最適なソリューションをご提案いたします。

 

貴社のウェブサイトが、世界最高水準のパフォーマンスを達成し、ビジネスの成功に貢献することを心より願っております。ギャプライズは、その実現のためのパートナーとして、皆様のチャレンジを全力でサポートいたします。

この記事のタイトルとURLをコピーする

今本 たかひろ/MarTechLab編集長

料理人→旅人→店舗ビジネスオーナー→BPO企業にてBtoBマーケティング支援チームのPLを4年半経験し、2023年2月よりギャプライズへジョイン。フグを捌くのもBtoBマーケティングを整えるのも根本は同じだという思考回路のため、根っこは料理人のままです。家では猫2匹の下僕。虎党でビール党。

関連記事一覧

タグから探す
AI活用
デジタル屋外広告
パフォーマンス
バックオフィス
Web接客
DX(デジタルトランスフォーメーション)
SMSマーケティング
マーケティング全般
市場・競合分析
AR(拡張現実)
画像認識AI
VOC(voice of customer)
BI(ビジネスインテリジェンス)
D2C
EC
ロイヤリティマーケティング
リードジェネレーション
インサイドセールス
インフルエンサーマーケティング
UGCマーケティング
SNSマーケティング
コンテンツマーケティング
メールマーケティング
ソーシャルリスニング
サイト改善
レコメンド
パーソナライズ
ABテスト
UI/UX
ヒートマップ
LPO
アクセス解析
EFO
サイト集客
SEO
Googleショッピング
アドフラウド(不正広告)
広告最適化
リスティング広告
SNS広告
Amazon広告
営業・顧客管理
プロジェクト管理
SFA(営業支援)