Top Metrics You Need to Understand When Measuring Front-end Performance

• first-input-delay

  1 340 0.6 JavaScript

  Discontinued A JavaScript library for measuring First Input Delay (FID) in the browser.

  

Since properly measuring the FID requires real user interaction, you can’t simply scan a website and get that value. However, you can add code to your application to get that information. Once you have, it’s up to you to do whatever you want with it. Google has an open-source script you can use directly inside your page to measure this metric: https://github.com/GoogleChromeLabs/first-input-delay

• layout-instability

  1 156 0.0 Makefile

  A proposal for a Layout Instability specification

  

You can find it right under the TBT value. If on the other hand, you want to incorporate this value into a custom report or you want more control over how it gets calculated, you can take advantage of the Layout Instability API which gives you everything you need to measure how elements shift around on your webpage. This alternative gives you full control over the calculation and what to do with it, however, notice that it’s not a straightforward formula and that it requires lots of consideration (such as what happens with iFrames and pages on the background). So instead, if you're looking for a custom alternative you can check out Google’s WebVitals API which provides a very handy getCLS method.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• lighthouse

  152 27,846 9.6 JavaScript

  Automated auditing, performance metrics, and best practices for the web.

  

The fastest and easiest way to calculate the TTI of your website, is to use Lighthouse on Google DevTools. As part of the generated report by Lighthouse you have the TTI number:

• web-vitals

  140 7,130 7.6 JavaScript

  Essential metrics for a healthy site.

  

You can find it right under the TBT value. If on the other hand, you want to incorporate this value into a custom report or you want more control over how it gets calculated, you can take advantage of the Layout Instability API which gives you everything you need to measure how elements shift around on your webpage. This alternative gives you full control over the calculation and what to do with it, however, notice that it’s not a straightforward formula and that it requires lots of consideration (such as what happens with iFrames and pages on the background). So instead, if you're looking for a custom alternative you can check out Google’s WebVitals API which provides a very handy getCLS method.

Suggest a related project