[Resolved] Form loads late and causes CLS – Define box size?

[Leif]

I have a form that loads on my page last due to lazy loading.
I have a container element that houses the form (.signup.container)
I would like to have the container be the correct size to avoid late loading page shift (CLS).

The form size isn’t defined in pixels etc and I don’t want the container to be gigantic once the form is there.
So I’m not sure how to do this 😐

[David]

Hi there,

ideally you don’y want to lazy load any element that is above the fold, so removing lazy load from the form would be the best option.

Alternatively would use CSS to give the container element a min height – which would require different heights for different breakpoints eg.

.signup-container {
    min-height: 116px;
}
@media(max-width: 1023px) {
    .signup-container {
        min-height: 190px;
    }
}
@media(max-width: 767px) {
    .signup-container {
        min-height: 357px;
    }

}

[Leif]

OK cool, I did a decent job of that. So there isn’t a more robust method than just assigning pixel heights based on screen widths in pixels? If true, that’s fine.

Is there a way to force something to not be lazy loaded?

[Elvin]

Hi,

OK cool, I did a decent job of that. So there isn’t a more robust method than just assigning pixel heights based on screen widths in pixels? If true, that’s fine.

Adding min-height the best way to go because it doesn’t have to wait for the contents to load to have an occupied size within the page.

Min-height is basically the assumed content size. If it is already set before the actual content is loaded, then the contents that loaded late won’t cause any layout shifts (CLS) because their height when they suddenly finish loading doesn’t “push” anything because its container already had a min-height that predicted how much it will occupy.

Is there a way to force something to not be lazy loaded?

Lazy loading is usually applied by optimization plugins, and these optimization plugins usually have exclusion field where you can add element’s classes to exclude them from being lazy loaded.

[Leif]

OK cool, thanks Elvin. It worked out pretty well with the pixel count and about 15 minutes of randomly stuffing in numbers!

[Elvin]

No problem. Glad it worked for you. 🙂

[Author]

Posts