こんにちわ。開発チームのkoyaです。 今回はどんなネタがいいかなと思っていたところ、Measuring Page Load Speed with Navigation Timingという記事でNavigation TimingというAPIがあることを知りました。 Navigation Timingはウェブアプリケーションのパフォーマンスを計測できるJavaScriptのAPIです。 JavaScriptのAPIなのでCanvasと組み合わせて取得したデータを表現してみたらおもしろいかと思いやってみました。 はじめに、Navigation Timingについて簡単に紹介します(元記事により詳しい情報があるので興味を持たれた方は是非そちらを読んでみてください)。 その後、Canvasを使ってNavigation Timingの情報をグラフ化してみます。
![Navigation TimingとCanvasを使ったページロード時間の可視化](https://cdn-ak-scissors.b.st-hatena.com/image/square/0f06a444027a2fbd7e2b5f9d9ad62a949483d037/height=288;version=1;width=512/http%3A%2F%2Fdvcs.w3.org%2Fhg%2Fwebperf%2Fraw-file%2Ftip%2Fspecs%2FNavigationTiming%2Ftiming-overview.png)