Core Web Vitals

The core web vitals form a set of metrics that directly measures the impact your website's loading speed, interactivity, and visual stability have on the user experience, engagement, and search engine rankings.

There are three core web vitals:

1. Largest Content Paint (LCP): measures loading performance.
2. First Input Delay (FID): measures interactivity.
3. Cumulative Layout Shift (CLS): measures visual stability (highly impacted).

Largest Content Paint

LCP measures the loading speed of the largest element on a webpage. It is important because it directly impacts perceived page speed and user engagement.

Google recommends an LCP of less than 2.5 seconds for a good user experience.

Optimize LCP with Taplytics

Out of the box, the Taplytics SDK optimizes for LCP performance by:

• Providing the JS SDK as a web application bundle or via a content delivery network (CDN), which is used to improve loading performance, reliability, and resilience against cyber attacks.
• Loads asynchronously with a built-in method that will allow for the SDK to load synchronously and prevent content flickering.

LCP can be further optimized:

• Use asynchronous loading for non-critical JavaScript.
• Optimize critical CSS to prioritize rendering of above-the-fold content.
• Avoid using large, slow-loading fonts.
• Reduce the size of the SDK and network requests by loading only the necessary experiments.

First Input Delay

FID measures the time between a user's first interaction with a webpage and the response of the page. It is important because it directly impacts perceived interactivity and user engagement.

Google recommends an FID of less than 100 milliseconds for a good user experience.

Optimize FID with Taplytics

To improve the FID of your website, try:

• Reducing the amount of Javscript executed during page load by removing unnecessary or redundant code.
• Minimizing the amount of Javascript and CSS needed to render the page.
• Removing any unused JS from your project once you are done with it.

Cumulative Layout Shift (CLS)

CLS measures the amount of unexpected layout shifts on a webpage. As such, CLS plays a vital role when dealing with visual edits that directly impact perceived visual stability and user engagement.

Google recommends a CLS score of less than 0.1 for a good user experience.

Optimize CLS with Taplytics

The Taplytics JavaScript SDK can impact CLS by changing the layout of the webpage after it has loaded. Therefore, it's especially important to review experiments that do not negatively impact the CLS below the recommended threshold of 0.1.

To improve the CLS of your website, try:

• Design experiments on elements below the fold. These are elements that are not initially visible that need to be scrolled into view.
• Use CSS over JS to apply a specific treatment if possible, as CSS is generally faster than JS.
• Set dimensions for all content that needs to be loaded, such as images, ads, embeds, and videos.
• Load web fonts with fallback options to avoid layout shifts caused by font loading.
• Implement responsive design into experiments to ensure that elements on the page remain stable when viewed on different screen sizes.
• Use vanilla Javascipt when injecting Javascript.
• Replace elements in variations of similar size to minimize layout shifts.

Conclusion

Core Web Vitals are crucial for ensuring a fast and responsive experience for your users on your website or application. When using any integration, such as the Taplytics JS SDK, it's important to consider the impact it will have on the core web vitals.

By implementing the optimization techniques discussed, we can improve the core web vitals of your website or application to provide a better experience for your users.