ページの表示を遅くする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 では数秒の表示速度向上が確認できます。
ユーザースクリプトを導入したビフォーアフター、ビフォーは白い画面が数秒表示されるが、アフターは即時表示される

ホームプロフィール外部リンクのため、別ウインドウで開きますプライバシーポリシー

© 2023 Oishi Takanori / Made with Gatsby.js