ページの表示を遅くする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 では数秒の表示速度向上が確認できます。
