CLS issue: more than 0.25 (mobile)

[Heather]

Hi, I have this error in search console, 184 poor on mobile and 152 urls need improvements. Could you take a look for me and see what you think? Thanks

[Tom]

Hi there,

If you run your site through Pagespeed insights, it will give you a list of things to fix: https://developers.google.com/speed/pagespeed/insights

The screenshots show the CLS is likely coming from a couple of places:

1. Your mobile header logo is lazy loading – what plugin are you using for lazy load? Is there a way to exclude images? If so, you can exclude the is-logo-image class.

2. The red banner showing up may be contributing as well, but it’s worth testing again after fixing #1.

3. Then, I would deal with your resources. Autoptimize is a great choice for that: https://generatepress.com/fastest-wordpress-theme/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Heather]

Hi

I’m using wp rocket lazy load, so I’ve added in functions file:

function rocket_lazyload_exclude_class( $attributes ) {
$attributes[] = ‘class=”is-logo-image”‘;

return $attributes;
}
add_filter( ‘rocket_lazyload_excluded_attributes’, ‘rocket_lazyload_exclude_class’ );

think that’s right?

2. Disabled the red banner, not sure it made a big difference, will probably end up turning it back on.
3. Autoptimize is already installed and configured as per your instructions 🙂

Not sure there is much else I can do?

Thanks
Heather

[Tom]

That looks like it brought your CLS from 0.34 down to 0.038, which is great.

The next things you’ll want to look at is reducing the number of fonts on the site. Things like Font Awesome, Google fonts and other icon fonts aren’t great for performance.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Heather]

Thanks, I will take a look at the fonts and see if I can do anything with them 😊

Heather

[Tom]

Sounds good! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts