As Google continues to grow and evolve, user experience becomes increasingly important. Recently, Google announced that in May 2021, the Core Web Vitals will contribute to the page experience ranking signals. Traditional page experience signals include:

• HTTPS
• Mobile-Friendly Website
• Safe Browsing
• No Intrusive interstitials

While these are great foundational components for positive user experiences, they do not provide information about a website’s speed, responsiveness, and visual stability. That is where the Core Web Vitals come into play.

What are the Core Web Vitals?

As mentioned above, the Core Web Vitals are a way for Google to essentially score the performance and user experience of your website. There are three scores that define these vitals:

Largest Contentful Paint (LCP): This is the loading component that defines how long it takes for a website’s main content to load. Keep in mind, this number is separate from your overall page speed score as this does not score how fast the entire page loads. LCP essentially tells you how long a user will have to see a blank screen before your important page elements load.

First Input Delay (FID): This score shows how long a user has to wait before the site becomes interactive. How long does a user have to wait until they can click on a menu item or login into their account?

Cumulative Layout Shift (CLS): This score is all about stability. CLS measures the amount of unexpected layout shift of visual page content. Do your page elements move while the page loads? If items on your page are shifting, it could lead to a user clicking on the wrong link or not being able to find a certain element on the page.

The important thing to remember with the Core Web Vitals is they can help ensure that your users are getting the best experience possible when they come to your site. Websites with excellent user experience are not only more likely to earn more business, but it means your users will likely return.

There are two places to obtain these scores: Google Search Console and Google Pagespeed Insights. Both tools are free and show detailed information about what negatively impacted your scores so that you know what exactly needs to be fixed. Now that we know what the Core Web Vitals are, how can we improve our scores?

Largest Contentful Paint (LCP)

Because this score pertains to how long it takes main elements to load, the elements on your site that impact this score include images, videos, and code elements. Typically, the biggest contributor to poor LCP scores is images because high-res images take longer to load. In addition to optimizing your high-res images, other steps you can take to improve this score are:

• Review any third-party scripts that aren’t needed. These can really impact your overall page load speeds in addition to your LCP score.
• Review for any instances of render-blocking JavaScript and CSS to see any code that needs to be adjusted or optimized.
• Consider lazy loading. Instead of having all images load at the same time, images will only load when a user has scrolled to its position on the web page.

There are several other methods and steps to take in order to improve this score. A good baseline that Google has provided: sites should strive to have the Largest Contentful Paint occur within the first 2.5 seconds.

First Input Delay (FID)

After elements on your page have loaded, are users able to interact with them? Responsiveness and interactivity are just as important as visuals when it comes to providing a positive first impression to new users. Therefore, Google scores how quickly users are able to interact with elements on the page such as link clicks, expanding accordion menus, button clicks, and more.

If these elements load but are not clickable, you can imagine how the user would react. In most cases, these types of experiences cause users to navigate elsewhere. JavaScript is what impacts this score the most, so if your FID score is poor, review your code and adjust according to test results. For this score, Google states: sites should strive to have a First Input Delay of fewer than 100 milliseconds.

Cumulative Layout Shift

Have you ever visited a site where a few seconds after the page has loaded, the elements all of a sudden shift? If so, you can remember how frustrating it is. CLS measures visual stability which is vital for user experience. What adjustments can you make to improve your CLS score?

One of the best methods is to utilize size attributes on creative content such as images and videos. The browser will know exactly how much space these elements need which will prevent any unexpected adjustments. What score should you aim for? The goal is to achieve a CLS score of less than 0.1.

Are you looking to improve your Core Web Vitals? For any guidance or testing, contact Anvil today! Our team of experts will not only help to determine what needs fixing, but we can provide all the instructions and steps needed to resolve any issues.