Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough

Core Web Vitals in Drupal

Parent Feed: 

In May 2021, Google will begin to recognize Page Experience as a ranking factor, prioritizing user experience in the particular and overall ranking score.

Page Experience signals include two signals: 

  • Core Web Vitals
  • Search Signals

While Search Signals focus on mobile-friendliness, security, and safe browsing, Core Web Vitals measure user experience for loading performance, interactivity, and visual stability of the page.

Core Web Vitals consist of three metrics that measure how long a site visitor has to wait until they can see the page and begin to make use of it. These are:

  • Largest Contentful Paint (LCP) – Measures when the main content is downloaded, visible, and useful to the site visitor.
  • First Input Delay – Measures how long a user has to wait for the site to react when they interact with a web page element like a link.
  • Cumulative Layout Shift – Measures how much time it takes for the content to stop shifting around and be stable enough for users to successfully interact with it.

Ranking higher on search engines means you have to optimize your website based on Core Web Vital metrics performance reports. If you’re using Drupal, the CMS has some strengths and weaknesses regarding these scores.
 

Drupal and Core Web Vitals
HTTP Archive published research on which content management system (CMS) achieved the best Core Web Vitals scores. The HTTP Archive challenge examined WordPress versus Drupal, Joomla, Squarespace, and Wix.

The top-ranked CMS for LCP is Drupal. The lowest-ranked CMS is Wix. While Drupal was the winner, the Drupal mobile LCP score was only 47%. Drupal is the winner, but only because the other CMS scores were so low.

The scores for FID were very high. Squarespace was the champion—91% of its sites passed the FID test. Drupal came in third, behind Squarespace and WordPress.

In terms of Cumulative Layout Shift (CLS),  Drupal came in first again, this time with a solid 70% of Drupal sites providing a quality CLS experience. Wix came in third place, beating WordPress.

Improving the LCP Core Web Vital in Drupal
The precursor to LCP was First Contentful Paint (FCP), which measured how long it took a website to load the first feature on any web page. The focus shifted to LCP because Google determined that the largest feature on any webpage is the most relevant.

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

What causes poor LCP?

  • Render-blocking JavaScript and CSS
  • Slow resource load time
  • Client-side rendering
  • Slow service response times

Audit your site to identify the Largest Contentful Paint (LCP) element. In your Drupal Audit, use reports like Lighthouse and PageSpeed Insights to track Core Web Vitals. The most common methods that will help you improve your LCP score are:

  • Removing any unnecessarily third-party scripts: Studies show that each third-party script slowed a page down by 34 milliseconds.
  • Upgrading your web host: Better hosting = faster load times overall (including LCP).
  • Setting up lazy loading: Lazy loading makes possible for images to load only when someone scrolls down your page.
  • Removing large page elements: Google PageSpeed Insights will tell you if your page has an element that’s slowing down your page’s LCP.
  • Minifying your CSS: Bulky CSS can significantly delay LCP times.

Improving the FID Core Web Vital in Drupal
FID focuses only on input events from discrete actions like clicks, taps, and key presses. Scrolling and zooming don't count toward the measurement of your webpage FID score. FID only measures the delay in event processing.

What causes poor FID? 

  • Long tasks
  • Long JavaScript execution time
  • Large JavaScript bundles
  • Render-blocking JavaScript

The usual suspects impacting FID in any website are:

  • Minimizing (or deferring) 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.
  • Removing any non-critical third-party scripts: Like with FCP and LCP, third-party scripts can negatively impact FID.
  • Using a browser cache: This helps load content on your page faster, helping your user’s browser blast through JS loading tasks even faster.

Improving the CLS Core Web Vital in Drupal
CLS measures all individual layout shift scores for every unexpected layout shift during the page experience. A layout shift occurs whenever a visible element, such as an image or CTA button, changes its position from one rendered frame to the next.

What causes poor CLS?

  • Images without dimensions
  • Ads, embeds, and iFrames without dimensions
  • Dynamically-injected content
  • Web fonts causing Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT)

Conduct a Drupal Audit of your website to identify how to improve your CLS score for each webpage.

  • Use fixed-size attribute dimensions for any media. 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.
  • Ensure ad elements have a reserved space. Otherwise, they can suddenly appear on the page, pushing content down, up, or to the side.
  • Add new UI elements below the fold; that way, they don’t push content down that the user expects to stay where it is.

Testing Core Web Vitals in Drupal 
There are many areas to test core web vitals on your live Drupal site. The PageSpeed Insights tool, the Chrome UX Report, and Google Search Console will generate LCP, FID, and CLS metrics based on field and lab data. These tools will come in handy when you audit your Drupal build.  

If you are in development, it might be good to keep an eye on these metrics as you build a new site. This Drupal module helps track these vitals across pages as you’re in development, so your team can address site speed issues before the site even goes live. They will come in handy during development and building. 

Core Web Vitals and SEO in 2021
When indexing search results, Google is prioritizing user experience first, so Core Web Vitals and Page Experience are going to be significantly moving forward. Website development and design agencies will need to rethink their project delivery to become user-centric. You should begin optimizing your website's Core Web Vitals sooner rather than later to avoid being hit with penalties related to poor user experience factors.
 

Author: 
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