Shift in header height on load when using an image for the logo

BB Theme
,
1

Hi. This issue is driving me crazy so any thoughts are appreciated!

When a page first loads, the white of the header is initially larger, then it shrinks back to the correct size once the logo image loads. This is causing CLS issues.

The site is https://steelbuildingskit.com and it’s using the BB pro builder and BB theme.

The problem seems to be with the spacing that’s allocated for an image since I’ve tried different images of all different sizes and the same thing happens. When I switch to a text logo, the issue goes away.

Things tried so far:

  1. Changing the logo image size, adding/removing separate sized logos for retina etc. didn’t make a difference unless I told it to use no logo, in which case there was no shift.

  2. Removing WP Rocket lazyloading /caching (I disabled the plugin all together). Didn’t help.

  3. Switching from the BB child theme to just the core BB theme in case it was a customization issue.

  4. Removing all custom CSS

  5. Changing the header layout to other formats. Issue persists in all so long as there’s an image logo.

  6. Removing the copy/button on the right. No change.

It definitely seems to be the logo image since changing to text instead of an image fixes it instantly. I can’t think of why this would be though.

Any thoughts on what’s going on here?

Thank you very much!

2

That logo is being lazy loaded by WP try this in child theme
add_filter('wp_lazy_loading_enabled', '__return_false');

3

Also, all your images have perfmatters-lazy class added, so they are being lazy loaded by WP and whatever is adding that class, perhaps a custom plugin?

4

You’re completely right, it was the plugin perfmatters which was adding in that class and causing an issue. Seems like they added lazyloading as a new beta feature and I didn’t realize it was running. Sorry I didn’t spot that myself.

Thank you so much for your help. I hope you have a good weekend!

1 Like