イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Paint Timing APIを使用してクライアントサイドのパフォーマンスを計測してみた

こんにちは!小柳津です。
もう2018年になってから2月後半になりました。
時の流れは早いですね。。。早すぎる。。。

エンジニアとしては時の流れに負けないくらい高速なWebサイトを作っていきたいですよね。
でもWebサイトを高速化させるにはそもそも表示が遅いのか早いのかを知る必要があります。
そこで今回は、Paint Timing APIというものを使用してクライアントサイドのパフォーマンスを計測してみました。

First PaintとFirst Contentful Paint

まず前提知識の紹介です。

昨今のWebサイトのパフォーマンスを指標としてFirst Paint(FP)とFirst Contentful Paint(FCP)というものが定義されています。

First Paint(以下FP)はページにアクセスしてからブラウザが白い画面から何か1ピクセルでもレンダリングするまで時間のことを指します。

それに対して、First Contentful Paint(以下FCP)はページにアクセスしてからブラウザがコンテンツの最初のビットをレンダリングするまで時間のこと指しており、そのコンテンツにはテキスト、画像、SVGなどが含まれます。

上記のFP, FCPの値が小さければ小さいほどユーザーはページにアクセスしてからのページの表示が早いと感じるのでパフォーマンスがよいと感じることになります。

FPとFCPはGoogle Chromeのデベロッパーツールを使って視覚的に確認することができます。

  1. 計測したいページを開いておく

  2. デベロッパーツールを開く

  3. Performanceのタブを開く

  4. reloadボタンを押す

performance tab.png?
performance reload.png?

スクリーンショットの部分にマウスをホバーすると何msのタイミングでページがどのように表示されているかが分かるようになります。

performance white.png?

※赤い枠線がスクリーンショット

この機能を活用すればFP, FCPが確認できます。

performance reload.png?

※白い画面

performance fp.png?

※FP(backgound-colorが表示されている)

performance fcp.png?

※FCP(テキストが表示されている)

performance complete.png?

※表示完了

Paint Timing API

Paint Timing APIとは、上記で説明したFC, FCPを取得できるAPIです。
Google Chrome 60からこのAPIが使用できるようになっています。

APIの仕様は以下のページです https://w3c.github.io/paint-timing/

APIの仕様をもとにFC,FCPをコンソールに出力させてみました。

    var observer = new PerformanceObserver(function(list) {
        var perfEntries = list.getEntries();

        for (var i = 0; i < perfEntries.length; i++) {
            var metricName = perfEntries[i].name;
            var time = Math.round(perfEntries[i].startTime + perfEntries[i].duration);
            console.log(metricName, time);
        }
    });
    observer.observe({entryTypes: ["paint"]});
performance console.png

上記の画像ではコンソールに出力させていますが、この値をGoogle Analyticsに送信することで、定量的にサイトのパフォーマンスを計測することができそうです。

このFP, FCPを直帰率などの他のKPIと紐付けることで、どのページを改善するのか、何秒まで縮めるのかという具体的な目標をもってパフォーマンス改善ができそうですね。

今回はクライアントサイドのパフォーマンス計測をしましたが、最近はサーバからの応答時間を計測するServer Timing APIというのも策定されているらしいので、それについても調べていこうと思います!

今回はここで失礼します。