- This topic has 5 replies, 3 voices, and was last updated 3 years, 4 months ago by Tom.
-
AuthorPosts
-
November 10, 2020 at 3:19 pm #1526014Jason
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 muchNovember 10, 2020 at 4:31 pm #1526051ElvinStaffCustomer SupportHi,
If you need to edit the site logo output to add attribute to the
<img>
markup, you can use thegenerate_logo_output
filterhttps://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.
November 10, 2020 at 5:27 pm #1526071JasonIf 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.
November 10, 2020 at 6:28 pm #1526101ElvinStaffCustomer SupportThis 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-imagesWhich again, will require you to use filters. Code snippets will let you apply this w/o having to create a child theme.
November 11, 2020 at 12:52 pm #1527385JasonOn 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.
November 12, 2020 at 10:09 am #1528750TomLead DeveloperLead DeveloperHi there,
Are you using the flexbox version of the theme (Customize > General)? If so, it should add the dimensions to the logo by default.
-
AuthorPosts
- You must be logged in to reply to this topic.