Google Core Web Vitals: Cumulative Layout Shift (CLS) Issue

[Alpha1]

Google Search console reports a vital issue:
Cumulative Layout Shift (CLS)

More information here:

Cumulative Layout Shift (CLS)

This post introduces the Cumulative Layout Shift (CLS) metric and explains how to measure it

web.dev

Core Web Vitals: Google's Top 3 Metrics For Evaluating User Experience

Learn more about Core Web Vitals - the three Google page experience metrics that all websites should measure up to.

www.searchenginejournal.com

This affects mostly threads, media, articles with large images. It seems to have significant SEPR effects since the start of May.
I have noticed that this affects websites that run PixelExit styles, but this may be a complete coincidence.
Is this something that PixelExit can do anything about?

 

[Russ]

We don't insert objects like that in our styles, really nothing we do that I can think of cause shifts in layouts like this.

 

[Alpha1]

Please have a look at this discussion regarding the logo placement causing CLS:

Google's latest complaint

They just started a new metric within the Google Search Console, "Core Web Vitals". They claim I have 44,000+ poor URLs for mobile, slightly less for desktop. Here is their resource pages on the issues: https://web.dev/cls/ https://web.dev/lcp/ Funny thing it it's Google's own ads which are...

xenforo.com

 

[Russ]

I guess an easy fix for it would be to just add a min-height to the logo block (adjust to your specific logo block height using browser inspector to find the height).

@media (min-width: (@xf-responsiveMedium  + 1))
{
.p-header-logo .p-header-logo--image { height: 36px; }
}

I'm not entirely sold on having a height AND width property on the logo itself but I can look into a height version of it.


Adding the above CSS though would solve any potential issues with the page moving around. It may be worth looking into optimizing your logo if it's causing a shift in the page due to its loading so slow.