Before and After Load Time Stats Block for React

Edit BEFORE_TENTHS and AFTER_TENTHS at the top of the file. They are tenths of a second, so 48 is 4.8 s. The saved time and the percent faster are the difference and that difference as a share of the time before, so the chip always agrees with the two readings.

The seconds saved, with a true minus sign, and under it how much faster that is as a percent of the time before. A lower time is the improvement, which is why the chip says "faster" rather than a signed percent on its own.

A drop is good for a load time and bad for revenue, so the block does not colour the direction. The before reading is muted, the after reading is the largest type, and the chip says "−2.9 s" and "60.4% faster" in words.

Yes. The two readings are a description list: each label is read before its time, even though the time is drawn large. The connecting line, the dots and the down arrow are hidden from assistive technology because the chip states the change. The times and the chip are kept left to right, so a right-to-left page doesn't move the unit or the minus sign.

The three parts stack: the time before, the chip on a vertical line with a down arrow, then the time after. Each divider becomes a top rule. Nothing scrolls sideways at 320 pixels.

The header and the comparison fade up once when the page loads, and the time after rolls up once it scrolls into view. A screen reader hears the final time immediately. With reduced motion the fade is off and the digits change in place.