A/Bテストを実施する上では必ず押さえておくべきページフリッカー問題。本記事では、ページフリッカーの概要や悪影響、対処法について解説する。
ページフリッカーとは?
ページフリッカーとは、ページが読み込まれる際に一瞬だけ別の画面がチラつく現象のことを言う。
特にA/Bテストを実施しているときによく見られ、オリジナルパターンが一瞬表示されたあとにテストパターンが描画されることがよくある。
ページフリッカーが及ぼす悪影響
ページフリッカーが及ぼす悪影響には、以下のようなものがある。
ユーザーエクスペリエンスが低下する
まず、最終的な表示画面が描画される前に一瞬違う画面が表示されると、ユーザーからするとかなり怪しい。
違う画面がチラつく時間はそう長くはないかもしれないが、本当に正しいページが表示されているのか心配になるし、人によっては無理やり誘導させられていると感じるだろう。
特に決済ページや申込ページといったコンバージョンに関わるページでは、ユーザーはナーバスになっているため、このような問題が起こるだけで重大な機会損失に繋がる恐れがある。
A/Bテストの公平なジャッジができなくなる
A/Bテストは公正な手続きによって進められたれっきとした実験であるため、各パターンに振り分けられたユーザー群に何かしらバイアスがかかってしまった時点で実験は失敗となり、終了する必要がある。
先述したように、ページフリッカー問題が起こるとユーザーに対してサイトへの不信感を抱かせることになるため、実施側が意図していた本来の介入効果とはまた違うところで実験結果がゆがめられてしまう可能性がある。
こうなると、効果検証の際にどちらのパターンが良かったのかの公平な判断ができなくなり、A/Bテストはやり直しとなる。
SEOに悪影響を及ぼす
実は、SEOのランキング要因においてもページの表示速度が全く考慮されないわけではない。
基本的に、ページの表示速度が遅くなればなるほどユーザーの直帰率は高くなるが、こういったユーザーのサイト上でのパフォーマンスの悪さもSEOに悪影響を及ぼす。
表示速度が検索順位に与える影響力は実際にはかなり小さいが、知らず知らずのうちに検索エンジンからマイナス評価を受けないようにするためにも改善しておくべきである。
ページフリッカーの対処法
ページフリッカーの対処法としては、以下が挙げられる。
GTMのようなタグ管理ツールを使用せず、直貼りでコードを記述する
A/Bテストツールを利用してテストを実施する場合、最初にタグの設置が必要になるが、ほとんどのA/Bテストツールには、通常のタグの中に「アンチフリッカー」と呼ばれるチラつきを防ぐためのスニペットが含まれている。
しかし、これはタグを直貼りしたときに限って有効なものであり、Googleタグマネージャーのようなタグ管理ツールを経由して設置した場合は、かえって逆効果になるため、なるべく直貼りでコードを記述するようにする。
なおツールによっては、コードを設置したうえで別途アンチフリッカーを有効化するトグルをONにする必要のあるものもあったりするので、そのあたりはしっかり使用ツールのヘルプページを読んでおくとよい。
JavaScriptやCSSのコードを軽くする
不要なコードはなるべく削除し、ファイルを圧縮したり外部ファイルに分割したりするなどして、読み込み速度を向上させることで、ページの読み込み速度を向上させる。
画像を最適化する
画像のサイズを適切な大きさに調整したり、画像形式を最適化したり、Lazy Loadを活用したりして、ページの読み込み速度を向上させる。
- Optimize Next
スニペットの設置 - PTengine
チラつき現象の対処方法 – Help Center - Kaizen Platform
デザイン案反映に時間がかかると感じる時の対処法 – Kaizen Platform(サイト改善) ヘルプセンター - SiTest
テストを実施中のページをウェブブラウザで開くと、オリジナルの状態のページが一瞬表示されてしまいます。 – SiTest|ヘルプセンター - ABTasty
A/B テストでちらつき (オリジナル コンテンツのフラッシュ) を回避する方法 - Optimizely
Optimizely パフォーマンス エッジと Optimizely Web 実験
おわりに
今回は、ページフリッカーの概要や悪影響、起こる原因と対処法まで解説した。
A/Bテストを実施する際には、テスト開始後に必ず本番環境の対象ページを開いて、ページフリッカーが起きていないか確認するべきである。
もし問題が起きている場合は、本記事で紹介した対処法を参考に必ず改善すべきだし、見過してはならない重要な点である。