[Resolved] Avoid large layout shifts – How to fix?

[Bob]

When I tried to run Google Page Speed for one of my posts (https://www.tawcan.com/best-canadian-dividend-stocks/), I get the warning about avoid large layout shifts.

I can’t seem to figure out what’s causing this. Any idea what might be causing this and how I could fix it?

The warning doesn’t seem to happen on other posts I’ve tested.

[Tom]

Hi there,

The main issue there seems to be your featured image.

I wonder if pre-loading it would help?:

add_action( 'wp_head', function(){
    $id = get_post_thumbnail_id();

    if ( is_single() && $id ) {
        $size = 'full';
        $img_src = wp_get_attachment_image_url( $id, $size );
        $img_srcset = wp_get_attachment_image_srcset( $id, $size );
        echo '<link rel="preload" as="image" href="' . $img_src . '" imagesrcset="' . esc_attr( $img_srcset ) .'" imagesizes="100vw">';
    }
} );

[Bob]

Sorry,

Where would I add that code?

[David]

Hi there,

this article explains:

https://docs.generatepress.com/article/adding-php/

[Bob]

I added the code via Code Snippet but still seeing the warning from PageSpeed Insights. Tried to clear my cache too.

[Elvin]

Hi there,

Here are a few things to try:

Consider using an optimization/caching plugin. This could potentially improve some if the issues your having as your site is having “Flash of unstyled text” or FOUT. (this is happening to the title)

As for the image being flagged.

Can you try to disable lazy loading on the feature image?

Let us know how it goes.

[Author]

Posts