As a web developer or a website admin, you are probably always on the lookout for new ways you can speed up your website. Not only will a faster website make the experience of your users significantly better, but it will also help you get discovered through better SEO scores. A common source of slowdowns that negatively impact websites is unoptimized scripts, either third-party or first party. For that reason, if you are currently eyeing Clarity as a potential tool, or if you are an old-time Clarity user, you may be wondering: will Clarity slow down my website? 

Here at Microsoft Clarity, we are committed to ensuring that our open source instrumentation js client offers the best performance in its class. Our internal benchmarks show that for the vast majority of Clarity users, Clarity has no measurable impact on page load time, but you don’t have to take our word for it! Below we will walk you through the steps on how to measure the impact of Clarity on your website’s performance. 

Web Vitals 

When discussing website performance, the most widely used metrics are the Web Vitals set of metrics. A website scoring well on its core web vitals will offer a better user experience. The two web vitals that matter the most when discussing Clarity’s impact on page load performance are: 

• Largest Contentful Paint (LCP): measures loading performance. 
• First Input Delay (FID): measures interactivity.  

There are plenty of guides on how to optimize your website’s LCP and FID, and what good numbers look like. This article will not focus on how you can improve these measurements, but rather on how to use these measurements to verify Clarity’s performance on your website. 

Measuring Web Vitals 

The first step towards measuring web vitals is choosing one of the many tools available online that will profile your website for you. These tools offer more objective measurements, compared to measuring web vitals using your own local device. We do not recommend any one in particular, but some of the most popular ones available in no particular order are: 

• Pagespeed Insights: https://pagespeed.web.dev/ 
• GTMetrix: https://gtmetrix.com/ 

Once you have chosen a tool or a selection of tools we are ready for beginning the benchmarking. 

Step 1: Create Baseline Measurement 

In order to compare your website’s vitals with and without Clarity, you must first measure your website in its current state. Using the tool of your choice, take a few measurements of your website, to establish the baseline numbers of your web vitals. You may also wish to establish numbers for your desktop and mobile experiences separately. Your reports could end up looking something like this: 

You should now have a good idea what your numbers look like. You will also notice that many of the online tools show you diagnostic information, and can even suggest improvements to your page. We recommend you apply these improvements in general to improve your page’s performance, but this is not a necessary step for continuing with this article. 

Step 2: Create Treatment Measurement 

Now that we have a good idea of what your website’s performance looks like, we need to obtain a new set of measurements with Clarity enabled on your website. We recommend you set up a secondary endpoint or use query parameters to generate a version of your website, that has Clarity enabled. An example set up could look like:  

• mywebsite.com/index.html (no clarity) 
• mywebsite.com/index-with-clarity.html (has clarity) 

This makes it easier to differentiate the measurements.  

Again, we recommend you take multiple measurements, for mobile and desktop experiences separately. Your results could look something like: 

Once you have your measurements tabulated, its now time to compare numbers! 

Step 3: Compare the Web Vital Scores 

Comparing the tables of numbers you should have by now will give you a good idea of the performance impact, which for the vast majority of Clarity users is too small to measure in such high level tests. We also recommend you go through the diagnostic information, to verify that Clarity is not showing up as a top level recommendation. Your performance related recommendations could look like this: 

You should not find Clarity or any of its resources showing up in your recommendations. If your website is very well-optimized (hats off to you), it may show up as a recommendation with minimal impact. In either of these cases, this confirms that Clarity’s scripts are not slowing your page load. 

While have been hard at work here at Clarity to ensure our scripts play nice with every website, framework and browser combination we have been able to find, its still possible that there are cases when Clarity will have a measurable impact on page performance. If you have reason to suspect that this may be true for your website, please contact us through email support@clarity.ms, with as many details as you can gather, so our devs can investigate and resolve the issues.  

• Instagram
• Twitter
• TikTok

Have you ever wondered how your site stacks up to others in your industry? Are you ever curious about the average stats across the web? Measuring site performance is crucial for improving your business, but it’s often hard to contextualize what that site performance means -when is good actually “good enough”? How is your site doing competitively… and what investments should you be making?

Introducing Clarity Website Benchmarks – Beta

Clarity Website Benchmarks -Beta is our new interactive tool to answer these questions for you. Get a clear picture of the user behavior and trends across the web. And slice it by site category to see how your website stacks up comparatively.

There are three main ways to use this public report:

1. See metrics across the general web.

Gauge the average traffic distribution (browser, OS, etc) and average behavioral metrics (rage clicks, quick backs) across the web. Go to the Clarity Website Benchmarks page and scroll down to view these numbers.

2. See metrics for a certain site category

View the same metrics, but filtered to a specific site category. If you’re an e-commerce website, for example, you may find it helpful to apply the “Shopping” filter. This will show you the average traffic distribution and behavioral metrics across sites that are also classified as e-commerce.

3. Compare two site category metrics

Add a second site category and compare the average stats for two separate site categories. If you’re curious how e-commerce sites and game sites might differ, applying “Shopping” and “Games” filters will show you a side-by-side view of the average stats for each.

Where does Clarity get this data from?

This report aggregates data from billions of anonymous Clarity user sessions worldwide. The metrics we surface in the report are the same metrics we provide for Clarity users via our Clarity product dashboard.

What does “Beta” mean?

We released this tool as a Beta version (i.e., an early release before the tool is officially shipped) because we are continuing to improve the quality and coverage of the data. We welcome your feedback as you use this report -let us know what you like and what additional capabilities you would like to see!

How can I start seeing these benchmark stats?

It’s easy! Clarity Website Benchmarks – Beta is publicly available and updates regularly. Visit Clarity website benchmarks (microsoft.com) to start viewing!

For more details about our Website Benchmarks – Beta, visit our FAQs and documentation.

• Twitter
• Instagram
• TikTok