Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

How Core Web Vitals Improve Your SEO in 2021

Parent Feed: 

Google keeps changing their algorithms and the importance of ranking factors that impact your website’s or webpages score in terms of how they rank on search engine result pages - and now they introduced Core Web Vitals as a key ranking factor.

Ranking higher on search engines is an ongoing effort to ensure that your website has the best possible chance to attract the highest amount of traffic and relevant visitors.

What Are Core Web Vitals and Why Do They Matter?

Google announced that it would prioritize user experience when it comes to assessing the ranking of each webpage in particular and overall ranking score. They refer to the new approach to ranking as Page Experience signals.

Page Experience signals includes 2 subsets of signals: Core Web Vitals and Search Signals.

While Search Signals focus on mobile friendliness, security, safe browsing, and non-intrusive UX components of a website, Core Web Vitals are a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page.

Source: Google Search Central

Page Experience is a set of signals that measure how users perceive the experience of interacting with a web page.

The metrics that Core Web Vitals include are:

  1. Large Contentful Paint (LCP) which measure a website's loading performance,
  2. First Input Delay (FID) which measures interactivity, and,
  3. Cumulative Layout Shift (CLS) which measures the visual stability of the website.


How To Rank Higher with Core Web Vitals?

Ranking higher on search engines means you have to optimize your website based on the performance reports of the aforementioned Core Web Vital metrics. Let's break them down one by one:

Large Contentful Paint (LCP)

According to Google's best practices, your website must load the most meaningful piece of content on each webpage for the user within the first 2.5 seconds.

The precursor to LCP as a metric was First Contentful Paint (FCP) which measured how long it took the website to load the first feature on any webpage visible in the user's viewport.

However, after careful analysis of actual user behavior - Google realized that the user doesn't really care about the "First" webpage feature which very likely could be the website logo. Rather, the focus shifted to LCP because Google determined that the most relevant feature to the user would be also the largest on any webpage.

The elements being considered when measuring any webpage's LCP score include:

  • elements
  • elements inside an element
  • An element with a background image loaded via the url() function
  • Block-level elements containing text nodes or other inline-level text elements children.

More webpage elements will be introduced into the mix by Google as they attempt to update and optimize the LCP measurement process.

LCP performance scores for any webpage keep updating based on the scrolling activity of the user. The largest piece of content on any webpage may very well be visible only after scrolling.

How To Improve Your Website LCP Score?

Identify the Largest Contentful Paint (LCP) element on your Drupal website by auditing the performance of your webpages with Drupal Audit. Drupal Audit utilizes Lighthouse and PageSpeed Insights tailored to Drupal websites and projects.

The most common methods that will help you improve your LCP score are:

  1. Remove any unnecessarily third-party scripts: Studies show that each third-party script slowed a page down by 34 ms.

  2. Upgrade your web host: Better hosting = faster load times overall (including LCP).

  3. Set up lazy loading:  Lazy loading makes it so images only load when someone scrolls down your page.

  4. Remove large page elements: Google PageSpeed Insights will tell you if your page has an element that’s slowing down your page’s LCP.

  5. Minify your CSS: Bulky CSS can significantly delay LCP times.

First Input Delay (FID)

Measures the interactivity and responsiveness of your website during load.

FID focuses only on input events from discrete actions like clicks, taps, and key presses. Scrolling and zooming don't count towards measurement of your webpage FID score.

FID only measures the "delay" in event processing.


Why "First" Input Delay in Particular?

Because it's the website visitor's first impression of your website and the biggest interactivity issues we see on the web today occur during page load. 


When Is First Input Delay (FID) Important?

Blogs and content heavy websites don’t need to worry about FID because interactions are limited.

However, FID is massively important for websites that rely upon conversion (i.e. newsletter sign up, account information form, logging-in, etc.) 

How soon do you think users will begin attempting to fill in the sign-in form in the screenshot below?

Source: Reddit

