Visual Metrics
Start Render - The time from the start of the first request to when the browser first starts rendering the page. It's measured in milliseconds.
Visually Complete - The time from the start of the first request to when the page is completely rendered. This time is capped at the Fully Loaded time, so anything loaded via asynchronous JavaScript after Fully Loaded will not affect this metric.
Speed Index - A calculated metric that represents how quickly the page renders above-the-fold content. This is measured in milliseconds, but the units are usually left off when displaying this metric. We adhere to this practice in our application. See here for more information about Speed Index and how it's calculated.
Speed Index
Speed Index was introduced as a way to measure a user's perception of how fast a site is. In general, when comparing two pages, a lower Speed Index equates with a user's faster perception of how the page loads. The calculation is fairly technical, but it is basically a sum of the percent of the page that is not rendered from the start of the request to visually complete. Pages that contain animations of any kind will be penalized in this measurement, because the page will continue to change.
Screenshots
In order to calculate all of these metrics, screenshots are taken of the browser session. We include a link to download all of the screenshots that were taken during a run on the run results page. These are included in a Zip file, with directories corresponding to the pages from the check. Additionally, there is an index file in YAML format. This is a format that is both human and computer readable, and can be opened in any text editor.
We capture the screenshots in 100 ms windows. If the browser has rendered anything within a 100 ms window, we capture a screenshot with the time that the last change happened within that window. If the browser has not rendered anything within the window, we wait for the next time the browser renders something. With this capture mechanism, you might see gaps in the screenshots that are either greater than 100 ms or less than 100 ms.
If the gap is less than 100 ms, it means that rendering events were captured in two consecutive windows and those events occurred less than 100 ms between each other. For example, imagine that we start capturing at 0 ms, and the browser renders to the page at 75 ms and 120 ms. The render event at 75 ms occurs in the first window and the render event at 120 ms occurs in the second window. There is only 45 ms between the events, but we capture both events.
If the gap is greater than 100 ms, it means nothing was rendered within the window and we waited until the next event to capture a screenshot. In our testing, we have seen it is common for a page to start loading and then not render anything as resources are loaded in.
Comparing Metrics to WebPageTest
If you compare a page using a Real Browser Check versus a Web Page Test, you might notice that there are differences in the numbers. There are numerous things that can affect timings, including differing browser versions, differing hardware, or virtual machine environments. In our tests, we have discovered that all metrics from a Real Browser Check are generally much lower than those obtained from Web Page Test, including visual metrics.