[Resolved] Adding logo width and height php code makes header jump for microsecond

[Dusan]

Hi there,

I wanted to add the width and height html parameters to my logo. Just like the logo of generatepress.com has.
Google page speed test says that I have non defined width and height.

I searched the forum here and found this topic.

I added that code using the PHP code inserter plugin. That did give me height and width parameters but now my header makes a big jump that lasts a microsecond and causes a CLS issue.

The header loads bigger and then suddenly shrinks to its normal size.

Can you please help? Thank you!

Oh and I gotta use the opportunity to praise your work. One of my clients that has multiple websites will be buying your pro theme soon, after I showed them the results with the speed they were very interested!

[Leo]

Hi there,

I don’t believe the PHP is causing the jump.

Can you try disabling your caching plugin?

Let me know 🙂

[Dusan]

Hi Leo,

I disabled my W3 caching plugin. I cleared my varnish cache on the server-side and that didn’t help.

I need this resolved soon as I can’t keep the w3 inactive for long. My google page speed will go down fast.

I can’t remove server-side caching but I can clear it but that doesn’t help either.

Currently, since w3 is inactive there is no css, js, html minifying either.

Please kindly help resolve this issue.

Is there another php code I can use or something like that?

[David]

Hi there,

disable the lazy loading on the logo. Most lazyloaders provide an option to exclude images based on a CSS Class… you can use is-logo-image

[Dusan]

Hi David,

That fixed the issue!

I had to add a different CSS class that one for some reason didn’t work. But excluding the logo solved the problem thankfully!

[David]

Glad to hear that!

[Dusan]

Hi David just a quick question. What would be the good contact method for suggesting a feature? I might have an idea that you if you implemented you would be the first ever to do from what I can tell and it would make life easer to many devs and site owners

[Leo]

You can provide your suggestion here.

[Dusan]

Hi Leo,

Here is what I had in mind.

Considering how important the page speed metrics are becoming for SEO and that it will be a ranking factor this is highly sought after by web developers and site owners.

I am talking about making the largest contentful paint load as fast as possible. This element is in wast number of times a featured image or the first image in a websites content. It can be an html element too but my suggestion is for images.

Currently I make sure that the image is not lazy loaded but then I go step further and I preload it using a html preload as image tag.

This improves my LCP significantly.

But this only makes sense on a page by page basis. I don’t want to preload an image that is used in another page.
So I am using a plugin that allows me to inject the html code in header on a page basis.

Thats a lot of manual work to set it all up but I do it for the most important pages.

If you had an option in your theme to preload a featured image for that specific post or to select an image in the specific post and preload that image only for that page that would be a highly appreciated feature. Further if your theme had an option to preload on a page by page basis any image that has a certain css class your theme would gain significant traction among the thousands of people that are facing LCP for the first time because it will become a google ranking factor.

The css thing could work like this. In the theme setting you input the css classes of images and then all images that have those css classes are preloaded but only if the page has that image in it. So if a page has 1 image that has that css class it would get the html code for preload as image in header only for that 1 image and not for other images on the website that have that css class.

If you made this possible I would be even willing to pay again for your theme.

If you made this as an additional plugin I would also pay for it.

I am sure that thousands of people would.

LCP is a serious metric today and many many times it is the image. If you could preload that specific image for every page with the click of a button without going to tons of trouble or hiring a dev then you would be the first to make this possible. As far as I am aware there is no plugin that offers this. Literally an untapped market. If I had the knowledge and resources to make this I wouldn’t be sharing it here but I don’t and I need this made so there you go.

If you figure it out it will be great for you but I am sure as the LCP is becoming more and more important that other devs are thinking about this too 😉

[David]

Yep – definitely an interesting idea – something i have been looking into along with modifying the default image srcset behaviour that WP defines, which would allow for ‘better’ selection of responsive image sizes.

[Author]

Posts