loadshow
URLを指定すると、そのページの読み込みプロセスをこんな感じの動画にするNode.js製のCLIツール loadshow (ロードショー)をオープンソースとして公開しました。
動画を並べて、読み込みスピードの比較もできます。
簡単な使い方
GitHubプロジェクトはこちら。Apache 2.0ライセンスです。
Node.js(>=20)、Chrome、ffmpegがインストールされていれば、
npm i -g loadshow
loadshow record https://apple.com/ ./apple.com.mp4
でお試しになれます。
NPMはこちら。
なぜ開発したか？
弊社では主にフロントエンドのスピード改善をお手伝いしています。
改善結果はLighthouseで計測した指標をエビデンスにしますが、専門家以外の人は数値を示されてもなかなかピンときません。
そこでこのような動画でも違いを示し、わかりやすいと好評いただいています。
社内ツールとして数年前から作り込んできたのですが、だいぶ中身がごちゃごちゃしてきたのでリメイクがてらオープンソース化しました。
動画のカスタマイズもできるようになっています。ぜひREADMEを読んで試してみてください。
サイトスピードの改善機運に貢献できたら望外の喜びです。
どんな作り？
Chrome DevTools Protocolにはそのものずばり画面の録画機能があります。
- puppeteerに縦長のビューポートを設定し、
-
Page.startScreencastでページの読み込み過程を録画して、 - sharpでフレームを構成し、
- 最後にffmpegでmp4動画に合成します
ウィンドウとビューポートを縦長に設定する都合で、全画面背景など画面高さに合わせたCSSがあるページは苦手です。
動画上部の情報バナー(タイトルやURLなど)は、node-html-to-imageによって生成しています。
社内ツール時代はLinuxで動作すればよかったんですが、MacOSやWindowsなど他のプラットフォームではpuppeteerの挙動に微妙な違いがあって、対応に苦労しました。
その他いろいろ発展途上なので、ぜひ改善にご協力ください！