Hacking Web Performance

Counting Every Millisecond

Today, there are several metrics that we are interested in that are user centric:

• Server Response Time

• Start Render

• First Meaningful Paint

• First Interactive

• Consistently Interactive

• Last Painted Hero, as defined by Steve Souders

• Visually Complete

Note

You can play interactively to understand differences between rendering metrics at SpeedCurve’s Rendering Metrics Picker.

It’s a good idea to define our custom metric in the relationship with our most crucial user-centric goal, such as “time to first tweet” that Twitter uses to measure the time to see the first tweet in a timeline when loading the page.

Also, a non-timeline–based metric frequently used nowadays is Speed Index. Imagine your website as a drawing to be filled by the browser; Speed Index calculates the visual progress of your canvas on a timeline.

Another way I like to define the Speed Index metric is that it determines how much blank content the user has seen on the screen during the loading process. If the Speed Index is close to 1,500, it means the user has not seen too much blank space for too long a period of time (which is good from the user’s point of view).

If the Speed Index is a larger value (e.g., more than 2,500), it means that the user has seen a lot of “nothing” for too much time, and then the entire content appeared late or in one shot (which is bad).

A smaller Speed Index value is better because it means that the user has seen more content ...