Support » Plugin: Calculated Fields Form » High Cumulative Layout Shift (CLS)

  • Resolved Tuempelkoenig

    (@tuempelkoenig)


    Hi,

    if I insert a form through your plugin, I get a very high Cumulative Layout Shift value (CLS on Google PageSpeed Insights):

    0 with no form inserted
    0.8 with a form inserted

    Is there any way I can reduce it?

    My forms are restricted to members, if you need an URL to check the issue, I can set you up an account and send you the details per email.

    Thanks

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @tuempelkoenig

    If the form cache setting is enabled on the plugin settings page, the form is generated on the server-side by reducing the CLS.

    The free plugin version does not include this feature, but you have the alternative of assigning a class name to the form to apply a minimum height.

    You can assign a class name to the form through its shortcode, for example:

    [CP_CALCULATED_FIELDS id="1" class="form-a"]

    And define the new class name through the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png) as follows:

    .form-a{min-height:950px;}

    Best regards.

    Thread Starter Tuempelkoenig

    (@tuempelkoenig)

    Thanks for your suggestion – enabling the cache solves this, but then I have a strange layout shift while loading the page.

    Please see the following screenshots I took:

    https://e1.pcloud.link/publink/show?code=XZ2F3FZacLNfgfRhVQaSPHmkC64Dj0MFiX7
    https://e1.pcloud.link/publink/show?code=XZsF3FZzt7SnUp7CTJg5510gei0jXtnXEn7

    Image 1 shows, how the page is displayed for like 0.5s.
    Image 2 shows how the page is fully loaded.

    it seems like with cache enabled all my styles (external css file) aren’t applied for half a second and this results in in the full page switching the layout.

    Can you help me how I can prevent this as well?

    Thanks

    Plugin Author codepeople

    (@codepeople)

    Hello @tuempelkoenig

    Please, try the following modification:

    1. Enter the following style definition into the “Customize Form Design” attribute in the “Form Settings” tab (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png)

    #fbuilder{visibility:hidden;}

    2. Insert an “HTML Content” field in the form with the following piece of code as its content:

    <script>fbuilderjQuery(document).one('showHideDepEvent', function(){
    fbuilderjQuery('#fbuilder').css('visibility', 'visible');
    })</script>

    3. Finally, press the “preview” button to update the form cached copy.

    Best regards.

    Thread Starter Tuempelkoenig

    (@tuempelkoenig)

    Thanks, I see that the form is now hidden until the script changes the visibility attribute when it’s loaded. This works when I load the page for the first time, but after reloading it, the form keeps hidden and the change of visibility does not work again?

    Plugin Author codepeople

    (@codepeople)

    Hello @tuempelkoenig

    You can change the event to window.onload

    <script>fbuilderjQuery(window).on('load', function(){
    fbuilderjQuery('#fbuilder').css('visibility', 'visible');
    })</script>

    Best regards.

    Thread Starter Tuempelkoenig

    (@tuempelkoenig)

    unfortunately, this doesn’t do the trick either. When I disable the cache, it does work, so it seems that the script doesn’t fire for the cached version?

    Plugin Author codepeople

    (@codepeople)

    Hello @tuempelkoenig

    I’m sorry, I’m trying to solve your issue without checking it because the form is private.

    Actually, the previous solution should work even if you reload the page:

    <script>fbuilderjQuery(document).one('showHideDepEvent', function(){
    fbuilderjQuery('#fbuilder').css('visibility', 'visible');
    })</script>
    Thread Starter Tuempelkoenig

    (@tuempelkoenig)

    It seems that putting the script and styles into my external files did solve it.

    Thanks a lot for the quick fix!

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