ページの表示を遅くする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がやっていることとはとても思えません。

オプティマイズのページ非表示スニペットの使用方法  |  オプティマイズ  |  Google Developers
オプティマイズを使用すると、同じウェブページに複数のパターンを用意してテスト配信し、指定した目標を基準に各パターンの効果を比較できます。

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の無効化
スポンサーリンク

効果

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

ニコニコ大百科での速度向上の効果

コメント