Cumulative layout shift

[waverly]

For every screen other than the narrow mobile screen (like 480px wide) I align photos left or right.  To prevent a very small amount of text being displayed on the narrow screen alongside the aligned photo, i have used the following fix:

.blog.is-phone .wvrx-posts .alignleft {float:none !important;margin-left:auto !important;margin-right:auto !important;}

.single.is-phone .alignleft, .blog.is-phone .wvrx-posts .alignleft {float:none !important;margin-left:auto !important;margin-right:auto !important;}

.single.is-phone .alignright, .blog.is-phone .wvrx-posts .alignright {float:none !important;margin-left:auto !important;margin-right:auto !important;}

 

It works great, but apparently creates layout shift problems.

Ideas?

[User]

Can you please provide a site URL for checking?

Regards!

 

[waverly]

FEATURED POSTS

 

[scrambler]

I am not sure I follow.

In the page you gave us, I do not see any layout shift when reducing the browser to phone size.

I also do not see your rule being applied to anything.

So you may want to elaborate

[waverly]

I don’t see the layout shift either, but Google apparently does.  As it only seems to occupy a fraction of a second, it is unlikely to be visible to the naked eye.

[User]

@Area33

Using Lighthouse to test the site:

Mobile:
Cumulative Layout Shift = 0.101

Their main culprit with 0.037 is:

The Hunt For Jessie September 9 October 2022 RECIPES FOR LOVE AND MURDER – Sea…
<div class="atw-content-2-col atw-cf">

Desktop:
Cumulative Layout Shift = 0.365

Their culprit with 0.325 is:

FEATURED POSTS TV Spinoffs – One Real, Three Imagined 21 December 2023 Set in …
< div id="container" class="container container-page relative font-inherit">

For details see:
https://pagespeed.web.dev/analysis/https-areathirtythree-com-blog/kt28m6zpa8?form_factor=mobile

Hope this helps where to look, as it seems to be the containers, not just the contents.

Regards!

[Weaver]

@area33

You have some sort of “optimizer” that is moving the loading of Weaver’s (and other plugins) CSS to the end, which is almost certainly the cause of the shift as the layout is being built using some default CSS values which then get overridden when the real style CSS is finally loaded.

[Author]

Posts