If for example I attempt to fill-in the username field before the whole page loads, the FID score will be how long it took for the field to respond to my request while the page loads.

According to Google, the ideal delay would be no more than 100ms.

Website visitors aren't typically patient until the whole page loads and will commence clicking on various features on your website before loading is complete.


How To Improve Your Website FID Score?

You can gain insight into how your Drupal website performs when it comes to First Input Delay (FID) by using Drupal Audit. The usual suspects impacting FID in any website are:

  1. Minimize (or defer) JavaScript:  It’s almost impossible for users to interact with a page while the browser is loading up JS. So minimizing or deferring JS on your page is key for FID.
  2. Remove any non-critical third-party scripts:  Just like with FCP and LCP, third-party scripts (like Google Analytics, heatmaps etc.) can negatively impact FID.
  3. Use a browser cache: This helps load content on your page faster. Which helps your user’s browser blast through JS loading tasks even faster.

Important: Testing FID needs to be contextual and requires a real user because results may vary based on each user's behavior.

Cumulative Layout Shift (CLS)

Is your website layout stable or doesn't keep shifting during webpage loading?

CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

A layout shift occurs any time a visible element, such as an image or Call-To-Action button, changes its position from one rendered frame to the next.

Why CLS Is Important?

Frequent visitors will be used to a standard and norm when navigating and interacting with your website; if elements on your webpages move around as the page loads - this will cause frustration and possibly unwelcome consequences.

Users shouldn’t have to re-learn where links, images and fields are located when the page is fully loaded. Or click on something by mistake.

Imagine you wanted to click on a link next to the "Checkout" button on an e-commerce website and ended up making a purchase unintentionally because the button suddenly shifted its place.

Based on Google's metrics for CLS scoring, your website overall CLS score should not go above 0.1.

How To Improve Your Website CLS Score?

Conduct an assessment through Drupal Audit for your Drupal website to identify how to improve your CLS score for each webpage.

  1. Use set size attribute dimensions for any media (video, images, GIFs, infographics etc.): That way, the user’s browser knows exactly how much space that element will take up on that page. And won’t change it on the fly as the page fully loads.
  2. Make sure ads elements have a reserved space: Otherwise they can suddenly appear on the page, pushing content down, up or to the side.
  3. Add new UI elements below the fold: That way, they don’t push content down that the user “expects” to stay where it is.


Core Web Vitals and SEO in 2021

Google is prioritizing the end user's needs first when it comes to indexing the best possible search results, so Core Web Vitals and Page Experience are here to stay. This will force website development and design agencies rethink their project delivery and website owners to actually become user-centric.

  • Eliminate Silos: Agencies that design and develop new websites will need to eliminate the siloed mentality and work closer than ever to create the optimal UX (code and design) that delivers the actual experience that the website's end user demands.
  • Product Thinking: Websites are dead. Digital Experiences are the future. Much like the human body, a website has vital signs that must be monitored, gauged, and optimized on. Think of your website much like how you develop a product - remaining static is not an option if you are looking to grow.
  • Comprehensive QA: Don't just focus on typical bugs and errors. Implement comprehensive and qualitative testing scenarios for your website's UX.

Despite the fact that hundreds of ranking factors are considered when Google determines ranking each website; the above Core Web Vital signals will contribute 45% towards how high your website ranks effective May 2021.

You should begin optimizing your website's Core Web Vitals sooner, rather than later, to avoid being hit with penalties relevant to poor user experience factors.

The main tools to rely upon when assessing your website's Core Web Vitals performance are: Drupal Audit (Tailored to Drupal Websites and Projects),  Chrome User Experience ReportPageSpeed InsightsSearch Console (Core Web Vitals report)web-vitals JavaScript libraryChrome DevToolsLighthouse, and WebPageTest.

Download SEO Guide

On-Site SEO Guide 2020

Identify all the best practices you need to implement in order to ensure that your website is optimized for search engines!

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web