最近ニコ百の表示が遅い理由を探ってみた話【Firefoxのみの現象?】
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

最近ニコ百の表示が遅い理由を探ってみた話【Firefoxのみの現象?】

2018-12-21 15:57

    具体的にいつからなのかはわかりませんが、最近ニコ百の表示が遅く感じるようになりました。スクロールバーが表示され、実際にスクロールも可能なのに何も表示されていなく、裏ではローディングが済んでいるような気もする状態です。

    uMatrixを使ったり、Firefoxの開発ツールを使ったりして調べてみた結果、画面が表示されない数秒間、htmlタグのclass属性に「async-hide」という値が設定されており、しばらくすると、async-hideという値は削除され、画面が表示されるという動きをしていました。
    async-hideはインラインスタイルで以下のように設定されています。

    .async-hide { opacity: 0 !important }

    opacityは透明度の設定で、0.00(0%)~1.00(100%)の値が設定でき、0に近づくほど透明になり、0で完全な透明になります。
    !importantは優先的にこのスタイルを適用させることを意味します。

    つまりどういうことかというと、読み込みや画面描画に時間をかけているのではなく、意図的に隠すようにしており、特定のタイミングでそれを解除するという処理がなされているということです。

    なぜこんなことをしているのか、もう少し掘り下げて調べてみると、どうやらこれはGoogle OptimizeによるA/Bテストを導入しているとそうなるようです。

    A/Bテストとは簡単に言うと、元となるAというページからBというページを作り、単一のURLでAまたはBのページを表示させるテストです。
    アクセス解析と組み合わせて、AとBのどちらが良いのかを調べて、今後のウェブページの更新の指標となるものを得ることができるそうです。

    Google Optimizeは非同期でAまたはBの切り替えを行うため、表ではAが表示されていたけれど、裏ではBを表示することが決定しており、Bの読み込みが完了した時点で、Aが表示されている状態からBに切り替える処理が行われ、切り替えるタイミングでチラつきが発生してしまいます。
    それを防ぐために、完全な読み込みと切り替えが完了するまでは、非表示にしてしまいましょう。というのがasync-hideの役割です。

    以上を踏まえると、これはニコ百に限った話ではなく、Google Optimizeを導入しているウェブサイトすべてにおいて起こることがわかります。

    さて、もう表示できるならさっさと表示してほしい!切り替えでチラついてもかまわない!な人は、以下のようなユーザースタイルを適用してしまえばよいのです。

    .async-hide { opacity: 1 !important }

    つまり、async-hideの透明をなくしてしまえばいいのです。
    Webページとユーザーの同一スタイルに、双方importantが付いている場合、ユーザースタイルが優先されます。Stylusなどのユーザースタイルを適用することのできるブラウザ拡張機能を使用して、上記のスタイルを適用してしまいましょう。

    チラつきをもなくしてしまいたい場合は……出来るか出来ないかというと、出来ます。しかし、それはつまりA/Bテストができない状態にしてしまうということであり、ウェブサイトの管理者にとってちょっと迷惑かもしれないので、ここではそのやり方については割愛します。

    GOは導入が簡単な反面、サーバーサイドでページを組み立ててからクライアントに送るのではなく、クライアントサイドでページを動的に切り替えているというデメリットがあり、個人的にはユーザーにストレスを与えかねないテストの手法には疑問ですね。

    ちなみに、
    https://dic.nicovideo.jp/b/a/%E3%83%8B%E3%82%B3%E3%83%8B%E3%82%B3%E5%A4%A7%E7%99%BE%E7%A7%91/3631-
    のレス番号3652によると、ChromeやEdgeではぱっと表示されるらしく、Firefoxでのみ起こるとの噂。(ちなみに番号3651は私の書き込み)


    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。