3 Major Metrics to Measure your Site's Performance

As a site owner, especially for consumer-facing websites, it is very important that you monitor your website's performance and ensure that all your code and assets are optimised to create the best user experience possible for your users. if users feel your website is buggy or slow, they'll quickly bounce to the next option. A poorly optimised website will also struggle to attract natural traffic from google and other platforms which are designed to test your website on certain metrics. In this post, we'll be discussing 3 of the most relevant metrics which you can use to measure the performance of your website. 1. Largest Contentful Paint (LCP) Your website's LCP is the time it takes the browser to load the largest element on your webpage. Even though the largest element can be any Video, Image, Text etc. on the loaded page, it is usually the first image or video in your website's viewport once your page is loaded. This metric is very important because it creates your user's first impression of your website. Tools like PageSpeed Insights can show the LCP(in milliseconds) and Largest element of your webpage. Using simple techniques like compression, proper image formatting, responsive media etc. you can quickly improve your site's LCP and improve your overall site speed. 2. Interaction to Next Paint (INP) In simple terms, this means how long it takes your website to respond to user interaction(e.g clicking a button, clicking a link, typing in a form etc.). It is measured by considering all user interactions during page visit and selecting the longest time-to-visual-feedback after an interaction. You can view your sites INP metrics in the performance tab of your chrome devtools. Some techniques to improve your INP include: Avoid long-running thread-blocking tasks(use asynchronous code instead) Make third party request asynchronous, use setTimeout, or just remove third party dependencies if they significantly reduce performance Avoid unnecessary computations inside event handlers Provide immediate visual feedback after interactions, even if interactions take time to process(e.g spinners, animations) 3. Cumulative Layout Shift (CLS) This basically defines how shifty your website is. If you've visited any website where the text and content just randomly moves as images and other content become visible, you'll know how disruptive and frustrating it can be. CLS aims to measure how often and how much this shifts occur. CLS mostly focuses on shifts that happens without user input(shifts after interactions like clicking a button are not considered). The CLS for your website can be seen in the performance rab of your chrome devtools. Other tools like Google Pagespeed Insight and GTMetrics can also be used to measure your site's CLS. A CLS of 0.1 or less is best for a good user experience. Here are some tips to make your website less shifty: Always specify width and height attributes for your img and video tags. This allows your browser to properly allocate space on the screen for these elements while they load. Also allocate spaces for ads, embeds and iframes. If you're unsure about the exact dimensions, reserve a sufficient size the element might occupy. Avoid dynamically injecting content above existing content. Unless the content will be injected due to user interaction, allocate space for the dynamically injected content beforehand. When using custom fonts, use font-display: swap; to make your browser display a fallback font initially and swap to your custom font after it's done loading. This can reduce the impact of the change on your site's layout Having a well optimized website can have proven signficant impact on lead conversion and user retention. Using the techniques and monitoring the metrics mentioned in this article can quickly improve your user experience. Which other vital metrics do you know?

Apr 8, 2025 - 20:56

3 Major Metrics to Measure your Site's Performance

As a site owner, especially for consumer-facing websites, it is very important that you monitor your website's performance and ensure that all your code and assets are optimised to create the best user experience possible for your users. if users feel your website is buggy or slow, they'll quickly bounce to the next option. A poorly optimised website will also struggle to attract natural traffic from google and other platforms which are designed to test your website on certain metrics.

In this post, we'll be discussing 3 of the most relevant metrics which you can use to measure the performance of your website.

1. Largest Contentful Paint (LCP)

Your website's LCP is the time it takes the browser to load the largest element on your webpage. Even though the largest element can be any Video, Image, Text etc. on the loaded page, it is usually the first image or video in your website's viewport once your page is loaded. This metric is very important because it creates your user's first impression of your website. Tools like PageSpeed Insights can show the LCP(in milliseconds) and Largest element of your webpage. Using simple techniques like compression, proper image formatting, responsive media etc. you can quickly improve your site's LCP and improve your overall site speed.

2. Interaction to Next Paint (INP)

In simple terms, this means how long it takes your website to respond to user interaction(e.g clicking a button, clicking a link, typing in a form etc.). It is measured by considering all user interactions during page visit and selecting the longest time-to-visual-feedback after an interaction. You can view your sites INP metrics in the performance tab of your chrome devtools. Some techniques to improve your INP include:

Avoid long-running thread-blocking tasks(use asynchronous code instead)
Make third party request asynchronous, use setTimeout, or just remove third party dependencies if they significantly reduce performance
Avoid unnecessary computations inside event handlers
Provide immediate visual feedback after interactions, even if interactions take time to process(e.g spinners, animations)

3. Cumulative Layout Shift (CLS)

This basically defines how shifty your website is. If you've visited any website where the text and content just randomly moves as images and other content become visible, you'll know how disruptive and frustrating it can be. CLS aims to measure how often and how much this shifts occur. CLS mostly focuses on shifts that happens without user input(shifts after interactions like clicking a button are not considered). The CLS for your website can be seen in the performance rab of your chrome devtools. Other tools like Google Pagespeed Insight and GTMetrics can also be used to measure your site's CLS. A CLS of 0.1 or less is best for a good user experience. Here are some tips to make your website less shifty:

Always specify width and height attributes for your img and video tags. This allows your browser to properly allocate space on the screen for these elements while they load. Also allocate spaces for ads, embeds and iframes. If you're unsure about the exact dimensions, reserve a sufficient size the element might occupy.
Avoid dynamically injecting content above existing content. Unless the content will be injected due to user interaction, allocate space for the dynamically injected content beforehand.
When using custom fonts, use font-display: swap; to make your browser display a fallback font initially and swap to your custom font after it's done loading. This can reduce the impact of the change on your site's layout

Having a well optimized website can have proven signficant impact on lead conversion and user retention. Using the techniques and monitoring the metrics mentioned in this article can quickly improve your user experience.

Which other vital metrics do you know?