Frontend Performance: Measuring & KPIs
Frontend performance really matters for user experience, conversion rate, and of course good old SEO. To build fast websites you need to know what to measure, and how to measure it.
The top frontend performance KPIs are a, b, and c, all part of the Core Web Vitals. Read on for how to measure it, how to be data-driven, and continuously optimize and build a culture of performance testing and optimization.
Let’s go millisecond hunting.
Performance KPI 1: Pagespeed Index
This is the time it takes before the website looks ready in the eyes of the user. In my eyes, the most important metric. Even though there might be other things loading in the background, the page looks ready for the user, and that’s what matters.
How do you measure this? This is in fact not trivial. First of all, the pagespeed index varies from page to page depending on end-user connection and device. So when measuring speed index, you need to include a sensible set of predefined scenarios you would like to cover.
Here is what we are using when monitoring frontend performance at Crystallize:
- Scenario 1: connection: fiber. Device: laptop. Location: Frankfurt
- Scenario 2: connection: DSL. Device: laptop. Location: London
- Scenario 3: connection: 3G. Device: the mid-end mobile phone. Location: US
Each of these scenarios gives a different speed index. You need to set up some target goals for each of them if you want to improve. For instance these ambitious values:
- Scenario 1: 0.5 seconds
- Scenario 2: 0.7 seconds
- Scenario 3: 2.5 seconds
Performance KPI 2: Time to Interactive
Another crucial metric to consider is the time to interactive. This is the time the end-user must wait until they can perform interactions on your website, such as button clicks and scrolling. In the crucial time between the user thinks the page is ready (pagespeed index), and the page is actually interactive, you might unknowingly be serving big, fat lies to the user.
Let's say you have a button on your page that needs JS from your big, fat bundle to load and evaluate, the button is essentially doing nothing but confuses the user until the page has become interactive. You are saying “I give you this button. It says Buy product. And when you click it, I will ignore it.”. When the page is interactive, the button is clickable, but the end-user will probably be totally unaware of when the page is interactive.
Performance KPI 3: First Contentful Paint
An important metric, but I regard it as less important than Speed index. This marks the first time when the users see “something” on the website. It is usually the raw HTML, usually without custom fonts and images depending on the way you load your assets. The visuals are likely to change quite a bit from “First Contentful Paint” until the whole page is done with images and all. It is however the first visual thing that the users see, so don’t think of it as negligible.
Other Performance Metrics
These three metrics are the most important ones when you do performance measuring. There are a bunch of other metrics that one can get, but they all serve a common purpose: “Improve the experienced speed for the end-user”. Frontend performance is an important factor of digital product design. The metrics described above measure just that.
How to Measure your Frontend Performance
Option 2: Chrome Devtools
Open Chrome dev tools, go to the Audits panel and run a test with the “Performance” checked. It uses Lighthouse in the background and gives back a range of metrics, one being the speed index. Use this instead of Pagespeed Insights if you desire an even more detailed report
Option 3: Webpagetest.org
Webpagetest is an online service that provides page tests on a fleet of servers located in different places around the world. Excellent when you want to perform a test where you are interested in the metrics at some other place on the planet.
User Timings API
You can leverage the native User Timings API in the browser to set checkpoints in your code on the crucial areas for your specific application. You can then use your timings and analyze them in order to pinpoint which parts of your application that need optimization.
The data from the user timings API can be collected for all your users and sent to an analyzing tool; such as Google Analytics. From there, you will get a crystal clear image of how your site is performing for your user base.
Remember, milliseconds matter.