I hope you enjoy reading this blog post.
If you want my team to just do your marketing for you, click here.
Junior Teudjio | Founder @LiftedWP

Core Web Vitals: How To Improve Your Site’s Experience In 2022

core-web-vitals

As of May 2021, core web vitals became a search ranking factor. What does this mean for your business? As a marketer and developer, although content still remains king, the user experience (UX) of your web pages will become a top SEO ranking metric. It’s therefore important to optimize both existing and new websites for user experience. What this means is that your website’s user experience becomes a determining factor for your rankings.

You might ask, “why core web vitals?” A page that offers a better user experience gets more priority in Google search results. Regardless of the quality of your content, Google rewards faster and more responsive sites.

What Are Core Web Vitals?

Core web vitals are page experience indicators that assess the quality of a website’s user experience (UX). These indicators show how quickly visitors will be able to interact with your website and the type of outcome they will receive. They also indicate how simple it is for users to navigate the website. Simply put, core web vitals are signals Google uses to assess the user experience of a page on your site. 

According to Google, Core Web Vitals is “A set of real-world, user-centered metrics that quantify key aspects of the user experience. It measures dimensions of web usability such as load time, interactivity, and the stability of content as it loads.”

Core Web Vitals measure how long it takes a user to get to your page, how easy it is for them to interact with it, and how easy it is to become frustrated due to inconsistencies in its design. These metrics are designed to evaluate the user experience of your site. 

  • Is it loading?
  • Can I interact?
  • Is it visually stable?

All these questions affect your user experience. 

Why Are Core Web Vitals important?

Google has made core web vitals an important and official Google ranking factor. As you already know, page experience, along with mobile-friendliness, interstitials, safe browsing and HTTPS has been important user experience factors. With Google’s latest addition, core web vitals will account for the greater part of your page experience score. Below are 3 core benefits of CWV:

  • Conversion Rate – Page load time affects visitors; if your site loads in 1.2 seconds, you’ve lost 30% of your visitors
  • Google Organic Ranking – A bad CWV score will affect your SEO
  • Ads Costs – Low CWV score means high ad costs

Core Web Vitals Metrics 

There are three Core Web Vitals metrics – Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) and First Input Delay (FID). Each of these metrics is explained in detail below. 

Largest Contentful Paint (LCP) 

The LCP assesses the load speed of a page. It measures how fast and how long it takes for an image or text to load to become visible within the viewport. 

LCP measures how fast the large images, videos, animations and text among others can load and appear on a website. The following are checked in an LCP analysis:

  • Image
  • Images inside vector graphics 
  • Block-level elements with texts
  • Video thumbnail 
  • Elements with background images 

Pages, where LCP is completed within the first 2.5 seconds of the page load, are considered good (green). Pages that exceed 4.0 seconds are considered poor (red).

core-web-vitals

LCP Analysis tool

However easy LCP might sound, you have to make sure you’re using the right tools. 

  • The DevTools Lighthouse panel is available in Chromium-based browsers such as Chrome, Edge, Brave, Opera, and Vivaldi. 
  • The DevTools Performance panel also displays an LCP indicator. To start, click the circular Record icon, reload your page, then click the Stop button to view the report. Click the LCP icon in the Timings section to identify the element and view a summary of statistics.
  • Also, the Chrome User Experience Report allows you to query real usage statistics across different countries, connections, and devices, for a specific URL.
  • The web-vitals JavaScript library – 1kb script calculates LCP metrics for real users on your live site.

Causes Of Low LCP 

The server response could be slow because it’s overloaded. 

  • Render-blocking CSS and JavaScript can delay page loading if they’re referenced in the HTML above the primary content.
  • Large images and videos 
  • Page content generated on the client rather than the server also takes longer to appear

How To Improve LCP

  • Ensure download speeds remain fast
  • Activate server compression and HTTP/2+
  • Can the browser cache files effectively?
  • Optimize your images 
  • Minimize third-party requests
  • Load required web fonts only
  • Remove unused JavaScript and CSS files
  • Concatenate and minify your JavaScript and CSS files

First Input Delay (FID)

The second core web vital metric is the First Input Delay (FID). This takes into account the first time a visitor visits your page. It measures how responsive and how fast a website’s browser can provide the result for users. The goal is to assess the response time of a page when a user interacts with it for the first time. The FID metric is calculated between the user interaction and the browser providing their result.

How quickly does a page respond to a user’s action such as clicking, tapping, and scrolling?

A low FID means that the page is responsive, resulting in a positive initial impression. However, a high FID results in unresponsive pages and frustration. Pages with an FID time of 100 milliseconds or less are considered good (green). Pages exceeding 300 milliseconds are considered poor (red) 

Why is First Input Delay (FID) Important?

As a marketer, it’s important to understand the importance of FID. Since core web vitals has become a search engine ranking factor, continuous frustrations when interacting with your site will affect your SEO. If your website doesn’t respond on time when a user interacts with it, he or she is likely to get frustrated and never return. Your goal is to reduce the frustration as doing so will improve user experience.

