Core Web Vitals: A guide for content producers

As of June 2021, Google has begun to include Core Web Vitals as ranking factors in Google search, with the aim for these signals to be fully integrated into the ranking systems in August.

Core Web Vitals will impact not only developers and SEO agencies, but also content creators. Here’s a guide to what Google’s Core Web Vitals update is about, how to pass the test, and the SEO techniques content creators need to apply.

What are Core Web Vitals?

Core Web Vitals are an extension of Google’s established page experience signals, which determine how positive or negative the user experience is for a specific web page.

With the introduction of Core Web Vitals, Google aims to measure the real-world user experience for the loading performance, interactivity, and visual stability of a page. Google believes that optimizing for Core Web Vitals will make doing things online easier and more ‘delightful’ for users, and that these optimizations will also help propel success for online businesses.

What will Core Web Vitals mean for Content Producers?

The inclusion of Core Web Vitals as ranking factors will likely have ramifications for content producers, as the ranking of their webpages in Google search could be affected if their site fails to meet Google targets.

It is not enough to have optimized written content that meets Google Evaluator Guidelines; for web pages to rank well on Google, now user experience needs to be top of mind. Sites may still rank well with high quality content and below-average page experience, but to truly maximize results, both high quality content and page experience are necessary.

How are Core Web Vitals measured?

Core Web Vitals are comprised of three new performance measures: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Largest Contentful Paint: Loading

LCP measures perceived load speed and marks the point during page load when a page’s main content has likely loaded. The aim is to have a fast LCP, measured in seconds, so that the page can be useful to the reader, fast.

First Input Delay: Interactivity

FID measures load responsiveness and quantifies the experience users have when trying to interact with pages. The aim is for a low FID, measured in milliseconds, to ensure the page is working as expected.

Cumulative Layout Shift: Visual Stability

CLS measures visual stability to understand how often there are unexpected changes or shifts to the layout of a page, for example from adverts or images. The aim is for a low CLS score.

Core Web Vitals Targets

Each Core Web Vitals metric has an associated target threshold, which categorizes performance as either Good, Needs Improvement, or Poor. A page or site passes the Core Web Vitals assessment if the 75th percentiles of real user experience for all three metrics are classified as ‘good’. Otherwise, the page or site does not pass Core Web Vitals.

Optimizing Content for Search and Core Web Vitals

It is necessary to focus on user experience first when creating content and laying it out on the page. If a page is not optimized for user experience, this can have a detrimental effect on its performance in Google. Lower rankings on Google can result in fewer visits to your site, and therefore fewer conversions or sales.

What can you do to optimize your visual content? To start with, you can ensure that all visuals on your site enhance user experience, that you publish visual assets in the most efficient file formats available, and that you keep them as light as possible.

You can optimize visual content for Core Web Vitals with visual in the following ways:

1. Optimize what appears above the fold

For webpages, the content ‘above the fold’ appears on a user’s screen without any scrolling. To achieve a fast Largest Contentful Paint (LCP), the time taken to load the largest element above the fold becomes more important. On many web pages, this is often an image. From a Core Web Vitals perspective, it is good to keep content above the fold as light as possible.

With this in mind, consider if carousels or other image-heavy content types are necessary to convey your message and from a user perspective. When implementing, if possible ensure images and key content above the fold are early in the critical rendering path. You could also defer any CSS or JS not used for above-the-fold content if this opportunity is available to you.

2. Focus on images

When it comes to images – think about content, size, format, and loading time:

• Ensure image and video elements are optimized and sized appropriately, and that they have width and height attributes, if the CMS allows.
• Keep colors to a minimum without reducing image quality and save images in RGB color mode.
• Where possible, use latest-generation image formats like WebP for browsers that support them.
• Use responsive images so that those sized appropriately for the user’s viewport are downloaded.
• If available, use lazy loading for weighty content, like images, below the fold. This allows these page elements to load as users scroll.
• If possible, ensure images and key content above the fold are early in the critical rendering path.
• Don’t use ads, embeds, or iframes without dimensions.

3. Keep it simple

Keep page features limited to those that are really necessary. Complexity delays page loading, rendering, and interactivity.

Optimize fonts. Or better still, use browser-supported fonts.

4. Don’t forget the layout

Avoid scenarios in which new content is inserted dynamically above existing content, unless it is displayed in response to a user interaction. This ensures any layout shifts that occur are expected and not added to the CLS (visual stability) score.

5. Optimize video content

For video, apply the same basic principles as for static images – focus on size and format:

• Keep video file size in mind when creating assets, e.g. limiting video length.
• Keep animated GIF files as light as possible; upload animated images as video files as opposed to GIF files.
• When embedding YouTube videos, the use of a façade is a standard and sensible way to go, particularly for mobile. An intersection observer means that if the video is placed outside the viewport, the player will only load after a user begins to scroll.
• It is also a good idea to reduce JavaScript; assess how much unused JavaScript is involved when embedding videos from a third party.

Would you like to know more?

Kantar’s Digital Content team can produce high quality written and visual content, that is both compelling and optimized for Core Web Vitals.

Kantar’s Site Speed Practice can help by auditing site performance to determine how websites, and those of their competitors, measure up to Google’s new targets, segmented by market and device. We can also provide best practice guidance on how to optimize for Core Web Vitals.