Google PSi reports "Avoid large layout shifts 5 elements found"

Hi there,

Which stylesheets are you trying to defer, exactly?

Hello,

I can plan to defer main.min.css from secondary navigation, widget areas and mostly will defer and run some tests and accordingly finalise the list.

It is just that currently I am not sure how I can dequeue and enqueue with defer for stylesheets

Regards
Deepak

It's possible, but it involves dequeue-ing those files and re-adding them to the footer.

I would agree if they were big files, but they're quite small. Is there a reason why you're not just using a plugin like Autoptimize to combine them?

Hi Tom,

I thought the whole idea of having component specific stylesheet was to load them only when necessary. If I use autoptimize then I am combining the entire sheet which becomes around 50kb (using other plugin's stylesheets).

Also most importantly with HTTP2 it is not recommended to combine JS or CSS files. With generatepress I see all the CSS are already combined, JS combine is breaking my site for which I have already raised a ticket with plugin developer.

I prefer to use WP Rocket which already provides Minify CSS so again using another cache plugin will just create problems.

If you can help me with a sample code to dequeue and enqueue with defer a stylesheet (or send it to body or footer), I can do some trial runs to make sure if it has any significant impact.

Currently I just preload all the stylesheets which in a way helps but I really don't want to load 7-8 css files when I know only two of them are important while others can be deferred

Regards
Deepak

Try this:

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'generate-widget-areas' );
    wp_dequeue_style( 'generate-comments' );
    wp_dequeue_style( 'generate-secondary-nav' );
    wp_dequeue_style( 'generate-secondary-nav-mobile' );
}, 200 );

add_action( 'get_footer', function() {
    if ( is_singular() && comments_open() ) {
        wp_enqueue_style( 'generate-comments' );
    }

    if (
        is_active_sidebar( 'top-bar' ) ||
        is_active_sidebar( 'footer-bar' ) ||
        is_active_sidebar( 'footer-1' ) ||
        is_active_sidebar( 'footer-2' ) ||
        is_active_sidebar( 'footer-3' ) ||
        is_active_sidebar( 'footer-4' ) ||
        is_active_sidebar( 'footer-5' )
    ) {
        wp_enqueue_style( 'generate-widget-areas' );
    }

    wp_enqueue_style( 'generate-secondary-nav' );
    wp_enqueue_style( 'generate-secondary-nav-mobile' );
} );

The only issue here is that you're assuming the location of these files. We may decide to move things around in the future which will break your styles. Personally I would focus elsewhere, as this kind of thing won't make a huge performance difference.

Thanks a ton Tom :)

Looked into this a bit more and it turns out WordPress keeps the resources registered even if you dequeue them, so you don't need to re-add the URLs etc.. Updated the code above :)

Hi Tom,

I have used that code with it or without it, I am also facing a CLS problem that I could not solve completely.

You can also test it via this link: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.swtestacademy.com%2Frest-assured-tutorial-api-testing%2F&tab=desktop

If you can help, I will be very much appreciated it. I am very close to have a score of 100 :-)

I also want to thank all team for the awesome theme. I am very much happy to be onboard.

Btw, I am using WP-Rocket and I have done regenerate critical CSS (this helped a lot to reduce CLS but at the desktop, it did not make it around 0. For mobile, I am getting 0 CLS. If you need extra information, please let me know.

Hi there,

try adding the CSS that Tom provides here:

https://generatepress.com/forums/topic/core-web-vital-generatepress-theme-broadcast/page/2/#post-1791478

Hi David,

Thanks for the reply. I have tried but no luck. The results were the same. I think maybe it is about deferring some js files.

I have most of the time below 0.1 CLS not 0 but still, it is ok but if we can make it 0. That will be awesome. :)

Sample page: https://www.swtestacademy.com/xpath-selenium/

As I see when I use 2G speed on Firefox's network tab, as Tom mentioned content area loading faster and moving to the most left to middle. Then right and left sidebars loaded.

Hi David,

I tweaked the CSS a bit and for my case below CSS worked better. Now CLS reduced to 0.02-0.03 which is quite good. It is not 0 but still not bad and with the below CSS tweaks, my page speed score increased from 98 to 100.

Maybe, you can suggest better CSSs which makes the CLS exactly 0.

Here are the my CSS additions as custom CSS:

.left-sidebar {
margin-left: auto;
}

.right-sidebar {
margin-right: auto;
}

.site-content .content-area {
margin:auto;
}

I finally settled with following hack which will hide your content until the DOM content is loaded so CLS is 0.

https://generatepress.com/forums/topic/google-psi-reports-avoid-large-layout-shifts-5-elements-found/page/2/#post-1441357

Give it a try if it works for you.

Onur, sorry but i can't see what exactly is causing it that minor shift as there are a lot of scripts running that will affect the layout. At those levels of CLS i would happily ignore it.

Hi @Deepak,

That js hook created a flashing effect as I see. That's why I reverted back again. I think I will continue to use the CSSs that I have shared. I have currently around 96 mobile and 100 desktop scores which are not bad.

Hi @David,

I also don't know the details but I think this is not happening only to me as I see but as you mentioned with that level CLS I am ignoring it. At least with those CSSs the CLS reduced from 0.09 to 0.03 level. Thanks for your reply.