Ultimate Core Web Vitals Checklist

Core Web Vitals are a set of specific metrics that Google considers important in the overall user experience of a webpage.

The three metrics that make up Core Web Vitals are Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. This subset of metrics will be part of Google’s “Page Experience” score.

In short, Core Web Vitals will be Google’s way of determining your page’s overall UX (user experience).

Your site’s Core Web Vitals data can be found under the “enhancements” section of your Google Search Console account.

If you’re looking to improve these metrics and boost your site’s SEO performance, consider working with an SEO agency that specializes in optimizing Core Web Vitals and overall user experience.

CORE WEB VITALS METRIC #1

LCP – LARGEST CONTENTFUL PAINT

LCP is about the loading performance of a website.

In other words, it’s the time it takes from clicking on a link to seeing the majority of the content on your screen.
Ideally, every page on your site should reach LCP within 2.5 seconds.

You can use Google PageSpeed Insights to check your LCP Score to improve your Core Web Vitals score. Google PageSpeed Insights provides you with a score gathered from real-world data from Chrome browser data.

HERE ARE SOME STEPS YOU CAN TAKE TO IMPROVE YOUR SITE’S LCP SCORE:

• Make sure your server is optimized properly – If your server is slow, it won’t matter how many optimizations you make to the code of your website, to your images, or to other elements of your site.
• Use a Content Delivery Network (CDN) – A modern CDN can handle most of the elements of your site faster than your typical web host can. At the very least, consider using a CDN for your images, videos, and other multimedia. You might also consider offloading stand-alone script files as well.
• Cache your website’s assets – Caching website assets is one of the most important speed and performance improvements that directly impact the Largest Contentful Paint metric.
• Ensure that full or partial HTML pages cache-first are served – Serving HTML pages cache-first allows for caching either some or all the HTML content of a web page and updating the cache only if the content changes.
• Ensure that third-party connections are established early – LCP can be significantly reduced if third-party connections are established as early as possible.
• Minify your CSS – By default, CSS is a very minimalist language and can operate perfectly well without spaces, indentation, comments, and other text making it more user-friendly and easier to develop. Remove all that excess text that has a microscopic, yet the measurable effect on your page loading speed.
• Defer non-critical CSS – Non-critical CSS is a render-blocking resource. By deferring all non-critical CSS, you can improve your LCP quite a bit, as these scripts can have a significant impact on the LCP.
• Inline Critical CSS – It is not necessary to inline all your CSS, although that would also work fine. You should inline CSS that is critical to the overall design and layout of your site.
• Consolidate CSS Files and Code – Consolidate your CSS, whether it’s inline or in separate files, and only execute specific elements, as necessary.
• Optimize CSS Delivery – Traditional site design loads the framework for the site, then the content, then the CSS to format it all. This often makes a late-loading element of site code. This delays site loading significantly, especially when CSS is stored in an external file. Preloading your CSS is a strategy recommended by Google to force the browser to load the CSS and have it ready when it’s needed.
• Minify and Compress JavaScript – Like CSS, JavaScript can function perfectly well without any extra spaces and breaks. It also does not need wordy variable names, which are useful for development but can significantly increase the size of scripts.
• Consolidate Scripts and Minimize usage – Many of the functions that JavaScript is used for, have been available as features in HTML5 and CSS3 for years. If you have an older website, consider a revamp, or review your scripts to find an alternative (newer), faster ways to do the same things. Review, optimize, minimize, consolidate, and strip as much JavaScript as you can from your site.
• Defer or Async JavaScript’s Whenever Possible – Scripts slow down the rendering of a website. When a browser must render JavaScript, it must process the script before loading the rest of the page. As scripts are usually placed in headers, this can cause significant delays in page load speed. Deferring JavaScript will allow the browser to continue loading the page before executing the script. Using Async allows both to load simultaneously. Making use of these two features will allow you to offset the delay caused by using JavaScript and speed up your initial page loads.
• Minimize unused polyfillers – Minimize unused polyfillers and optimize their use so that they are only used in the environments where they are required.
• Remove jQuery Migrate – A recent update to jQuery caused many old plugins and scripts to stop working. The Migrate module was introduced to buy some time to allow webmasters to update their sites. It acts as a translator that allows old jQuery to function on sites that utilize a newer version of jQuery. All plugins or apps using jQuery Migrate should be removed or replaced.
• Optimize and compress images – Images are one of the largest influencing factors in the core web vitals. All web vitals measure the time it takes for initial rendering. The biggest delay in page rendering is caused by loading images.
• Reduce the dimensions of background images – If you use a background image, reduce the size of that image, and optimize it so that it loads as close to instantaneously as possible.
• Remove Above The fold images on mobile – Mobile devices are especially susceptible to delays in the first input and on the content shift. To help avoid unwanted delays, try to make as much of your above-the-fold content as possible based on text and other simple elements. Large images and slideshows will have the worst impact on your score, so remove or move them as much as possible.
• Implement Lazy Loading – Lazy loading is a well-known technique for speeding up the initial load of any page. With Google’s Core Web Vitals coming, it is not surprising it is quickly becoming a default feature. WordPress even added native default lazy loading in version 5.5 late last year. Make use of lazy loading for any content, especially images, which doesn’t need to load above the fold initially.
• Use WebP images – WebP, another Google initiative, is a smaller image format with better compression algorithms than traditional image formats like PNG.
• Optimize Image File Sizes – Compress image files to be smaller in file size. Also, make sure you have defined the height and width of images to prevent layout shift.
• Preload important resources – Preloading important resources can significantly improve the LCP score of your web page.
• Compress Text Files – Compressing Text files can improve the load times of your web page and as a result, reduce the LCP score.

