How We Measure Performance
This document identifies a set of primary application metrics for the Venia reference PWA storefront and the methodology used to collect them.
- First Contentful Paint
- First Meaningful Paint
- Speed Index
- First CPU Idle
- Time to Interactive
- Max Potential First Input Delay
- Time to First Byte
The public demo site for the Venia reference PWA storefront is located at https://venia.magento.com.
📝 Currently we only measure the home page. Soon we will add additional pages such as Category, PDP and additional flows such as Checkout.
A Lighthouse Audit provides measurements for the following primary metrics:
- First Contentful Paint
- First Meaningful Paint
- Speed Index
- First CPU Idle
- Time to Interactive
- Max Potential First Input Delay
- Navigate to https://venia.magento.com
- Open the Chrome Developer Tools
- Open the
Auditstab - Select the following options:
| Option | Value |
|---|---|
| Device | Mobile |
| Audits | All of them |
| Throttling | Simulated Slow 4G, 4x CPU Slowdown |
| Clear Storage | Yes |
- Run the audit
The metrics are reported like so:
A WebPageTest audit provides measurements for the following primary metrics:
- Time to First Byte
- Navigate to https://www.webpagetest.org/
- Select the following options:
| Option | Value |
|---|---|
| Website URL | https://venia.magento.com |
| Test Location | Moto G (gen 4) |
| Browser | Moto G4 - Chrome |
- Click
Start Test
The metrics are reported like so:
We could profile our React application and its components in production but best practices are to perform this profiling in development to better highlight areas for improvement.
Here are the official React docs.
There aren't any associated primary metrics with a React Performance Profile, but it does help us identify where our rendering bottlenecks are.
We follow this tutorial to identify potentially troublesome components.