Core Web Vitals and Google Algorithm

Google has a long history of algorithm updates that focus on improving the user-friendliness of websites.

In 2010 Google announced Page Speed Score as a significant ranking factor and in 2018 followed up with the page speed ranking factor in the mobile search results. According to this update, site owners can find their page speed score report from PageSpeed Insights – a Google tool. This tool provides page speed reports and actionable insights for both mobile and desktop. Users could adopt the necessary changes suggested in the report to boost their page ranking.

In 2020, Google announced that a new ranking algorithm is designed to analyze web pages with a special focus on user experience. This update, known as Google Page Experience, comes up with a new set of metrics, known as Core Web Vitals.

What is Page Experience?

Page experience is a set of signals Google evaluates to perceive the user experience of a specific webpage. The page experience signals consist of the Google search ranking factors, including the Mobile-friendly update, Page Speed Update, the HTTPS ranking boost. These refinements come under what Google announces as Core Web Vitals. The Page Experience Reports provide valuable metrics to evaluate the site performance, and users can gain insights on the challenges and how to tackle them for better ranking.

Google Page Experience Update 2021

The update says that all websites would need to optimize their Core Web Vitals. As a page experience update, it will factor your website’s user experience to influence its position on Google search. Failure to optimize the Core Web Vitals will result in a drop in Click-through Rates (CTR). As such, websites will get fewer visitors and minimal orders. 

In essence, Core Web Vitals will influence your SEO rank on Google. Google will factor the Core Web Vitals of your website to determine its position on the Search Engine Ranking Page (SERP). If you haven’t optimized the Core Web vitals, be prepared to lose visitors, orders, revenue, and profits.

What Are Core Web Vitals?

Core Web Vitals are the fundamental reference points to decide the user experience on a webpage. Core Web Vitals have become page ranking signals alongside mobile friendliness and website security. The metrics within Core Web Vitals measure visual load, visual stability, and interactivity. 

Core Web Vitals are part of the new page experience update from Google. These are also part of the new page ranking signals, alongside mobile friendliness and website security. Core Web Vitals will help Google distinguish between sub-par websites and those that offer quality user experience. 

All the metrics, together, tell Google how well a webpage behaves. The score against each metric will reveal the state of your website. If these metrics are left unoptimized, it is quite likely that your website will send the wrong signals to Google. Thus, it will be forced to demote your website in search results. 

Components of Core Web Vitals

Core Web Vitals comprises three metrics, Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID). Each metric indicates the user experience on a webpage, the page load time, and the overall usability of the page. All three are part of the new page experience update. 

Largest Contentful Paint (LCP) – The time it takes for the largest element to load on the page. It could be an image, an H1 heading, or anything else. If you can reduce the Largest Contentful Paint (LCP) time, there is a good chance of improving the user experience. An ideal LCP score is 2.5 seconds or less.

Cumulative Layout Shift (CLS) – Cumulative Layout Shift (CLS) score considers the visual stability of the page. If the content in the viewport of a user shifts and they end up clicking on the wrong element, it will create resentment. This kind of page behavior can escalate bounce rates. An ideal CLS score is less than 0.1. 

First Input Delay (FID) – After a user interacts with a web page, any delay in responding to that input is called First Input Delay (FID). Due to the main thread being in a busy state, it couldn’t free up event handlers to respond to the input. Had the main thread been in an idle state, it would have responded sooner. An ideal FID score is less than 100 ms.

Why Are Core Web Vitals Important?

Core Web Vitals are pivotal because they reveal how your website performs for the users. It tells Google how users will perceive the website when they interact with it. It focuses not only on fast page loads but also on usability.

The above statistic further reinforces the importance of optimizing Core Web Vitals. Even faster page loads with poor interactivity can cost you conversions in the long run. But, improving the Core Web Vitals will enhance your website on a holistic level. 

Why? Because Core Web Vitals focuses on speed as much as it focuses on usability. The performance of a website takes into account load, speed and interactivity. User Experience is just as necessary to rank pages on Google SERP. The June 2021 update will factor page experience as well. 

