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

Alfa1

Well-Known Member
Google Search console reports a vital issue:
Cumulative Layout Shift (CLS)

More information here:

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

Pixel Exit Staff
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.
 

Alfa1

Well-Known Member
Please have a look at this discussion regarding the logo placement causing CLS:
 

Russ

Pixel Exit Staff
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).

Code:
@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.
 
Last edited:

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.