Frontend Performance: Measuring & KPIs

Frontend performance really matters for user experience, conversion and of course good old SEO. To build fast websites you need to have the performance metrics. The top three frontend performance KPIs are: pagespeed index, time to interactive and first contentful paint. Be data driven and continuously optimize and build a culture of performance testing and optimization. Snowball did a blogpost on why fast websites increases sales. Lets go millisecond hunting.

Performance KPI 1: Pagespeed Index

This 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 speedindex, 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: mid-end mobile phone. Location: US

Each of these scenarios gives a different speed indexes. 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 site, 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 confuse 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 I 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 less important than Speedindex. This marks the first time when the users sees “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 sees, 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.

When optimising frontend performance you also need to monitor the performance of your back-end. With a headless commerce approach you need to make sure your back-end has a fast ecommerce api.

How to Measure your Frontend Performance

Option 1: Pagespeed Insights

Page speed insights is web based, uses Lighthouse behind the scenes.

Option 2: Chrome Devtools

Open Chrome devtools, 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 is an online service that provides page tests on a fleet of servers located on 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 on how your site is performing for your user base. Remember: milliseconds matter.