Avoid large layout shift

Hi there,

For the SVG being flagged:

The SVG in question doesn't have a width and height attribute. This isn't something the theme controls, unfortunately. You'll have to ask Scriptless Social Sharing support on what's their best practice on adding attributes to their icons.

As for the other things:

Some parts are suffering from FOUT.

Let's try adding font display swap for your Google Fonts.

Add this PHP snippet:

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

I can’t figure out what’s causing these shifts. I think I’ve already disabled lazyload for my logo header image in WP Rocket. Any idea what else I can do? Thank you.

Try disabling lazyload for images that are showing above the fold like the featured image and your photo in the About me section within the sidebar.

I tried adding the PHP snippet and created social sharing buttons using this (https://www.wplogout.com/create-social-sharing-buttons-in-generatepress-without-plugin/) rather than Scriptless Social Sharing.

Also disabled featured image and disabled lazy load my photo in the About me section.

The layout shift has improved on mobile but still has the following:

Element
CLS Contribution
Since we plan to reach financial independence via dividends and ETF investing a…

I think the main issue here is that your stylesheets have some attributes being added to them: https://www.screencast.com/t/sqNMttgNYcWQ

Maybe it's rocket loader? Cloudflare?

You'll want to disable that functionality, as it's loading the HTML of the page before the CSS is loading, which will result in layout shifts.

I'm not using rocket loader via Cloudflare. The only cache program I have is WP Rocket. How would that force HTML to load before CSS? Any suggestions on how I might be able to figure out what's causing this? Thank you.

Hi there,

its coming from the WP Rocket Optimized CSS delivery - see this article here - it shows that those attributes are adding when that function is enabled:

https://docs.wp-rocket.me/article/1266-optimize-css-delivery#is-it-working

Make sure optimized css is disabled.

Ahh that resolved the issue. Thank you!

You're welcome