[Support request] How to set width and height for background image in a container

[Babak]

Hi;
I am trying to set width and height to a background image for a container to avoid cumulative layout shift. I would really appreciate it if you could look at the page and tell me the best approach.
In my element, the more I increase the container’s padding on top and bottom, the lesser the cumulative layout shift. So if I go 200 on top and 200 on the bottom, I get the minimum amount of shift, but this much padding ruins the layout.
Thanks for the help in advanced

[Fernando]

Hi Babak,

Are you referring to this specific Container?: https://share.getcloudapp.com/eDu5o6qP

I tried testing your website and I couldn’t seem to replicate the CLS issue for a specific container with a Background image: https://share.getcloudapp.com/YEur819L

May we know how you’re testing your site for CLS? I tested your site through Google Chrome’s Lighthouse tool on incognito to generate the most accurate performance result.

See: https://developers.google.com/web/tools/lighthouse

Or perhaps you’re referring to a different container?

Kindly let us know. Hope to hear from you soon. 🙂

[Babak]

Hi Fernando;
Please look at this page
https://ivl.seotow.com/boosters/
under the menu, there’s an image of a swimmer. This is actually an element I created and suppose to show an image below the menu. In this element, I created a grid a container and set the image you see as the container’s background image, and this is the exact image creating the cumulative layout shift.
Hope I can explain the problem correctly.

[Fernando]

How are you testing your site? I tried testing your website multiple times again, and I couldn’t seem to replicate the issue.

See: https://share.getcloudapp.com/geum0wWY

Also see for another test: https://share.getcloudapp.com/lluEzJJp

It seems that the more significant issue is server response time.

Here is an article you may refer to for further assistance with regards to this: https://www.cloudways.com/blog/reduce-server-response-time-wordpress/

Also see: https://onlinemediamasters.com/reduce-server-response-time-wordpress/

Also this response by Elvin: https://generatepress.com/forums/topic/reduce-initial-server-response-time/#post-1518385

Trying an Optimization plugin like WP Rocket might also help.

Hope this clarifies. 🙂

[Babak]

It is not about the site but about the child pages, I am trying to add the image below the menu.
This is my testing tool, please click on the link

https://pagespeed.web.dev/report?url=https%3A%2F%2Fivl.seotow.com%2Fboosters%2F

Cumulative Layout Shift
0.24

[Babak]

Here’s the cumulative layout shift I am talking about. This is done by chrome lighthouse

[Fernando]

Thank you for including a link to your Test and adding a screenshot.

I can see that from your test, the CLS is coming from this: https://share.getcloudapp.com/kpuJy5nR

Do you have a Caching/Optimization plugin? The problem may be coming from the optimization of CSS and lazy loading of images.

Can you try disabling this and check again?

Hope to hear from you soon. 🙂

[Babak]

Yes, I disabled and still the same! What you are pointing to in the image are 3 different elements created by grids and containers and do not act like this on the front page of the site!
I am really puzzled but from my test, if I increase the top element’s padding to 200 top and 200 bottom the problem almost disappears. Back to my initial question, is there any way to assign width and height to the container’s background image?

[Fernando]

I see. As is, the background image already has a defined height and width which is computed through background-size: cover. Moreover, modifying this should have no effect with regards to CLS as this is just a background image and not an Image element itself which actually takes up space. The image “size” of this background image or the space it takes up relative to other Blocks is based solely on the size of its container.

Here is a code you may try to manually input a background image “size” for mobile:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
        .gb-container.gb-container-c2ae02ca {
        background-size: 400px 200px;
    }
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Moreover, I tried testing again and got the same result: https://share.getcloudapp.com/bLuKpogG

Also tried through web.dev: https://share.getcloudapp.com/04uEkeRw

Also see: https://share.getcloudapp.com/mXuY7oDy

I also tried checking the CLS out manually by using Slow 3G network on my test and this is what I found: https://share.getcloudapp.com/bLuKpoZb

As shown at around 8 seconds in the screen recording, it seems that the spacing of this form for instance are being loaded late. This goes back to how your site is being optimized.

Kindly see David’s response here: https://generatepress.com/forums/topic/cls-and-grid-container-issue/#post-1728508

To be sure can you try number 1 here: https://docs.generatepress.com/article/debugging-tips/

Kindly let us know how it goes. Hope we get to the bottom of this as soon as possible. 🙂

[Babak]

Thanks a lot for your help. I have to check and see why these three elements placed after each other are creating this effect. Please mention, regarding the optimization plugin, I am using the same exact elements and same exact optimization plugin on the front page of the same site but no cumulative shift.

[Fernando]

I see. One factor may also be that you’re preloading a lot of CSS. Can you try preloading only your fonts and maybe images above the fold?

Then, try aggregating all other CSS into one cached file and see how it goes.

Hope this helps. 🙂

[Babak]

OK, the optimization plugin is gone, but still, the problem is there!
The child page and front page have the same configuration with elements but the front page is doing 97 and child page 88 with 0.415 shift.
I cannot think of anything do you have any suggestions?
Almost ready to cry now…

[Babak]

FOUND IT…
If you look at the child pages you see that I am using the Themify Product Filter plugin and that’s creating the shift. I place the shortcode in a container and use it as an element on the page.
Is there any way to prevent the shift now?

[Fernando]

Great! Glad you were able to figure out the specific cause of the issue!

I could also see it how it could potentially cause CLS testing from my end: https://share.getcloudapp.com/KouAQo4N

With that said, it would be best to reach out to the support of this plugin for a fix, or you may also try a different filter plugin.

Moreover, with the current state of the site with nothing preloaded, I tried testing again and noticed that the CLS no longer existed.

Lighthouse: https://share.getcloudapp.com/qGu7zeWP

web.dev: https://share.getcloudapp.com/JruOwrRE

Maybe trying a different optimization plugin like: https://wordpress.org/plugins/autoptimize/

or WP Rocket, with settings: https://docs.generatepress.com/article/configuring-autoptimize/

might help with the issue as well.

Hope this helps! 🙂

[Babak]

Thanks a lot for continuing and helping me. Just for the record and if incases there’s someone else runs into this problem, it is worth saying that if I have the finder element on top of the page below the image then it creates the problem but if I push it down the page then the same plugin will not cause any issue at all.
Again thanks for your help and I thought you should know about it too.

[Author]

Posts