What are Core Web Vitals?
Core web vitals are a set of page experience criteria that will be part of Google’s ranking algorithm starting in June 2021.
The main components are:
Largest Contentful Paint (LCP)
Does your largest content load within 2.5 seconds?
First Input Delay (FID)
When a user interacts with your site, does the browser react almost instantly?
Cumulative Layout Shift (CLS)
Does your content shift as the page loads or as users scroll?
How do I test my site's Core Web Vitals score?
Google Search Console will alert you to any URLs that are not passing any of the metrics.
You can test specific URLs in Google’s Page Speed Insights Tool
The "Lab Results" only test the first screen view, so they don't paint a full picture. However, the "Origin Summary" measures Core Web Vitals just as your reader (and Google) would experience it.
You can also try this Chrome Extension.
Can ads affect Core Web Vitals?
The dynamic nature of programmatic ads can affect the CLS portion of that score. Ads come in different shapes and sizes, and as they load or refresh, they can cause your content to shift.
How can I fix ad-related CLS and Optimize my Ads for Core Web Vitals?
Just make a few simple settings adjustments to take ad-related CLS out of the equation
Settings > Ad Settings > Optimize for Core Web Vitals
Optimize Ads for CLS (for Non-Trellis sites*)
This setting places a gray placeholder around all in-content ads to reserve the largest space for them to refresh. That way your content does not shift when new ads appear.
When ads refresh, the new creative will only display when it's fully loaded.
Optimize Sticky Sidebar CLS (for Non-Trellis sites*)
This setting may not be right for everyone, and it requires the script wrapper to make some CSS changes to the theme in order to work (ie removing "overflow: hidden").
In some cases, this can cause other issues with the theme, so make sure to thoroughly check your site after enabling this setting and reach out if you have any issues. In certain situations, we can make small tweaks that can make it work for your site, and in others, there are conflicts with the theme itself that you'd need to work with your theme developer to resolve.
* For Trellis sites running ≥0.13.1, the CLS settings are controlled in your Trellis Settings in the MVP tab. The settings there override the CLS settings in your Dashboard.
Optimize Ads for Mobile and Desktop PageSpeed
These settings prioritize your content within the first screen view, which speeds up your load time and can help with LCP and FID.
Note: On desktop, it removes all ads above the fold, so if you enable it, make sure to reach out to firstname.lastname@example.org so we can double-check your sidebar ad placements.
Next, enable a few PSA campaigns
Since we don't fill at 100%, the CLS placeholder boxes can be empty if there is no ad to fill them. PSA campaigns backfill unused inventory so there is always a creative to display while also highlighting great causes.
Does this fix ALL of my Core Web Vitals and CLS issues?
No. These settings will only solve for ad-related impacts to your Core Web Vitals scores. However, we have a ton of great resources to help you prepare!