Webページの読み込み速度を操作して、もっさりサイトをエミュレートする

Tech, クライアントの無茶な要求に耐える, ツール, 作ってみたエミュレーター, ロード時間

Webサイトの読み込み時間は2秒以内に?

webサイトの読み込み時間は、長くとも2秒が理想と言われています。
それって、体感するとどんな感じなんだろうか。

僕は以前SIerの会社で働いていたので、

僕「その仕様だと負荷が大きく、読み込みに最低でも2秒はかかります。。。」
??「2秒なら大丈夫っしょ!このままの方針でやってみて!」

—– 数日後 ——
僕「できました!」
??「これじゃ遅すぎて使えないから直して!」

こんな感じのやり取りがありました。まあしょうがないことです。
今回は、読み込み時間を体感できる簡易版のエミュレーターを作ってみました。

Webページの読み込み時間をいじる

コード

大抵のページ遷移には、 aタグが使われているので、aタグ(もしくはaタグ内の画像やdiv)をクリックした場合にイベントをキャンセルしてsetTimeoutで時間をズラすコードを作ってみました。
セマンティックじゃないサイトには効かないぞい。

document.onclick = function (e) {
  document.body.remove();
  let url;
  let element = e.target;

  for (let i = 0; i < 10; i++) {
    url = element.href;
    if (url) break;
    element = element.parentNode;
  }

 // 1000ms待ってから画面遷移
  window.setTimeout(() => {
    window.location.href = url
  }, 1000);
  return false;
}

上記のコードを、amazonを開いてchromeのコンソールで実行してみました。
何かしらの商品をクリックすると、いつもよりもっさりした動作で遷移してくれました。

ScriptAutoRunnerで、ページ遷移ごとにjsを実行

ページを移動するたびにスクリプトをコンソールで実行するのは面倒なので、chromeのextensionを使ってみました。
自分でextensionを作るのはちょっと面倒なので、こちらを使います。

詳しくはこの記事が良さそうです。とはいえ、見た感じ直感的なextensionなので、触ればわかりそうです。

設定してみた。UIがオシャレ。

もっさりしたAmazonを見よ

ページ読み込み時間を +2秒上乗せしたAmazonの動きはこちらです。

こんなAmazonは嫌だ

エミュレータ利用上の注意点

あなたが顧客に速度の重要性を説明しても伝わらない場合、これは良いデモになると思います。
ですが、使用の際には下記に気をつけてください

このスクリプトは待ち時間を上乗せできるだけ

待ち時間を1000msに設定しても、webサイトの本来の読み込み時間に1000ms上乗せされるだけです。
読み込み時間が1000msになるわけではないので気をつけて。

リンクのクリック以外のクリックができなくなる

すべてのクリックの挙動を上書きしています。
検索テキストボックスをクリックしても正しい挙動をしないので、お気をつけください。