Google officially announced the Core Web Vitals update to the digital world on its blog in May 2020. A couple of months later, the search engine giant confirmed that Core Web Vitals will become direct Google ranking signals from May 2021 onwards.

With less than a month to go, it’s not surprising that webmasters (who have not yet done so) are scrambling to understand what this update is and how it can affect their rankings. This article will discuss in detail why you should be ready and how you can prepare your website for the Core Web Vitals update.

As part of their initial announcement, Google cited studies performed by Chrome developers that demonstrate a correlation between Core Web Vitals and user experience. Their studies revealed that site visitors were 24 percent less likely to prematurely close pages that meet Google’s thresholds for Core Web Vitals.

They also examined news and shopping sites, which rely heavily on traffic and task completion, and observed similar statistics: 22% less abandonment for news sites and 24% less abandonment for shopping sites.

They concluded the announcement by reiterating the importance of “providing a smooth journey for users” by effectively increasing traffic. They also share their vision of webmasters using the Web Vitals metrics and thresholds to transform their websites in order to provide “fast, interruption-free journeys” to more users.

Just to be clear: Google has been emphasizing the value of user experience optimization for many years now — way before news of this algorithm update. However, in May, the Core Web Vitals will officially be used as quantifiable ranking signals for an overall page experience score.

After all, websites have become too complicated! Since the World Wide Web was born, software bloat has creeped in unchecked, with developers and designers adding countless new features, embedding a wide variety of media, and tons of other things on what eventually became extremely complex webpages. Cookie-tracking and user metric analyses (which often require running Javascript) for marketing and analytics purposes compounded the problem.

All of these serve as a recipe for the perfect online disaster: websites that take forever to load, require a handful of resources to function, and — ultimately — make users unhappy.

The Core Web Vitals update from Google hopes to change that.

Enhancing user experience (UX) is at the core of the Google Core Web Vitals update. By preparing your website for this update, you help Google maintain its credibility as a search engine that lists the most relevant results at the top — and, of course, you’re likely to achieve better conversion with delighted users.

To prepare for this update, you need to know exactly what things are covered by this algorithm change.

Google Core Web Vitals refers to a set of three metrics that indicate user experience on your website: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). LCP is related to the loading speed, FID is tied to interactivity, and CLS signals visual stability. All together, they can make or break user experience (UX).

Let’s go through these Google ranking signals in greater detail:

1. Largest Contentful Paint (LCP)

   This refers to page loading performance. It reports the time it takes to render the largest content element visible in the viewport, which is usually an image or a video. This means that the main image on your page should load as quickly as possible. Webmasters should aim to have an LCP that’s no higher than 2.5 seconds. Anything that takes more than 4 seconds requires fixing.

   

   source:https://support.google.com/webmasters/answer/9205520?hl=en

2. First Input Delay (FID)

   FID refers to how long it takes for the browser to respond after a user interacts with your page. For example, when a user clicks a button to sign up for your mailing list, your website should have triggered the corresponding response in 100 milliseconds or less. If it’s longer than that, you have some work to do.

3. Cumulative Layout Shift (CLS)

   The last metric, CLS, is unlike LCP and FID, which have both been used for quite some time now. CLS measures how much your page layout shifts during the loading process. Based on the scenario written by the Google team, you don’t want a user to accidentally confirm a purchase when they actually wanted to press the Cancel button right beside it — just because the page layout suddenly moved. Webmasters should aim for a CLS of zero to up to 0.1.

While focusing on these three key performance metrics, it’s also important to look at the bigger picture: Google’s Core Web Vitals update in 2021 wants webmasters to zero in on page experience as a whole. These three metrics, after all, are just part of the much larger page experience, which is understandably what truly serves as a main factor in page ranking.

Google stated that they’re “combining the signals derived from Core Web Vitals with [its] existing Search signals for page experience, including mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines, to provide a holistic picture of page experience,” as shown by their diagram below.

source: Google Webmaster Central Blog

The seven elements are:

• Core Web Vitals: Satisfactory scores in LCP, FID, and CS, which examine the visual loading, interactivity, and visual stability of a page, respectively.

• Mobile-Friendliness: The ease in using and exploring a site on mobile devices, which includes readability of content and whether links and other on-page elements are both accessible and clickable.

• Safe Browsing:The absence of malware, phishing, and hacked content.

• HTTPS: Good connection security, with the site being served over HTTPS.

• Non-Intrusive Interstitials: No obstructions of important on-page content while users are browsing.

Since the elements of Core Web Vitals account for a number of Google’s ranking signals, failing to optimize for those are bound to affect your website’s ranking. Naturally, with a poor UX (as evidenced by poor numbers in the three metrics), site users would be unlikely to continue browsing nor return to your website.

Besides affecting search rankings, Google will use Core Web Vitals to rank Top Stories. This is big news for news portals, which should definitely know how to (and really) prepare for the Core Web Vitals update unless they’re willing to see a huge drop in their site traffic.

In addition, this update involves removing Accelerated Mobile Pages (AMP) as a requirement to be placed in the Top Stories — which is good news for many webmasters. After the update, pages should meet the minimum requirements of Core Web Vitals to qualify for placement in Top Stories.

