手短に
JS実行をブロックしたら某サイトの読み込み速度が6倍になり、通信量が4分の1になった。ただし、正常に動作しないサイトもある。ボタン一つでJSブロックリストに登録することのできるブラウザがあれば非常に便利。
背景
ここ数年のオンライン広告の鬱陶しさには辟易している。見たくもない低俗な画像・動画を見せられるというだけでなく、その広い画面占有率は快適なブラウジングの大きな阻害要因だ。
画面の2割を占有する下部固定広告を想像してみてほしい。ただでさえ小さなスマートフォンの画面の2割が本来のブラウジングの用途に使用できなくなる。無用な情報にどれだけユーザビリティを下げられているのだろう。
また、5年ほど前から、ブラウジングしている時間は変わっていないのに、ブラウザの通信量が大きく増えていることも気になっていた。これももしかして広告のせいなのではないか？
そこでふと思った。ブラウザのJS実行をブロックしてみたらどうなるのだろう？そうすれば広告は出なくなりそうだし、広告の読み込みにかかる通信量も減るのではないか？
結果は劇的だった。当然、広告はまったく表示されない。また、月々のブラウザの通信量も3分の1に低下した。ページの読み込みも目に見えて高速化した。また、予期しなかった効果なのだが、ページロード中のスクロールのブロックがなくなり、ウェブサイトの閲覧が非常に快適になった。
以下に某サイトでの検証結果を記載する。
スマホ環境相当では、Google Chromeを使用して、ネットワークはFast 3G、CPU Throttlingは4x slowdownにしてある。実行マシンがMacbook Airで、普通のスマホのCPUより強力なのでそんなもんだろう。
JS Block環境と記載してあるのは、上記の状態からJSをブロックしたものだ。その他は変更していない。
また、ユーザーごとの差異を消すためにシークレットモードで実行している。
某サイト
スマホ環境相当
データの読み込みが終了するまでの時間は62秒
データ転送量は6.1MB
JS Block環境
データの読み込みが終了するまでの時間は10秒
データ転送量は1.5MB
比較
JS実行ブロック時の読み込み時間は、JS On時の4分の1
JS実行ブロック時のデータ転送量は、JS On時の6分の1
JSブロックの問題
上記のように、JS実行をブロックすると非常に快適なブラウジングが行えるようになる。しかし、JSをブロックすることで問題の発生するサイトも数多くある。
JS実行が前提のサイト
JS実行が許可されていないと非対応の文言しか表示されないサイト。Vue.jsなどのクライアントサイドフレームワークが使われている場合に多い。
レイアウト崩れ、ボタンの無反応
JSを使って動的にサイトのレイアウトを調整するサイトでは、レイアウトが崩れる。また、ハンバーガーボタンでメニューを開いてメニューからリンクを選択するようなサイトでは、ハンバーガーボタンを押下しても反応がないことが多い。
コンテンツ表示
Youtube、Twitter、Imgur等のプレビューを貼り付けてあるサイトでは、それらのコンテンツが正常に表示されない。
緩和策と理想状態
ここまでで、JSが鬱陶しいということと、かといってJSを全ブロックすると困ることがあるということを述べた。この現状において、著者は以下の方法で問題に対処している。
基本対応
- スマホのChromeブラウザにて、全サイトのJSをブロック
- JSブロックしたくないサイトを、設定からJS許可ドメイン指定してアンブロック
はっきり言って、これは面倒くさい。そんなにいろんなサイトをさまようことはないが、それでも20サイトくらいはJSホワイトリストに登録したいものが出てくる。そのドメインを手作業で登録は面倒だし、スマホの機種変更をした際に再度登録し直すのも結構辛い。
今回だけJSブロックなしで閲覧したいという場合には以下の手順を実施する。
特別にJS許可して閲覧したい場合
- Chromeの共有ボタンから他のブラウザ(JS許可してあるもの)で閲覧
これで問題は解決するが、3ステップくらい必要なので少し面倒だ。
理想状態
現在のブラウザは、当然JSブロックを前提にした作りになっていない。以下のようなことができるブラウザがあれば、JSの鬱陶しさを大きく緩和した上で使い勝手もそこそこ良くなると思う。
- 全サイトJS実行ブロック
- ボタン一つでホワイトリスト登録でき、登録されたドメインではJS実行許可
この機能があれば、JSブロックの快適さをデフォルトで享受することができ、かつJSブロックしないでおきたいサイトもボタンひとつで手軽に閲覧できる。
全サイトJSブロックが万人受けしないということであれば、以下のようなブラウザでも良いかもしれない。
- 全サイトJS実行許可
- ボタン一つでブラックリスト登録でき、登録されたドメインではJS実行ブロック
これにより、鬱陶しいサイトだけ手軽にJS実行を止めることができる。
ちなみに、この場合には、共有ブラックリスト機能があると利便性が大きく上がると思う。つまり、みんなが多くブラックリストに登録しているサイトは、自動的にJS実行がブロックされる。
AdBlockはどうなのか
広告が鬱陶しいのであれば、AdBlockでいいのではないかと思うかもしれない。それが完璧に動作するならそれでも良いかもしれなが、当然各広告配信会社にとっては死活問題なので、必死に対策を行っており、案外思うように動作しない。また、広告ブロックは、広告のスペース自体はとってしまう。そのため、広告が表示されるはずだったエリアに空白ができて、それが固定広告だった場合には結局ブラウジングの邪魔になる。
今回の方式は、ほぼ完璧に広告をブロックする。なぜなら、JSが使えないということは動的にスペースを開けることも、非同期に広告を取りにいくこともできないからだ。静的に広告を出すサイトは無理だが、現在においてそれはほぼないだろうし、仮にあったとしても、非同期通信が無いということなので、パフォーマンス的にはそう悪くない(ページにリンク付きの写真が一つ増える程度)。
今後への期待
はっきりいって現代の広告は問題だと思う。サイト運営者が収益を追い求めてうっとうしい広告を乱発するし、広告収入を稼ぐために低価値なサイトを量産するパターンもある。これにより、サイト閲覧の快適さは年々下がっているし、サイトコンテンツの質も下がっているのではないか。
今回提案するブラウザが流行れば、「鬱陶しい広告を出すサイトは広告を表示させてもらえなくなる」という状態になる。そうされると、サイト運営者の収益が減るので、「鬱陶しくない程度の広告の表示を行う」ようになると思う。
まあ、そんな鬱陶しい広告を出してても閲覧者がいるということは、現在でもユーザーに求められるコンテンツを提供しているということなのかもしれないが。