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

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

Home Forums Support Logo size determined by CSS results in suboptimal loading experience

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1526014
    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

    #1526051
    Elvin
    Staff
    Customer Support

    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.

    #1526071
    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.

    #1526101
    Elvin
    Staff
    Customer Support

    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.

    #1527385
    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.

    #1528750
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.