Webサイトで画面がちらつく（フラッシングする）原因をChrome Developer Toolsで探す方法

概要

• ふと気づいたら自社のサービスの画面が読み込み時に一瞬真っ白になる、ちらつく現象が発生するようになっていいた
• いつから発生するようになったのかわからず、コミットログも多く、原因特定に苦労した
• Google Chrome Developer Tools を使用して、原因を絞り込み、無事検索キーワードを入手した話。

使うもの

• Networkツール（公式の使用方法解説）
• Timelineツール（公式の使用方法解説）

本当にちらついているか確認する

ちらついているような気がするでは、本当に調査が必要なのかどうか、徒労に終わらないようにするために、
画面がちらついていることを確認します。

1. Developer Tools を起動します
2. 右上のメニューからMore Tools　→　Renderingを選択します
   
3. Consoleタブの隣にRenderingタブが表示されるので、そこのPaint Flashingをチェックします。
   
4. Netowrokタブに移動し、ビデオカメラアイコンをクリックしオンにします。
5. ⌘+Rキーをクリックすると画面がリロードされてネットワークがキャプチャーされます。
   
6. 画面上部に画面読み込みと描画に合わせてスクリーンキャプチャーされます。

参考に乗せた画面を見ていただくと、真っ白になっている箇所があるのがわかります。
間違いなく、真っ白に一回なってから再描画されていることを認識できます。

犯人を特定する

1. Timelineタブに移動します。
2. 画面上部の歯車のアイコンをクリックしオプションを表示します。Disable JavaScript SampleとEnable advanced paint instrumentation(slow)にチェックを入れます。
   
3. ⌘+Rキーをクリックすると画面がリロードされてTimelineがキャプチャーされます。
   • たまに画面キャプチャーがうまくいかないことがあるので、その場合は何度か⌘+Rキーを試行してください
4. キャプチャーを参考に画面が白くなる時間帯に絞り込みをかけます。
   
5. なにやら、analytics.jsてのが見えます。ちなみにこの例では、もう少し範囲を広げるとtag.jsも見えます。

犯人をググると。。。

• タグマネージャ導入前に知っておくべき基礎知識（全20回の2）

例えばGoogleアナリティクスのウェブテスト（A/Bテスト）機能がこれに当たります。ウェブテストのタグは、ページが表示される前にJavaScriptの処理が完了していないと、ユーザーに画面がちらついて見えるといった違和感を覚えさせる要因となります。

• GTMでOptimizelyタグとGAタグ（カスタムHTML）両方を配信して連携を行う方法

しかし、このセットアップでは非同期処理を行っているため、「ちらつき」や、「フラッシング」の可能性は依然として残っています。

弊社でまさにA/Bテストやタグマネジャーを使用していたので、利用をやめたら無事にちらつきがなくなりました。