Core Web Vitals

In this post you will learn some actionable items how to improve your metrics.

Let's dive into it.

What are Core Vitals?

Core Web Vitals are three indicators that measure and score user's experience when loading your webpage. Google has stated Core Web Vitals as a ranking factor and that is why you should be concerned. You can check your Core Web Vitals here https://pagespeed.web.dev or https://webpagetest.org

These metrics score how quickly page content loads, how quickly a browser loading a webpage can respond to a user's input, and how unstable the content is as it loads in the browser.

3 Indicators:

Largest Contentful Paint (LCP)

The point in which a page’s main content has loaded. So, a large image or a YouTube video, text block or a background video can influence your LCP.

First Input Delay (FID)

It measures the metric load responsiveness. So, it measures when the user first can interact with the page. The user might see a visual button but can't interact with it until all JavaScript is loaded for example.

Cumulative Layout Shift (CLS)

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

The largest burst is the session window with the maximum cumulative score of all layout shifts within that window. Watch example here

Source: Google

So why did I ditch Tactful UCX?

Tactful is a Enterprise Scale Customer Experience Platform where I was using the AI-Powered Customer Support to enhance the customer experience on our site (not this one). When you load a Bot onto your site your are dependend on the connection to the external server and it's repsonse time if it is slow it will impact your Render Blocking Time and Time To Interactive. By removing those I improved my overall score on the sites so I became GREEN which indicate good numbers 🙂

I tried to delay JS for the Bot but wasn't successful but I will tweak the sites so I can use it again.

Here are a list of items you should focus on:

Enable caching of your pages. Use a cache plugin like LiteSpeed or W3 Total Cache
Defer JavaScript. You can use a PlugIn like Autoptimize.
Compress images by using a service like shortPixel or go there manual an compress the images.
Convert images to wepb. All browsers support this format today or use a plugin called MediaConvert.
If you have images above the fold you can preload these.
If you have YouTube videos above the fold consider having an image and then lazy load the iframe
Use a service like NitroPack which take care of all above for you and have a CDN in additon.
Use Simple Local Avatars Plugin

Conclusion:

When you are dependent on external sources check their influence on your sites performance and tweak the settings so you minimize the influence on your scores. Look out for my guide how to fine tune your Core Web Vitals which is work in progress. See the image below the details for this post, yes each post and page on your site has it own score, but you can optimize site wide. There is a score for both your mobile which is the most important and for desktop.