Ramat Gan - Israel

+972 (03) 790-1700

London - United Kingdom

+44 20 8089 7891

Paris - France

+33 7 55 54 86 87

Istanbul - Turkey

+90 212 401 29 92

Time Is Running Out To Prepare for Google’s Core Web Vitals Update

Ryan Rakover, June 1, 2021

The release date of one of Google’s most important page experience updates, Core Web Vitals, has been delayed. Google will now start to roll out some elements in mid-June 2021, with more released throughout the summer months. That’s excellent news for publishers as it provides a cushion for those not yet prepared, and it seems like many fall into this category.

Publishers need to realize how users experience their websites from two different angles. The first is to clearly understand what changes they will need to make to their monetization efforts. We discussed this in-depth in a previous post.

The second way for publishers to address the new metrics is by making technical updates that will improve page speed, responsiveness, and visual stability – in other words, user experience.  A recent study from SearchMetrics found that out of two million tested sites, only four percent passed the threshold of ‘good’ while the rest had ‘needs improvement’ or ‘poor’ scores. These low numbers could be due to publishers not having enough time to prepare or not understanding the steps they need to take.

This post will explain Google’s reasoning for the update, dive into the three new signals included in the update, and explain what changes publishers need to implement to satisfy the algorithm.

 

Google’s Core Web Vitals Purpose

Google explains the Core Web Vitals update as “an initiative to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.” In plain English, it is a directive for publishers to champion user experience. For doing so, the algorithm will reward sites with increased rankings.

Core Web Vitals adds three new signals to evaluate page performance: loading, interactivity, and visual stability. Any element on a web page, be it an ad, a video, an image, or even a tracking code, can affect page performance. Publishers need to check their Core Web Vitals report to learn which areas need improvement and then take the appropriate steps by eliminating elements that slow download times or disrupt the user experience.

 

What Metrics Are Part of the Core Web Vitals Update?

Adding to the existing signals publishers are already familiar with are the three new metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Let’s dig into each one.

Largest Contentful Paint (LCP)

The LCP metric measures page load time, specifically from the instant a page starts to load until the page’s largest item loads in the viewport. Publishers can implement a wide range of optimizations depending on what aspects trigger slow load times. The load time must be 2.5 seconds or faster to achieve a ‘good’ score.

 

Elements that Affect LCP & Optimization Strategies

Heavy images, videos, and text blocks can cause a lag in load times. Slow servers, render-blocking scripts, and client-side rendering can also contribute to users waiting to see the page. 

This is what users might see.

Large hero images, slideshows, or carousels above the fold look great, but they can easily keep you out of the ‘good’ zone, especially if they include video content. Combat these issues by:

  • Eliminating background images and replace heavy slideshows with simpler elements or text-based content
  • Create variations of the same image and indicate that in the HTML code so the right image is displayed based on the user’s screen size
  • Compress text files and convert PNGs to WebPs or JPEGs
  • Preload necessary resources and cache assets

The critical rendering path is how browsers convert JavaScript, CSS, and HTML into the pixels people see on pages. To improve page speed, prioritize and control the load order of resources, and reduce files sizes by:

  • Loading critical CSS at the top of the page
  • Using Defer or Async methods to eliminate render-blocking JavaScript
  • Eliminating render-blocking CSS by delivering required CSS styles inline with HTML and
  • Only loading the CSS resources that are needed for a user’s device
  • Loading other CSS resources asynchronously

Client-side rendering is when a website request is redirected to an HTML file and a JS file to render the page through the browser. Take the following steps to speed up the process:

  • Minimize critical JavaScript
  • Use server-side rendering or pre-rendering instead

First Input Delay (FID)

FID measures interactivity and responsiveness. The metric is based on the time it takes from when a user interacts with a page to when the browser starts processing event handlers. Issues like not being able to immediately scroll down the page or needing to wait too long after clicking a button, amount to a poor user experience. To earn a ‘good’ score, the FID needs to be 100 milliseconds or less.

Users might experience this.

 

Elements that Affect FID & Optimization Strategies

A poor FID score could be related to several issues, including heavy JavaScript tasks, interstitials, pop ups, and third-party scripts for ads, plugins, and some libraries. Take the following steps to reduce latency and improve speed:

  • Break up long tasks
  • Use a web worker to process large tasks and run scripts in the background
  • Use lazy load ads which load in real-time for monetization
  • Optimize pages for interaction readiness

Cumulative Layout Shift (CLS)

CLS measures visual stability by quantifying how often the page layout shifts unexpectedly. Layout shifts affect the user experience when content or images start bouncing or shifting around the page, disrupting reading and engagement. Layout shifts can also cause spurious clicks on ads which hurt both publishers and advertisers. Publishers with a CLS of 0.1 or less will obtain a ‘good’ score.

Users will see something like this.

 

Elements that Affect CLS & Optimization Strategies

Images, ads, embeds, and iFrames that don’t have specified dimensions can trigger shifting layouts, as can dynamically injected content and web font issues. Publishers that allow ad units with different heights to be served in the same slot need to pay special attention to CLS. The best ways to improve CLS are:

  • Set image height and width attributes in the CSS
  • Reserve the largest height possible for ad slots
  • Show a placeholder if the ad slot is not filled (instead of collapsing the space)
  • Avoid placing non-sticky ads at the top of the viewport

 

Wrap Up & Key Takeaways

The three metrics described here are important and will contribute to overall ranking scores just like hundreds of other SEO metrics. During a fireside chat back in February, Google’s Public Search Liaison, Danny Sullivan, reminded listeners that in terms of the update:

“First of all, it remains one of many things. Secondly, it’s always the case that we’re going to try to return the best content based on this basket or bucket of things. So, maybe you don’t have the best page experience. But if you’re still the most relevant content, that is going [to you] know overall on various things we’re looking at.”

At the end of the day, quality content is what users are searching for, so that still trumps every other metric. However, if two sites are nearly equal in quality, those with better page experience signals will rank higher. 

Continue to produce excellent content and follow all the traditional SEO steps to optimize sites and organically increase traffic. Check your Core Web Vitals report and determine which page performance areas need improvement. Then, follow the optimization techniques we’ve mentioned above and always ensure that monetization efforts don’t come at the expense of page experience. 

To learn more about these strategies or to get help with your monetization efforts, reach out to us at publishers@totalmediasolutions.com 

 


Ryan Rakover is the head of our Trust and Safety efforts at Total Media
. One of the things Ryan enjoys the most in his role as a Publisher’s strategic partner is the challenge of bringing policy from a place of rules and standards to delivering solutions to clients to improve their client’s bottom line. Find Ryan on LinkedIn or reach him by email at ryan(at)totalmediasolutions(dot)com.