[Support request] Logo size determined by CSS results in suboptimal loading experience

[Jason]

Hello,

Today, our website is loading much slower than usual, and I’m not really to the bottom of that yet (if it could have anything to do with GeneratePress, let me know, but I’m guessing it’s more likely our server)

That said this has brought an issue to my attention that I can’t find addressed in the documentation or support forums.

The logo is oversized when uploaded to accommodate retina screens. In appearance, the logo width is set to 220px. This doesn’t add a width or height to the img tag however, it just adds CSS that resizes it. As a result, when the image takes too long to load, it temporarily pushes the header area much taller than it should be, and then it jerks to the right size after a second of loading.

Ideally, content should never move once loaded. This would be fixed if there was width and height attributes on the logo in the HTML itself.

Is there a good practice for addressing this issue within the current framework?
Thank you very much

[Elvin]

Hi,

If you need to edit the site logo output to add attribute to the <img> markup, you can use the generate_logo_output filter

https://docs.generatepress.com/article/generate_logo_output/

Is there a good practice for addressing this issue within the current framework?

One good practice would be to not lazy load your logo.

You can also try to set the height on its container instead of the width as width shifts won’t affect the header since it’s already in 100% width anyway.

With fixed height set, a “placeholder” space is already in place before the image loads, that means you won’t see any weird snapping or layout shifts once the image loads.

A wise man once said:
"Have you cleared your cache?"

[Jason]

If you need to edit the site logo output to add attribute to the markup, you can use the generate_logo_output filter

This is something that is needed on every single site though, it shouldn’t require a dedicated child theme just for that.

One good practice would be to not lazy load your logo.

This would require either a data-skip-lazy attribute or skip-lazy class to be added to the logo which would also require a dedicated child theme.

I really think these are things that should be built into the GeneratePress theme.

[Elvin]

This is something that is needed on every single site though, it shouldn’t require a dedicated child theme just for that.

If you prefer to not use child themes, you can use a very lightweight plugin called Code Snippets to add your PHP as instructed here – https://docs.generatepress.com/article/adding-php/

This would require either a data-skip-lazy attribute or skip-lazy class to be added to the logo which would also require a dedicated child theme.

On your site, theme doesn’t implement lazy loading. WP Rocket plugin does that for you.

That said, you can try asking WP Rocket if they have this feature.

They most likely will point you to this:
https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

Which again, will require you to use filters. Code snippets will let you apply this w/o having to create a child theme.

A wise man once said:
"Have you cleared your cache?"

[Jason]

On your site, theme doesn’t implement lazy loading. WP Rocket plugin does that for you.
…
Which again, will require you to use filters.

Yes, I know, that is exactly what I told you. I would strongly suggest to you that this should not be necessary and is a workaround for a major issue with your theme. There is no reason not to put the height and width in the tag. It can still be overridden with CSS.

[Tom]

Hi there,

Are you using the flexbox version of the theme (Customize > General)? If so, it should add the dimensions to the logo by default.

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

[Author]

Posts