Core Web Vitals as a page experience update will improve user experiences on the web. The Core Web Vital metrics will also influence a site’s ranking. Thus, they end up becoming page ranking signals as well. These metrics will help business owners and web developers deliver more delightful user experiences at the end of the day.

User Experience – A faster load of the largest content element on a page or a quicker response from the site to a user input will improve visitors’ perception of your website. Even fewer content shifts on the page enhance their interaction and cause lesser unwarranted clicks. As such, any improvement to the Core Web Vitals will elevate user experience. 

SEO Ranking – Since Google factors Core Web Vitals to determine your page ranking, any optimization to the Core Web Vitals will improve your website’s ranking on Google. If your website loads sooner and renders content pieces fast, you expect your website to climb higher in search results due to a higher page speed. 

Conversions – If the user experience depletes, the users on your site will not want to stay for longer. The bounce rates would rise, and this will affect your conversions. Slow speeds and delayed responses put off visitors, and they abandon your website. Thus, the sales come down.

Revenue – If the sales were down, your business doesn’t stand to make a whole lot of money. With low sales, expect your revenue and profits to deplete. The sheer dependence on conversions means your business takes a toll. In the long term, your business could fail and collapse. 

How to Measure Core Web Vitals?

You can use field tools and lab tools to determine the values for various metrics within Core Web Vitals and you need to focus on each page. Don’t worry, it is not rocket science!

1) PageSpeed Insights –  PageSpeed Insights analyzes the content of a page on your website. It’ll then generate recommendations to optimize that page and make it faster. Enter the URL of your website to evaluate its overall performance. You can also run a Lighthouse test in PageSpeed Insights. 

2) Lighthouse – Lighthouse is an open-source tool for optimizing and elevating the quality of web pages. Site owners can run Lighthouse in Chrome DevTools from the audit tab. You can also run the test from the command line. Enter a URL in the Lighthouse tool. It’ll run a series of audits against the page, and  generate a report on how well the page did.

3) Chrome User Experience Report – The Chrome User Experience Report (Chrome UX Report) provides real-world user experience scores. As such, you get the best insight about all the website metrics and that too from a user’s experience. Get data on First Content, CLS, FID, LCP, Time to first byte and much more. 

4) Web.dev – Enter the URL and gain valuable insights about the website. Web.dev reveals information about each Core Web Vitals metric and more. Web.dev uses Lighthouse to audit your web pages. Run a test, review what matters, and get improvement tips. 

5) Google Search Console – Use the search console to identify pages across your site that require any improvement, based on real-world experience data. The search console helps to generate a Core Web Vitals report. The report will feature all the Core Web Vitals metrics: LCP, FID, and CLS. 

6) JavaScript – Website owners can even measure Core Web Vitals in JavaScript using  web APIs. Use the web-vitals JavaScript library, to measure each metric within Core Web Vitals. 

Lab Tools Vs. Field Tools

Core Web Vitals can be measured using lab tools. Lab tools are the best way to test the performance of a page during development. Users are yet to interact with the website during this stage. As such, you can detect any performance issues in this stage. The lab tools load the page in a simulated environment. 

In some instances, you cannot get a reliable score for a metric from a lab tool. As such, you may have to rely on field tools to generate the best score. The score obtained through a lab tool goes far off from what users experience on a web page. For instance, CLS values from lab tools on a page may be less than the actual user experience scores. 

The real-world CLS scores are more indicative and educative. The field tool value will give you a better insight into the website’s ability to render a quality user experience. As such, owners must obtain scores from both lab and field tools to get a comprehensive picture of their website.

How to Improve the Core Web Vitals Scores?

Largest Contentful Paint (LCP) – It would help if you lowered the render time of the largest element in the viewport. The LCP element for a page may vary as the viewport changes. Website owners looking to optimize Largest Contentful Paint (LCP) will need to focus on the following areas.

1) Improve the efficiency of your server. Route users to the nearest Content Delivery Network. Establish strategic caching to prevent downloading of critical elements when users revisit a page. Serve static resources from the browser instead of relying on the network. 

