A common source of slowdowns that negatively impact websites are unoptimized third-party or first party scripts. For that reason, if you are currently considering Clarity or if you are a long-time Clarity user, you may be wondering: will Clarity slow down my website?
The Clarity team measures the performance impact of Clarity js across all the domains that uses Clarity and monitors to ensure performance impact is minimized. Our internal benchmarks show that for the vast majority of Clarity users, Clarity has no measurable impact on page load time. Below we will walk you through how to measure the impact of Clarity on your website’s performance.
What are Core Web Vitals and why are they important?
Core Web Vitals are a set of metrics introduced by Google to measure the quality of user experience on a webpage. They focus on three key aspects:
Largest Contentful Paint (LCP): Measures loading performance. It tracks how long it takes for the largest content element (like an image or text block) to become visible within the viewport. A good LCP score is 2.5 seconds or less
Interaction to Next Paint (INP): Assesses interactivity. It measures the time from when a user first interacts with a page (like clicking a button) to the time when the page responds. A good INP score is 200 milliseconds or less1
Cumulative Layout Shift (CLS): Evaluates visual stability. It measures how much the page layout shifts unexpectedly during loading. A good CLS score is 0.1 or less
These metrics are important because they directly impact user experience. Pages that load quickly, respond promptly to user interactions, and remain visually stable are more likely to keep users engaged. Additionally, Google uses Core Web Vitals as part of its ranking algorithm, meaning that better scores can improve your site’s visibility in search results
What is INP?
INP is a metric that assesses a page’s overall responsiveness to user interactions by observing the latency of all clicks, taps, and keyboard interactions that occur throughout the lifespan of a user’s visit to a page. The final INP value is the longest interaction observed, ignoring outliers. A low INP score indicates that the page consistently responds quickly to user interactions, enhancing the overall user experience.
Why is INP important?
This metric is particularly important for several reasons:
User Experience: blogs often feature rich media content like high-resolution images, videos, and interactive elements. A fast INP ensures that users can interact with these elements smoothly, enhancing their overall experience on the site.
Engagement: A responsive website encourages users to stay longer and explore more content. For bloggers, this means readers are more likely to browse through content, watch videos, and engage with blog posts, which can lead to higher engagement rates.
SEO Benefits: Search engines like Google consider web performance metrics, including INP, when ranking websites. A better INP can improve a blog’s search engine ranking, making it more visible to potential readers
Monetization: Many bloggers monetize their content through ads, affiliate links, and sponsored posts. A faster, more responsive site can lead to higher ad impressions and click-through rates, boosting revenue.
Brand Reputation: A well-performing website reflects positively on the blogger’s brand. It shows professionalism and attention to detail, which can help build trust and loyalty among readers.
By focusing on improving INP, bloggers can create a more enjoyable and efficient experience for their audience, ultimately benefiting their blog’s success and growth.
How does Clarity minimize impact on web vitals?
From its inception, Clarity was engineered to have minimal impact on website performance. Today it is trusted by millions of websites to track their analytics, and performance is taken very seriously by our users. To deliver on our minimal impact guarantees, Clarity leverages:
- Optimized bundle sizes
- CDNs, caches and high-performance servers
- Intelligent DOM crawling
- Continuous monitoring of Clarity’s web vitals impact on each individual website using performance focused flighting
The Clarity team measures the performance impact of Clarity js across all the domains that uses Clarity.
How to verify that Clarity does not affect Core Web vitals?
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. some of the most popular ones 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 to begin benchmarking.
Step 1: Create Baseline Measurement
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, it’s 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.
Conclusion
Microsoft Clarity helps minimize impact on web vitals by providing insights into user behavior through features like heatmaps, session recordings, and user engagement metrics. These tools allow developers to identify and address issues that cause delays in user interactions, such as long tasks or inefficient code, thereby improving the page’s responsiveness.
No team and/or product is perfect. If you have reason to suspect that Clarity is slowing down performance for your website, please contact us via email at clarityms@microsoft.com, with as many details as you can gather, so our devs can investigate and resolve the issues.