Measuring performance by looking at any one metric in isolation is rarely a good idea. It can lead to a myopic view of performance and cause people to overlook potentially powerful optimizations.

As a result, MDN is taking a broader view by choosing one primary KPI and supporting it with several secondary KPI’s. Each of the KPI’s helps to answer one of the following questions:

1. Is it happening?
2. Is it useful?
3. Is it usable?

Italic denotes primary objective

Metric	Status	Goal
Time to Interactive Example Loaded	4.7s	3.7s
Start Render	2.3s	1.4s
SpeedIndex	2530	2000
Hero H1 Render	3.6s	1.4s
First Interactive	4.3s	3.5s

The primary performance KPI for MDN is the Time to Interactive Example Loaded metric. MDN has done research into what developers want from documentation and how they learn best, and interactive examples are at the top of the list. That’s why MDN has chosen to lead their wiki pages with interactive examples instead of burying them further down the page.

It’s also why measuring how quickly those examples are loaded and ready to be used is so critical.

RUM: 3.7 seconds for the 90th percentile

RUM: 4.7 seconds for 90th percentile

We measure this metric in both synthetic (via SpeedCurve/WebPageTest) and RUM (Google Analytics).

For RUM, we beacon the result of a User Timing mark to Google Analytics as a timing event. Since timing events are sampled at only 1%, we’ll also track that metric as a standard event at least initially. As we accumulate data, if we see that we’re not losing too much important information, we’ll look at eliminating the standard event tracking.

We're going to be looking specifically at the 90th percentile for RUM data.

The timing mark we're looking at for load time is:

• For JS pages, js-ie-load-event-end-measure
• For CSS pages, css-ie-load-event-end-measure
• For the tabbed editor (HTML pages), tabbed-ie-load-event-end-measure

In each case, the metric measures the time time the parent page's navigationStart event until the iFrames loadEventEnd event.

We also set custom marks for ie-time-to-complete (on the iFrame's readyStateChange event firing complete) and ie-time-to-interactive (on the iFrame's readyStateChange event firing interactive). These metrics tell us information about the iFrame specifically, with no insight whatsoever into how that fits into the parent page. We're tracking these to help us debug an analyze, but not currently to use as a key metric or goal.

The secondary performance KPIs support the primary one, and give MDN a better holistic view of how the site performs. Each of the secondary performance KPIs will be tested synthetically using SpeedCurve/WPT. We’re also putting the site under stress for each metric—the goals below are based on synthetic tests run in Chrome at 1366px with the CPU throttled 3x, from India.

For each metric, we’re aiming for a number that is noticeably faster than either MDN currently, or W3Schools (we choose the fastest of the two for our baseline). Based on Weber-Fechner’s Law, we then aim for a number that is 20% faster than our baseline.

Dashboard for Secondary Metrics

Start Render is the time from when the initial navigation began until the first non-white content has been painted to the screen.

1.4 seconds or less on interactive example pages.

2.3 seconds. W3Schools is at 1.7s.

Is it happening?

2000 (2 seconds) or less on interactive example pages.

2.53 seconds. W3Schools is at 3.03s.

Is it happening? (In this case, the same question as Start Render, but it provides us a holistic view of the progression of the page load which is valuable)

The H1 Render time is a synthetic measurement that measures when the first H1 element finishes rendering.

1.4 seconds or less on interactive example pages.

3.6 seconds. W3Schools is at 1.7s.

Is it useful?

First interactive is the time it takes for the first interactive window to begin and the site to become usable. The first interactive window is the first period after the first contentful paint (something of substance, not a background, for example) where the main thread is available for interactivity for a period of at least 5 seconds.

3.5 seconds or less on interactive example pages.

4.28 seconds. W3Schools is at 6.73s.

Is it usable?