Thursday, October 1, 2015

ウェブページの描画 (first-paint) までの時間を測定するツールを作った件、もしくはHTTP2時代のパフォーマンスチューニングの話

ウェブページの表示までにかかる時間をいかに短くするかってのは、儲かるウェブサイトを構築する上で避けて通れない、とても重要な要素です。

少し古いデータとしては、たとえば、ウェブページの表示が500ミリ秒遅くなると広告売上が1.2%低下するというBingの例なんかも知られているわけです。

「ウェブページの表示までにかかる時間」と言った場合、実際には以下のようないくつかのメトリックがあります。

イベント 意味
unload 現在のページからの離脱。離脱後、first-paintまでは真っ白な表示になります
first-paint ウェブページの初回描画(HTMLの後半や画像は存在しない可能性があります)
DOMContentLoaded ウェブページのレイアウト完了
load (onload) 画像等を含む全データの表示完了

ウェブサイトチューニングにおいては、
  • ユーザができるだけ早くウェブページを閲覧し始めることができるよう、first-paintの値を小さくすることを第一の目標注1
  • 全データができるだけ早く揃うよう、loadの値を小さくすることを第二の目標
とすることが一般的かと思います。

ですが、残念なことに、first-paintまでの時間をAPIを用いて取得できるウェブブラウザは一部に限られています(参照:「Webページ遷移時間のパフォーマンス「First Paint」を計測する方法」)。また、測定にあたって、運用中のウェブページに変更を加えたくない、ということもあったりします。

wpbenchは、これら2点の問題を解消するベンチマークツールです。


wpbenchは、たった1枚のHTMLファイルです。このHTMLファイルを自分のウェブサイトに追加するだけで、そのサイト上の任意のページの表示までにかかる時間が測定可能になります。また、body.clientHeightをポリングするという力技により、FirefoxやChromeのようなfirst-paint取得のためのAPIを提供しないウェブブラウザにおいても、その値を取得、表示することができます。

HTTP/1.1を使っている場合、これらパフォーマンスメトリックは、専らネットワーク状況とウェブブラウザのみに依存して決まる値でした。しかし、HTTP/2では、ウェブブラウザとウェブサーバが恊働して、アセットの転送順序を制御することができるようになった結果、使用するウェブサーバによってパフォーマンスが大幅に変わる、という状況が産まれはじめています。

たとえば、HTTP2サーバ「H2O」のベンチマークページを見ていただくと、ウェブサーバによってfirst-paintまでの時間が倍近く異なるケースがあることがお分かりいただけるかと思います。

既にパフォーマンスチューニング済のウェブサイトを管理している方々も、HTTPS、あるいはHTTP/2への対応にあたり、いま一度、ウェブサイトの表示速度を確認されることをおすすめいたします。


注1: ブラウザによってはfirst-paintのタイミングを取得できないため、DOMContentLoadedを使うこともありますが、DOMContentLoadedには<body>末尾に配置する統計系のスクリプトの読み込みにかかる時間等が加算される点等、注意が必要になります。また、画像なしに閲覧が不可能なサイトについては、Above the foldの値をチューニングする必要があります

12 comments:

  1. If You Want Watch IPL Live Stream Then Visit www.crickspo.com, it also provide IPL Live ScoreCheck IPL Updates, IPL News, Ball By Ball Score, Men of the atch, men of the series, who won the toss today etc.

    ReplyDelete
  2. Hi its was really good that you have shown interest in the things I am also interested. I'd surely come back on your website for such kind of niche stuff. Hats off to you for the efforts you and your team is doing.
    IPL Schedule 2018
    watch ipl online,
    t20 World cup Live Stream
    IPL 2018 Streaming
    IPL 2018 live Streaming
    IPL 2018 Streaming
    IPL live Streaming
    IPL live
    t20 world cup final stream
    t20 world cup final scrore
    t20 world cup final 2018
    watch t20 world cup online

    ReplyDelete
  3. you are truly a good webmaster. The web site loading pace is incredible. It kind of feels that you are doing any distinctive trick. Also, The contents are masterwork. you’ve performed a great activity on this subject!

    Happy Australia Day Images 2019
    Happy Australia Day 2019 Images
    Happy Australia Day Photos 2019
    Happy Austrlaia Day Poems 2019
    Happy Australai Day Qutoes 2019

    ReplyDelete
  4. I’m excited to find this page. I wanted to thank you for ones time due to this wonderful read!! I definitely savored every bit of it and I have you book marked to see new stuff in your web site.

    Happy Easter Images 2019
    Happy Easter Poems 2019
    Happy Easter Wishes 2019
    Happy Easter Messages 2019
    Happy Easter Greetings 2019

    ReplyDelete

Note: Only a member of this blog may post a comment.