Finger on the Pulse: What Are Core Web Vitals?

There are many elements that compose Google’s EEAT score for your website. Each facet of your website is created with EEAT in mind, yet there are a few aspects that play into the experience especially that should be considered during your site refresh or new site build. Core web vitals are essential to a healthy website and if done right, ensure that Google views your site favorably when it comes time to list you in search results. 

What are Core Web Vitals?

Core web vitals are the three key metrics that Google uses to measure and evaluate the user experience (UX) of your website, with a focus on loading speed, visual stability, and responsiveness.

Each of these elements plays a part in crafting the framework of an efficient site, something that Google values highly when assessing your EEAT score. It’s so important that Google even provides a support report page to assess the state of your core web vitals.

The first letter of EEAT stands for Experience, referring to the user experience across your website, from grammar and readability to navigation. These are the aspects that are present up-front when visitors reach your website, but core web vitals are the elements that compose your website’s backend infrastructure. Failing to improve and maximize each of these elements will dock your score considerably, leading you to rank lower than the competition even if you have a higher SEO score than them. 

Curious to your websites' score? You can run a test of your own website on Google's Page Speed Insights via: https://pagespeed.web.dev/

Largest Contentful Paint (LCP)

LCP or largest contentful paint is a core web vitals metric that measures  how long it takes for the largest content element to fully render on the page, indicating perceived load speed. When you first pull up a web page, the speed at which it loads up for the viewer is the LCP. The more elements you have on a page, the longer it may take to load, especially if those elements, such as images, aren’t optimized correctly or at all. Google typically rates your LCP as good, which means the load time takes 2 seconds or less, needs improvement if it takes up to 4 seconds to load a page, or poor if a page takes 6 seconds or longer to load. 

If your webpage is failing to meet Google’s LCP criteria and loads slowly every time despite your best efforts, there are a few things you can do to try and bump your load time up:

• Avoid Lazy Loading Above the Fold: Lazing loading optimizes how images load, but if done above the fold, can lead to increased overall LCP times. 

• Reduce Bulky CSS: A bulky CSS can lead to significant delays in LCP times, so try to keep it to a minimum if possible.

• Remove Third-Party Scripts: Some unnecessary third-party scripts can slow a page down by up to 35 ms, which could be the make-or-break for your website load time.

• Remove Large Page Elements: Unnecessary images and other large features above the fold can slow down your load times immensely, so consider what is on the page and how essential it is carefully. 

• Upgrade Web Hosting: A better host can lead to faster overall load times, though it may be a bit more expensive depending on the provider. 
  

Cumulative Layout Shift (CLS)

Cumulative layout shift or CLS measures the amount of unexpected shifting and changing in the page layout that a viewer experiences, indicating visual stability. You’ve likely experienced this on other websites in the past. Images that are improperly sized will sometimes pop out of frame, popups or ads will shift the page layout as they refresh, or drop-down banners will make page navigation a nightmare because they weren’t properly tested. 

You want your page elements to be as stable as possible. If any aspect of your web page leads to frustration, such as some elements loading late and causing the visitor to click the wrong link, the viewer is less likely to stick around. Google is also less likely to recommend websites that aren’t being user-conscious. Mobile is often the crux of many CLS issues as it requires different formatting for pages, which leads to accidents in the layout. 

To improve your CLS, you can: 

• Avoid Dynamic Additions Above the Fold: Inserting a banner at the top of the page pushes everything else down when the page loads. Consider adding impactful elements like this before the fold to improve user experience. 

• Set Size Attribute Dimensions for Media: Images and videos that are set beforehand won’t change as the page loads since the user’s browser now knows exactly how much space each element takes up on the page. 

• Reserve Ad Space: If you have ads on your website, reserve sections for them to inhabit to avoid content getting pushed up, down, or to the side. 
  

Interaction to Next Paint (INP)

Lastly, we have INP, or interaction to next paint. This is the measure of latency of all clicks, taps, and keyboard interactions with the page throughout its lifespace, which indicates responsiveness. Things like clicking a button, choosing a menu option, and opening navigation menus all play into the INP score. 

Pages that are composed mostly of content, like blogs, don’t care about INP as much since there are less elements to interact with on these pages. However, places like home pages or service pages should have high INP scores as they have more elements to interact with and redirect the viewer. Ideally, you’d like your INP score to be around 200 ms or less, as anything over that takes too long to trigger and leads to a negative EEAT rating. 

You can improve your INP score through: 

• Deferring Code Executions: Long, essential browser tasks can be broken down into smaller chunks, though this may require developer help to address. 

• Minimize JavaScript: If JS is loading, users can’t interact with your page. If this is constantly getting in the way, defer or minimize it to improve interactions. 

• Remove Non-Critical Third-Party Script: Third-party scripts can take up time and impact your INP score just like your LCP score, so if they aren’t vital to the page, consider removing them. 

Creating Functional Sites for Our Clients

The importance of core web vitals shouldn’t be understated. They are the building blocks of an impactful website and should be handled with care just like the rest of your site. If you’re in the process of refreshing your website or want a new website built, an expert’s touch could be the different between a good or bad score. 

GROW Marketing Agency understands the importance of EEAT guidelines and effective website development. Our team of experts works tirelessly to craft websites that fit your image and branding while also scoring highly for core web vitals and Google’s EEAT. If you need a website that functions properly and reaches new customers, GROW has you covered.