Images and Cumulative Layout Shift (CLS) on Flarum

MikeJones

I have recently been researching SEO and optimizing my content to gain search traffic for my flarum.

Recently while on the Google Search Console I saw this new warning about my flarum: CLS issue: more than 0.1 (mobile)

I have never heard of CLS so I clicked the learn more box.

Essentially CLS is:

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

I am pretty certain my issue with CLS is all the image heavy posts on my flarum. I was thinking Lazy load could be a solution but I would think that would still shift the content down as images loaded?

Any thoughts on how to fix this?

Pollux

MikeJones

Is it feasable to assume a constant height of your images? If yes, you could assign that height to your images via CSS:

.Post-body p img { height: 500 px ]

Similar approach to other embedded media.

MikeJones

Pollux unfortunately no. I have a mix of vertical and horizontal image's...

hrvoje_hr

I have this issue in my Flarum too.