ページフリッカーとは？デメリットや対処法について解説

A/Bテストを実施する上では必ず押さえておくべきページフリッカー問題。本記事では、ページフリッカーの概要や悪影響、対処法について解説する。

ページフリッカーとは？

ページフリッカーとは、ページが読み込まれる際に一瞬だけ別の画面がチラつく現象のことを言う。

特にA/Bテストを実施しているときによく見られ、オリジナルパターンが一瞬表示されたあとにテストパターンが描画されるといったことがよくある。

ページフリッカーが及ぼす悪影響

ページフリッカーが及ぼす悪影響には、以下のようなものがある。

ユーザーエクスペリエンスが低下する

最終的なページ画面が描画される前に一瞬違う画面が表示され、「ん？」と思った経験はないだろうか。たとえそれが一瞬だったとしても、本当に正しいページが表示されているのか心配になるし、人によっては無理やり誘導させられていると感じるだろう。
特に決済ページや申込ページといったコンバージョンに関わるページでは、ユーザーは通常よりナーバスになっている可能性が高いため、このような問題が起こるだけで重大な機会損失につながる恐れがある。

ページの表示速度が遅くなるほどユーザーの直帰率が高くなることが、Googleの公式調査でも明らかになっているため（以下）、ページのチラつきがユーザーエクスペリエンスに及ぼす悪影響も明らかといえる。

We also trained a deep neural network—a computer system modeled on the human brain and nervous system—with a large set of bounce and conversions data. The neural net, which had a 90% prediction accuracy, found that as page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.

–日本語訳–
また私たちは、直帰とコンバージョンに関する大量のデータを用いて、ディープニューラルネットワーク（人間の脳や神経系をモデルにしたコンピュータシステム）に学習させた。このニューラルネットは90％の予測精度を持ち、ページの読み込み時間が1秒から10秒に増加すると、モバイルサイト訪問者が直帰する確率は123％増加することを示した。

出所：Find out how you stack up to new industry benchmarks for mobile page speed

補足すると、ページの読み込み時間が1秒から3秒に増加することで、直帰する確率が32%増加し、1秒から5秒で90%増加、1秒から6秒で106%増加、というのが上のデータが示しているところである。

A/Bテストの公平なジャッジができなくなる

A/Bテストは公正な手続きによって進められるれっきとした実験であるため、各パターンに振り分けられたユーザー群に何かしらのバイアスがかかってしまった場合は、その時点で実験は失敗となり、終了する必要がある。

ページフリッカー問題が起こるとユーザーに対してサイトへの不信感を抱かせることになるため、実施側が意図していた本来の介入効果とは違う部分で実験結果がゆがめられてしまう可能性がある。

SEOに悪影響を及ぼす

SEOのランキング要因の1つにページの表示速度に関する指標があり、特に代表的な「LCP」・「INP」・「CLS」の3つを総称して「Core Web Vital（コアウェブバイタル）」と呼ばれる

指標	説明	参照
LCP	ページのメインコンテンツが読み込まれるまでの速度を測る指標。2.5秒以内であることが望ましい。	Largest Contentful Paint（LCP）
INP	クリック・タップ・キーボード操作など、ユーザー操作に対する応答までの速度を測る指標。200ミリ秒未満であることが望ましい。	Interaction to Next Paint（INP）
CLS	ユーザーが予期しないレイアウトのズレを測る指標。0.1未満であることが望ましい。	Cumulative Layout Shift（CLS）

チラつきが発生し、本来描画させるべきページの表示が遅れると、間違いなくこれらの評価は悪くなるだろう。
「Core Web Vital」が検索順位に与える影響は実際にはそこまで大きくないのだが、知らず知らずのうちに検索エンジンからマイナス評価を受けないようにするためにも改善しておくべきである。

ページフリッカーの対処法

ページフリッカーの対処法としては、以下が挙げられる。

ツールを使うときはコードを直貼りする

A/Bテストツールを使ってテストをするときは、最初に、ページに対して計測タグの設置が必要になるが、ほとんどのツールには「アンチフリッカー」と呼ばれるチラつきを防ぐためのスニペットコードが含まれている。
しかし、これはタグを直貼りしたときに限って有効なものであり、Googleタグマネージャーのようなタグ管理ツールを経由して設置した場合はかえって逆効果になるため、なるべく直貼りでコードを記述するようにする。

なおツールによっては、コードを設置したうえで、別途ツール上でアンチフリッカーを有効化するトグルをONにする必要のあるものもあったりするので、そのあたりはしっかり使用ツールのヘルプページを読んでおくとよい。

JavaScriptやCSSのコードを軽くする

JavaScriptやCSSのコードが重いと、処理の実行が遅れ、その間に元ページが描画されてしまう可能性がある。
そのため、不要なコードはなるべく削除し、ファイルを圧縮したり外部ファイルに分割したりすれば、ページの読み込み速度を向上させられる。

画像を最適化する

画像もページ表示速度に大きな影響を与える要素であり、ファイル容量が大きい場合、HTMLやCSS、JavaScriptの処理が終わっても視覚的な表示が遅れ、切り替えの瞬間が目立ちやすくなる。
そのため、画像のサイズを適切な大きさに調整したり、画像形式を最適化し、解像度を調整したり、Lazy Load（遅延読み込み）を活用したりして、ページの読み込み速度を向上させる。

おわりに

今回は、ページフリッカーの概要や悪影響、起こる原因と対処法まで解説した。
A/Bテストは、ユーザー行動の違いを正当に検証できる効果的な手法である一方、ページフリッカーのような表示上の問題があると、その前提自体が崩れてしまう。

本来得られるはずの改善効果を正しく評価するためにも、表示速度や実装方法に十分配慮したうえでテストを行うことが重要である。