Help us understand the problem. What is going on with this article?

05.PerformanceWaterfall - High Performance Web 2015

More than 3 years have passed since last update.

パフォーマンス・ウォーターフォール

SpeedIndex は算出する指標だったが、ここでは実測の指標を見て行く。

watagall view

これは WebPageTest というサービスでとった自分のサイトの測定結果。

https://jxck.io

webpagetest.png

シンプルなページなので結果もシンプルだ。

metrics

  • DNS Lookup
  • Initial Connection
  • SSL Negotiation
  • Time to First Byte
  • Content Download
  • Start Render
  • msFirstPaint
  • DOM Content Loaded
  • On Load
  • Document Complete

この辺のポイントまでとれれば現状十分かと思われる。

この場合、ばっと見ても TTFB(Time To First Byte) と SSL Negotiation が支配的に見える。

ちなみに図中上の表には SpeedIndex も出ている。

DNS Lookup / initial connect / SSL Negotiation

DNS の解決は、ホストの名前解決だ。解決結果がキャッシュされてればいいが、されてなければ必須となる。

initial connect は TCP の接続確立で、要するに 3 way handshake。

SSL Negotiation は、 HTTPS ページでの TLS セッション確立。

これだけでもそれなりに RTT があるため、無視は一切できない。

TTFB (time to first byte)

ブラウザはサーバに接続し、リクエストを投げて、レスポンスを受け取る。
TTFB は、そのレスポンスの最初のパケットを受け取った時間を現す。

つまり、サーバ内で解決する Response Time に、双方間でのネットワークが消費する時間が加えられたものになる。

つまり、クライアントから見た「サービスの速さ」は実際にはこっちの方がリアルに現されていると言えそうだ。どんなユーザもネットワーク環境が良好なところにいるとは限らないという点が加味できる。

Start Render / First Paint

コンテンツとして HTML を取得すれば、それを解析し DOM を構築し、必要なサブリソースを取ったりなんかして、画面に表示を始める。

解析を始めた瞬間が Start Rendering で、その結果画面に絵を表示し始める瞬間がこの First Paint になる。

例えば Start Rendering と First Paint の間に時間が空いたようであれば、レンダリングプロセスの途中、サブリソースの取得などでレンダリングがストップする問題などが見つかる。

SpeedIndex を向上するためには、 First Paint はなるべく速い方が良いという視点に立てば、このレンダリングがスムーズにペイントを始められるようなチューニングも見えてくるなど。

onload / DOMContentLoaded

DOMContentLoaded は、ここに書かれている通り、HTML の取得と解析が終わった時点で発火する。

その後 HTML に付随する全てのサブリソースが取得されて、そのページを構成する全てが取得された時点で発火するのが onload となる。

つまり、 DOMContentLoaded の遅延がある場合、 HTML の解析をブロックする何かがある可能性を示唆し、DOMContentLoaded と onload の間にある時間は、サブリソースの取得でもたついている可能性を示唆する。

これは JS 書く時にどっちを取るかという話でもよく使われるが、実際にはブラウザの中で何がどこまで進んでいるのかを知るという意味で、結構重要な指標だったりする。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away