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

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

Home Forums Support Form loads late and causes CLS – Define box size?

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

    #1571281
    David
    Staff
    Customer Support

    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;
        }

    }

    #1573747
    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?

    #1574063
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1600294
    Leif

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

    #1604237
    Elvin
    Staff
    Customer Support

    No problem. Glad it worked for you. 🙂

    A wise man once said:
    "Have you cleared your cache?"

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