Core Web Vitals: What are they and how to improve them

Google’s Core Web Vitals are a measurement of your website’s user experience and are critical in today’s SEO strategy. So much so, that we’d prioritize this work over nearly all other key SEO tactics as this will affect rankings and conversion rates.

Two key ways to check your website Core Web Vitals are:

Google Search Console will show you an over time view of for each of your 6 Core Web Vital factors and how you’ve worked on them overtime.

Pagespeed Insights will show you your 28 day rolling score from actual users while also showing your scores at the time of the test.

1. Speed Index: measures how quickly the visual content of a page is visible.
2. First Input Delay (FID): measures the time from when a user first interacts with a page (i.e. clicks a link or button) to the time when the browser is able to respond to that interaction.
3. Largest Contentful Paint (LCP): measures loading performance by recording the time it takes for the largest image or text block within the viewport to appear.
4. Cumulative Layout Shift (CLS): measures the visual stability of a page by recording the movement of visual elements within the viewport.
5. Time to Interactive (TTI): measures the time from when the page starts loading to when it is fully interactive.
6. Total Blocking Time (TBT): measures the total amount of time that the main thread of the browser is blocked during a page load.

1. Reduce page load time: One of the most important factors in optimizing a website for core web vitals is reducing the page load time. This can be achieved by minifying and compressing resources, using a content delivery network (CDN), and reducing the number of requests made by the page.
2. Improve visual stability: Another important factor in optimizing a website for core web vitals is improving the visual stability of the page. This can be achieved by reducing the use of large, high-resolution images and videos, as well as using more efficient code to render elements on the page.
3. Ensure a smooth user experience: To ensure a smooth user experience, it is important to make sure that the website is responsive, meaning that it adapts to different screen sizes and resolutions. This can be achieved by using a responsive design framework, such as Bootstrap or Foundation.
4. Use Lazy loading: Lazy loading is a technique that allows a website to load only the resources that are necessary for the user to see the page. This reduces the number of requests made by the page, and can help to improve the page load time and visual stability of the website.
5. Optimize images: Another key factor in optimizing a website for core web vitals is optimizing images. This can be achieved by compressing images, using next-gen file formats like WebP, and using responsive images that adjust to different screen sizes and resolutions.
6. Utilize browser caching: Browser caching can be used to store resources such as images, CSS and JavaScript files on the user’s device. This means that the resources do not need to be loaded again when the user navigates to the page, which reduces the page load time and improves the visual stability of the website.
7. Use of preloading or prefetching: Preloading or prefetching is a technique that allows a website to load resources before they are needed. This can help to improve the page load time and visual stability of the website, as resources are loaded in advance and are ready to be used when needed.
8. Use of web worker: A web worker is a JavaScript script that runs in the background, separate from the main thread. This can help to improve the page load time and visual stability of the website, as it allows for the execution of complex tasks without freezing the main thread.
9. Monitor your website’s performance: Regularly monitoring your website’s performance is important in order to identify any issues and make necessary improvements. Use tools such as Google’s PageSpeed Insights, Lighthouse, and WebPageTest to analyze the website’s performance and identify areas for improvement.
10. Keep your website up-to-date: Make sure that you keep your website up-to-date with the latest technologies, as this can help to improve the website’s performance and optimize it for core web vitals.

Fixing issues with First Input Delay (FID)

There are several ways to improve First Input Delay (FID) on a website:

1. Minimize the amount of JavaScript that runs on the main thread: Large scripts can block the main thread, causing delays in responding to user input.
2. Defer non-critical JavaScript: Use the “defer” attribute to load scripts that are not necessary for the initial render of the page after the page has finished loading.
3. Break up long tasks: Break up long-running scripts into smaller chunks that can be run in parallel, rather than sequentially.
4. Optimize your code: Use performance profiling tools to identify and fix bottlenecks in your code.
5. Reduce the time to first byte (TTFB): TTFB is the time it takes for the browser to receive the first byte of the response from the server. If TTFB is high, it can indicate a slow server or poor network conditions.
6. Use a Content Delivery Network (CDN) : CDNs can help reduce the time it takes for a browser to receive the first byte of a response by caching your content in multiple locations around the world.
7. Remove unnecessary third-party scripts, these scripts can add up and cause delays.
8. Use code-splitting to load only the javascript that is needed for that particular view or route.
9. Consider using a framework or library that provides a more performant way of handling user interactions.

It’s important to note that, fixing FID issues depends on the specific implementation of the website and the cause of the delay, so it’s essential to analyze the specific problem and apply the right solution.