Causes Of Poor FID

  • Significant quantities of render-blocking CSS and JavaScript, which halt page loading as the code is downloaded and parsed
  • Large, process-intensive scripts that run immediately when the page loads
  • Long-running or poorly optimized JavaScript tasks

How To Improve The FID score

The following tips will help improve your FID score:

  • Generate and cache as much static HTML content on the server as possible
  • Ensure the browser can cache files effectively
  • Adopt progressive enhancement techniques
  • Remove unused JavaScript and CSS files
  • Concatenate and minify your JavaScript and CSS files
  • Minimize third-party JavaScript requests for analytics, social media widgets, discussion forums, etc

Cumulative Layout Shift 

The third metric is the Cumulative Layout Shift (CLS). As a metric, the CLS ensures that a website’s pages are void of confusing and sudden movements that might disrupt users from consuming the content. The CLS assesses visual stability and quantifies the amount of unexpected layout shift of visible page content.

CLS measures the page’s visual stability. Pages with a CLS score of 0.1 or less are considered good (green) and pages that exceed 0.25 are considered poor (red).

CLS Analysis Tools

CLS metrics are calculated using the DevTools Lighthouse panel, PageSpeed Insights, and web.dev Measure tools. The Web Vitals extension for Google Chrome also shows the CLS metric.

The Chrome User Experience Report also allows you to show CLS statistics recorded across different countries, connections, and devices for a specific URL.

The web-vitals JavaScript library can also calculate CLS metrics for real users on your live site.

Causes Of Low CLS

Low CLS are caused by slow loading pages: 

  • Space on the page is not reserved for images, iframes, advertisements, etc.
  • Content is dynamically injected into the DOM, typically after a network request for advertisements, social media widgets, etc.
  • Web font loading causes a noticeable Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT).

How To Improve Low CLS 

The following tips will help improve a poor CLS

  • Add width and height attributes to HTML and tags
  • Ensure images and other assets appearing toward the top of the page are requested early
  • Avoid inserting elements toward the top of the page unless it responds to a user action such as a click
  • Minimize web font usage, and consider using available OS fonts when possible
  • Use CSS transform and opacity for more efficient animations that don’t incur a re-layout

Understanding Your Core Web Vitals Score

Core Web Vitals are specific factors in your webpage’s overall user experience that Google considers important — and ultimately affect your search rank. These factors are then used to create your Core Web Vitals Score and it’s this score that Google uses to rank your site.

Your site’s LCP, FID, and CLS scores are based on the last 28 days of real user metrics collected anonymously through the Chrome browser. These differ due to the user’s device, connection, and other simultaneous activities.

First Contentful Paint (FCP)

Although core web vitals pay attention to three major metrics – LCP, FID and CLS, there’s another metric worth talking about. The First Contentful Paint (FCP) checks the time from when a page starts loading to when any part of the page’s viewable content is shown on the screen.

This metric is important because it influences the other core web vitals. What this means is that until the FCP has occurred, the other Core Web Vitals can’t be measured. Improving the FCP will directly impact other core web vital scores.

Core Web Vitals Ranking Factor 

There have been some concerns about Google’s Core Web Vitals metric. Google’s John Mueller confirmed the importance of core web vitals as a ranking factor. 

Previously, links and keywords were primarily considered as ranking factors. A website with plenty of links ranked high on search engine result pages.

According to John Mueller, “relevance is still by far much more important. So just because your website is faster with regards to Core Web Vitals than some competitors doesn’t necessarily mean that …you will jump to position number one in the search results.”

Despite Google’s Core Web Vitals, people still doubt the power of it as a ranking factor. Google published a document that explains how CWV works here.

5 Tips To Improve Your Core Web Vitals In 2022

With Google placing user experience above other ranking factors, it’s important you understand how to optimize your site. To improve your overall core web vitals score, you need to be able to get the information across to the user on time.

Below you’ll find some tips on how to optimize your site to improve your Core Web Vitals Score. You can run some tests using tools like Google search console and page speed insights.

Implement lazy loading

Lazy loading ensures images are loaded at the same time users scroll down through the page. In the long run, this improves your site’s SEO, reduces bounce rate and improves your site’s performance. 

Reduce JavaScript (JS) execution

A low FID score indicates your page interacts with users over 300 milliseconds. If that’s the case, you should consider reducing and optimizing your JS execution; reducing the time between your browser execution JS code and page.

Optimize and compress images

Compressing your images not only increases your loading time but it also improves your rankings and LCP score. You can use an image compression tool like tiny jpg.

Provide proper dimensions for images and embeds

It’s important you use the right dimensions to improve core web vitals score. You need to use the right width and height for each image, ad or embeds.

Improve your server response time

There’s a direct correlation between server response and page load time. If the server response is fast, it’ll improve the page load time and user experience. 

How LiftedWP Can Help

With core web vitals rolled out, it’s important you optimize both new and existing web pages to increase your rankings. You can use the tools mentioned above to help you get started. 

If you need expert advice on core web vitals and how to improve your user experience, you can book a free consultation with us today.

Similar Posts

Leave a Reply

Your email address will not be published.