Loadshow β
こんな感じでスマホページの読み込みプロセスをコンパクトな動画にします。
例: トヨタ自動車WEBサイト https://toyota.jp/
こんな感じで複数の動画を並べて比較する機能もあります。
競合比較はもちろん、同じページを時間の違いでも比較できます。速度が改善されたよーといプレゼンにも。
ぜひ遊んでみてください！
なぜ作ったか
単純に動画にすると 表示速度 がわかりやすいと思ったからです。
計測ツールとしては PageSpeed Insights が有名ですが、結果が数値で示されても偉い人に伝わりません。
そもそも PageSpeed Insights はWebアプリケーションとして応答性能も重視するため、結果は 表示速度 とちょっと違います。
RUMを計測するのが一番ですが、やはり数値だとピンときません。
わかりやすい動画で多くの人が問題を認識し、共有してくれるといいなと願ってます。
細かな話
スマホのシミュレーション
ブラウザは Puppeteer で制御してます。CPU Throttlingは x4、Upload/Downloadは最大 10Mbps に制限しています。
90%描画 (Paint 90%)について
通信が一通り終わったタイミングから2秒ほどウェイトを入れて、Webページという画 が完成したと判断します。
これが動画の最終フレームであり、読み込み過程のフレームは最終フレームに近づく過程と捉えて、ピクセルベースの差分から進捗を評価します。
完成の90%まで近いたら必要な情報はおおよそ表示されただろう、ということで90%描画を 表示速度の基準値 としました。
カルーセルスライダーのような動的要素の影響を吸収する効果もあります。
ビューポート
ビューポートを縦長にして録画しています。そのため、CSSによっては表示が大きく崩れることがあります。
また、通常のブラウザとはリソースの扱いが厳密には違う部分があるとも推測してます。
技術スタック
ホスティング Firebase
ホスティング、Googleアカウント認証、結果データの管理、アナリティクスは Firebase です。楽ちん！
動画生成 Puppeteer + FFmpeg
動画の生成は Puppeteer と FFmpeg でゴリゴリやってます。
フロントエンド Vue.js 3 + simple.css
Vue.js と Simple.css でさくっと。
素のHTMLを書くだけで不快じゃないデザインになるSimple.cssいい！
ワーカー おうちKubernetes + PubSub
動画生成がけっこう重い処理です。クラウドだとバーストしたときコストが怖いので、退役マシンによるおうちKubernetesクラスタで処理してます。
なので計測時間には計測側由来のばらつきもあります。無料なのでご容赦ください。