browsertimeで、Webページの描画過程を録画する

browsertimeを使い、Webページのロード時間を計測しながら、描画過程を録画する。

うまくいくとこんな感じで、録画できる。

browsertimeで生成されたmp4ファイル、HTMLの記述例などは、GitHubに置いた。

https://github.com/kentatogashi/example-browsertime

browsertimeの実行方法

OSは、Ubuntu16.04を使う。

Dockerを入れる。

# apt update 
# apt install -y docker.io

browsertimeを実行する

# docker run --privileged --shm-size=1g --rm -v "$(pwd)":/browsertime-results sitespeedio/browsertime -n 1 -c cable --video --speedIndex 'https://www.yahoo.com'

実行すると、ディレクトリが生成され、動画や画像が格納される。

$ tree www.yahoo.com
www.yahoo.com
└── 2017-02-14T043457+0000
    ├── browsertime.har
    ├── browsertime.json
    └── video
        ├── 0.mp4
        └── images
            └── 0
                ├── ms_000000.jpg
                  (snip)
                 └── ms_007950.jpg

4 directories, 78 files

HTTP/1.1とHTTP/2の比較計測をする際に、はかどりそう。

あと、日本語サイトに対して、実行すると文字化けするので、ちょっと残念なところはある。

参考 - GitHub - sitespeedio/browsertime: Your browser, your page, your scripts!