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.
Add Clarity to your site today!
Use our insights and analytics to wow your website visitors!
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.