CORE WEB VITALS METRIC #2

FID – FIRST INPUT DELAY

First Input Delay is about the interactivity of your website.
In other words, the time it takes for a browser to respond to a user’s first interaction with your site.

You can use Google PageSpeed Insights to check your FID Score and improve your Core Web Vitals score. Google PageSpeed Insights provides you with a score gathered from real-world data from Chrome browser data.

FID is a page speed score, as it measures how long it takes for something to happen on a page. It also goes one step further, by measuring the time it takes for a user to do something on your page.

For pages that are made up of 100% content, like news articles, FID should not be a problem, as the only measurable action is scrolling down the page.

For an online shop for instance, how quickly a user can view or search a product is what matters.

HERE ARE SOME STEPS YOU CAN TAKE TO IMPROVE YOUR SITE’S FID SCORE:

• Break up long JavaScript tasks – Breaking up long JavaScript tasks into smaller asynchronous tasks can noticeably improve the First Input Delay.
• Remove any non-critical third-party scripts – As with FCP, Third-party script execution (like heatmaps, analytics tracking etc.) can have a negative impact on your site’s FID score.
• Use Browser Caching – Browser caching helps to load the content on your page faster, which helps your user’s browser process JavaScript loading even faster.
• As it is almost impossible for a user to interact with a page while JavaScript is loading, minimizing, or deferring JavaScript on your page is key for your site’s FID score.

CORE WEB VITALS METRIC #3

CLS – CUMULATIVE LAYOUT SHIFT

Cumulative Layout Shift is about how stable your website is as it loads.

In other words, do the elements on the page move around as the page is loading?

You can use Google PageSpeed Insights to check your CLS Score and improve your website’s Core Web Vitals score.

The more the elements on your site move around while the page is loading, the higher (and worse) your CLS score will be.

Your goal should be to have the elements as stable as possible while the page loads, preventing elements from shifting away from where a user is expecting it to be, or a user from clicking on something by mistake.

HERE ARE SOME STEPS YOU CAN TAKE TO IMPROVE YOUR SITE’S CLS SCORE:

• Specify size attribute dimensions for any media and embeds (YouTube videos, Google Maps) on the page. This will tell the user’s browser exactly how much space each element will take up on that page, preventing it from changing as the page fully loads.
• Preload Web Fonts – If your site does not preload web fonts, then it is likely to have layout shifts during the rendering and preloading process.

• Statically reserve space for ad slots if there are ads on your site – One of the most popular causes of layout shifts on websites is caused by ads – especially if they are dynamic.
• Add new UI elements below the fold – User Interface Elements (checkboxes, popups, etc.) should be added below the fold. That way, the content will not be pushed down by these elements causing layout shifts.

If you have checked (and improved where necessary) every item on this list, your site will be ready for the Core Web Vitals update.

If you need help getting your website on track, feel free to contact us.