2) Defer any non-critical JavaScript and CSS files. These elements often block and delay Largest Contentful Paint. Minify, defer, or inline any CSS content. Also, make sure to remove any unused CSS. Minify and compress JavaScript files. Also, defer any unused JavaScript. 

3) Optimize and compress visual elements like hero images, carousels, and banners.  Prioritize and preload pivotal resources such as fonts and above-the-fold content. Even more so on slow network connections. Deliver assets based on the network connection and user’s device.

Cumulative Layout Shift (CLS) – You need to reduce the unexpected movement or shifts of elements on a webpage. Detect which element causes the most unexpected layout shift.Once done, either minimize these shifts or figure out ways to reserve adequate space, so the shifts are not so unexpected. You need to implement the following measures:

1) Mention image dimensions to ensure enough space gets reserved prior to loading. Set the “width” and “height” of images and videos. This helps the browser to calculate the aspect ratio and allocate the right amount of space to prevent any abrupt shifts. 

2) Reserve a huge space for ads and avoid placing them on top of the viewport. Only use fluid slot size for ads and fetch fluid slots. It would lower the chance of users seeing them sooner. By the time users see the ad, they are loaded and ready.  

3) Avoid inserting dynamic content like banners, newsletter sign-ups or forms. These elements produce a considerable amount of layout shifts. Else, reserve enough space in advance, so there is no unexpected shift. Hence, the user experience won’t get affected. 

4) Server fonts hosted online will result in a download which takes time. After they download, users see a sudden shift in content. Custom fonts take a while to download and behave in the same way. Download fonts on priority or reduce the time to fetch required fonts.

First Input Delay (FID) – Reduce the delay between users interacting with an element on a webpage and the response time. Improving First Input Delay (FID) is necessary to improve user experience. If after taking an action, users have to wait longer, they’ll likely abandon the site. Take the following measures to optimize the First Input Delay (FID) score:

1) Third party scripts cause a network overload. They are useful to embed videos, social sharing buttons, and more. But, since they get served from third party servers, they block the main thread and create delays. They pull in unoptimized content and force fetching of network resources. Identify slow third-party code, audit and clean them often to load them more efficiently.

2) JavaScript that takes longer will elevate the First Input Delay time. Since, implementing, evaluating, and parsing the JavaScript files take time. Reduce the JavaScript execution by removing unused and redundant JavaScript code. Also, minify and compress the code where possible. Keep the main thread free, to allow parsing of JavaScript. 

3) Free up the tasks on the main thread. If the main thread gets occupied with a lot of work, it can’t make time for other tasks. Identify elements that occupy the main thread for long. Use Web workers to reduce the load on the main thread. Defer JavaScript and minify CSS. Avoid layout on pages, where possible. Avoid forced synchronous layouts. Also, avoid style changes and long-running input handlers.

4) Optimize your code and compress other elements on the page to reduce network requests and data transfer. Several network requests and a large transfer size affects the FID value. Use Gzip compression where possible. Optimize JavaScript, CSS and 3rd Party scripts. Optimize Uncompressed Images, check their dimensions and compression levels. Use Webp images and CDNs. Improve loading of fonts.

Conclusion – Core Web Vitals

The new page experience update in Core Web Vitals is Google’s way of separating underperforming pages from the quality ones. As per the update, any page that doesn’t meet the desired criteria will get demoted on Google’s search results. Google will consider a page’s LCP, CLS, and FID score to assess its worth. 

If they don’t meet the standards, then expect to see your competitors race past you on Google. Core Web Vitals are the new fundamentals to indicate user experience on a page. Optimizing the Core Web Vitals gives your eCommerce business a guaranteed chance of capturing desired revenue and sales targets. 

Better yet, seek a performance optimization expert who can enhance your eCommerce store’s LCP, CLS, and FID metrics. Virtina has the expertise, skills, and resources to pull off complex performance optimization tasks for your website. Our experts will improve your website’s Core Web Vitals to improve your SEO ranking, conversions, and revenue.

Frequently Asked Questions (FAQ)