Compliance with this impending Google update ushers in the promise of having more user-friendly websites online. This would be a win for everyone: users win because they get to do what they need to do online easily and delightfully, thanks to pages that load quickly, buttons that respond rapidly, and page assets that remain where they should be.

Your website, too, wins because users who visit your site would be happy, and this improves your Google search ranking, your branding, and your conversion rate. Lastly, Google is definitely going to be happy when users are happy with the sites that it puts at the top of its search results.

While Google didn’t quantify just how much each of the three Google Core Vitals factors affect a site’s ranking, the vast majority of SEO professionals believe that they would be quite significant.

Christian Alvizuris, an SEO analyst from Disney predicted that “this update will be really big. For a lot of websites, this will mean completely changing the way their templates are coded and how their resources are rendered.

There could be a positive impact for non-AMP websites that are well optimized. Showing up in Google’s Top Stories can help publishers command more SERP real estate when they may have previously struggled. News publishers who’ve benefited from using AMP can probably expect to see a lot more competition after the update.”

Justin McKinney, Head of SEO for Wpromote, pointed out that it’s unlikely that Google would give webmasters one year of notice about “a change that won’t have a major impact”. He also thinks that the most authoritative websites will be “relatively unaffected, [but] there should be a lot of movement beyond the top tier authority sites.”

FOX’s SEO team believes that ignoring this update and, consequently, getting a significant drop in SERP visibility is just not worth the risk. The team also noted that the majority of SEO traffic across their domains come from the “Top Stories” carousel, which they don’t want to risk losing.

With all of its benefits, it makes absolute sense that webmasters need to know how to prepare for the Core Web Vitals update. Here are our top 5 tips for making sure that your website makes the cut:

1. Know Your Current Stats

   It’s important to know where your website currently stands, and the best source is none other than Google. Just input your site’s URL in Google Search Console’s Core Web Vitals report kit to know how your site is doing.

   Another option is using Google Page Speed Insights, which reports these very same metrics as well as provides diagnostics. Lastly, you can take the Google Mobile-Friendly Test; if your page passes this, it’s likely to do well in the others, too.

   Take note if your page’s metrics are classified as good, needs improvement, or poor — then plan accordingly.

2. Reduce Your Site’s LCP

   To recap, LCP refers to the page load speed: how long it takes for the largest block of content to load on a page. This refers to the “physically biggest content on the user’s screen,” not biggest in file size. Google pays attention to the size in terms of a rectangular frame around the content block.

   The types of content to consider are limited to images, videos, and block-level texts. Videos normally take longer than images, and texts take the least time.

   For images, their scaled-down size is the one taken into account, but scaled-up images are considered based on their original size. The same goes with video frames. Meanwhile, text is considered constant, based on its font size, headerne taken into account, but scaled-up images are considered based on their original siz tags, and so on.

   Slow loading is usually due to these factors (and fixing these are the obvious solutions):

   • - Using a slow server.

   • - Having too much JavaScript and CSS blocking the render time.

   • - Taking a long time fetching the resources.

   Hence, webmasters should get a good web host and use web design that is not very ‘busy’. You can also use size loading optimizer plugins for media-rich content.

   Another technique you can try is preloading key resources, which means instructing the browser to fetch the LCP element and above-the-fold content.

   To check what a page’s LCP element is, just inspect the page in Chrome DevTools and it will be displayed in the waterfall chart in the Performance tab. Once you’ve determined the LCP element, use the Performance tab in Chrome DevTools to watch how quickly it loads.

   Make sure to choose Screenshots and start profiling the page as it loads. When done, hover over the load chart at the top to see a screenshot of the page as it was loading so you can visualize how quickly the different page elements loaded.

   Also, consider deferring non-critical JavaScript and CSS. Minimize your 400 errors and optimize 301 redirects. Load thumbnail previews of videos rather than full videos. Lastly, lessen the resources in every page (aim for less than 50).

3. Decrease Your Site’s FID

   To lessen the waiting time between human actions and browser responses, take a look at long tasks. These refer to pieces of JavaScript code that block the main thread for a significant period of time, which results in the page freezing and becoming unresponsive.

   In Chrome DevTools, look for long tasks at the top of the waterfall chart under the Main tab, which are marked by a red triangle. Click one and go to the Bottom-Up tab to see the different activities that happened as part of that task, like compiling and parsing scripts.

   Fixing such long tasks usually involves splitting code and serving scripts in shorter chunks.

4. Minimize Your Site’s CLS

   Using the Chrome DevTools screenshots feature in the Performance tab, webmasters can check if a banner, for instance, does not have an allocated space to load into. This can cause problems when a user clicks it.

   Luckily, Cumulative Layout Shift is quite easy to fix: Just specify the dimensions (width and height) for every image and video element on the page. Doing so tells the browser software to reserve space for that block of content so it doesn’t push other elements around as it loads.

5. Use Google’s Optimization Tools

   Last but not the least, use the resources Google provided to optimize your pages. After all, they know what works for their own system best. Maximize the Web Vitals tools, such as Search Console, PageSpeed Insights, Chrome DevTools, Lighthouse, Chrome UX report, and the new Web Vitals Chrome extension.