With the "Core Web Vitals" becoming a larger factor in Google's ranking algorithm in May 2021, we're seeing more questions around this topic. I'd recommend watching the Core Web Vitals for Publishers webinar for an overview.
This information page will receive ongoing updates.
We recommend reading the web.dev/cls page to get a better understanding of the subject. CLS is only impacted by layout shifts currently in view, not ones that happen off-screen.
We have no control over ads and our only advice is to pester your ad tech company to fix this.
Third party resources
Third party resources (such as newsletters) are another source of CLS issues. These are not theme related.
Customers facing image CLS issues typically have a third-party CDN in place, such as Smush or Jetpack. We don't recommend or support CDNs.
At this point, we don't believe CDNs are necessary for starting a site or achieving competitive pagespeed scores. New sites should not bother with this.
For larger sites with revenue, Cloudflare appears to work fine, but you'll need to hire nerdpress for support with this.
WP Rocket recently released an update (v.3.8, December 9, 2020) that adds dimensions to images that are missing them. We recommend enabling this setting in Settings > WP Rocket > Media > Image Dimensions:
This technically applies to any custom, non-system font, regardless of whether it comes from Google or is purchased from a third party and self-hosted.
The theme's implementation of Google Fonts comes from a time when CLS was not a concern. As recently as 2019, the only concern was adding display:swap; to the fonts, but this causes the old font to be swapped with the new font after rendering.
If the old font and new font don't have exactly the same letter sizing and line-height, text can be re-arranged on screen by the browser, and cause a layout shift.
Some fonts are worse than others. There is no comprehensive list of this, and we believe that fonts will be updated over the next few years to better address this.
Browser developers are just now starting development on a solution known as Font Metrics Override Descriptors but this is far from being finalized, or widely supported, and will require manual work by developers to fix on a font-by-font basis. We don't consider this a viable solution for the foreseeable future.
This is an issue with the entire web, and is not specific to your site, Feast themes, or any particular framework.
Our recommendation to solve font-based CLS is simply to remove Google Fonts.
Note: using other font swap properties can have a negative impact on LCP.
On a personal note, I find it ridiculous that Google's display:swap; solution to fixing it's own Google Fonts issue in its own Chrome Browser conflicts with its own requirement to fix CLS in its own search engine. It's the progenitor and potential fixer of its own issues. I've spent hours looking into this over the years and it is a complex, technical issue, but not something that "blog" operators should have to be burdened with.
We've since created a brand new Modern Mobile Menu that fixes CLS issues caused by this, plus CLS issues caused by header/logo images, and potentially further improving pagespeed by removing third-party newsletter embed codes.
Origin Summary vs. Lab Data
In the Pagespeed Insights tool, you'll see two sections with scores: origin summary, and lab data.
Origin Summary is comprised of 30 days of real world data from Google Chrome and is affected by everything as the user scrolls, but ads are the biggest offender here. Any changes you make will take at least 30 days to affect this. Note that origin summary is site-wide and not specific to this page, so you'll need to test a variety of posts plus the homepage and category pages.
Lab data is the result of the simulated test you just ran on this one page, and will vary from test-to-test, and is most reflective of your theme's above-the-fold configuration. But not entirely. This is affected by a huge number of non-theme things, including how busy your server is, the cache status, traffic and delays across the web, Google's hardware, inconsistent content (eg. content that only shows sometimes, like ads).
We believe there's currently a bug in Pagespeed Insights that renders a high CLS issue (generally around 0.7) without there being one.
This is being monitored.
Mobile vs. Desktop
CLS issues on mobile only affected mobile ranking, and CLS issues on desktop only affect desktop ranking. Because mobile makes up approximately 80% of pageviews, its our primary concern.
The simplest way to address CLS (that we have control over) is to remove Google Fonts and implement the Modern Mobile Menu.
Ads are a problem that needs to be resolved on the ad-tech end.