ページの表示を遅くするGoogle Optimize page-hiding CSSを無効化する

ページ表示時に白い画面になるGoogle Optimize page-hiding CSSを無効化するユーザースクリプトを提供しています。teratailやニコニコ大百科などのサイトで高速化が期待できます。

Google Optimize page-hiding CSSとは

Google Optimizeとは、いわゆるA/Bテストのツールです。
このツールの機能のひとつとして、Google Optimizeが準備している間、変更している様子が見えないようにページを非表示にする機能がpage-hiding CSSです。
公式ガイドには「オプティマイズのコンテナの非同期的に読み込んでいる間、テストによる変更を適用する前のページがユーザーに見えてしまわないよう、ページを隠しておくことができます。」との記載があります。
しかし、ページを読み込んでも数秒非表示のままになり、明らかにユーザーの利便性を損ねています。
オプティマイズのアンチフリッカー スニペットの使用  |  Google Developers
https://developers.google.com/optimize/?hl=ja

page-hiding CSSの仕組み

公式ガイドにより、一部抜粋するとページを非表示にしている仕組みは次のとおりです。
<head>部に次のソースコードが追加されています。
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1\*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a\[n\]=a\[n\]||\[\]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-XXXXXX':true});</script>
準備中にJavaScriptにてhtmlタグにasync-hideクラスが追加されますが、async-hideクラスにopacity: 0 !importantが指定されているため非表示になる仕組みです。

ユーザースクリプトの配布

次のユーザースクリプトでhtmlタグにつけられたasync-hideクラスを削除する他、クラス名が変更されている場合も対応できるよう、htmlタグに強制的にopacity: 1 !importantを指定します。
(function() {
    'use strict';
    const node = document.getElementsByTagName('html');
    for (const elm of node) {
        const attr = elm.getAttribute('style') || '';
        elm.setAttribute('style', attr + ';opacity:1 !important;');
        elm.classList.remove('async-hide');
    }
})();
GreasyForkでユーザースクリプトを公開しています。
Google Optimize page-hiding CSSの無効化
https://greasyfork.org/ja/scripts/376184-disable-google-optimize-page-hiding-css

効果

Google Optimize page-hiding CSSが使用されているニコニコ大百科やteratailでは数秒の表示速度向上が確認できます。

@bicstone

大石貴則 (Ōishi Takanori) と申します。 Webエンジニア / セキュリティスペシャリスト / 機械エンジニア です。 プロダクトに幅広く携わり、相互成長し続けられるエンジニアを目指しています。

GitHubLinkedIn