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にはそのものずばり画面の録画機能があります。

ウィンドウとビューポートを縦長に設定する都合で、全画面背景など画面高さに合わせたCSSがあるページは苦手です。

動画上部の情報バナー(タイトルやURLなど)は、node-html-to-imageによって生成しています。

社内ツール時代はLinuxで動作すればよかったんですが、MacOSやWindowsなど他のプラットフォームではpuppeteerの挙動に微妙な違いがあって、対応に苦労しました。

その他いろいろ発展途上なので、ぜひ改善にご協力ください！