How to Defer or Preload Forms for CWV

[CS_Team]

Greetings all,

We are looking for a way to defer or preload HubSpot forms so we can pass core web vitals (CWV). We currently run each of our pages on https://pagespeed.web.dev/ to check if the page is passing CWV on mobile and desktop view. We noticed on the desktop view for this page, the HubSpot form area doesn't preload so it appears missing. Screenshot provided below.

To be clear, the forms are functional and usuable on our site, the issue is only involving passing CWV on the initial "paint" of the page. I will post  the link to the page we are testing as well as the code we've used below. We would appreciate any advice or help figuring this problem out so we can use it on future pages using HubSpot forms. 

Page Link:

https://www.leeshanok.com/optimizing-security-on-mobile-devices

Embed Code:

<link href="js.hsforms.net/forms/shell.js" as="script"> <script charset="utf-8" type="text/javascript" src="js.hsforms.net/forms/shell.js"></script> <script> hbspt.forms.create({ region: "na1", portalId: "20123084", formId: "10f06097-7fc3-44cb-ade5-295c04240fe0" }); </script>

Thanks!

The CS Team

[SLovejoy]

This is not possible based on responses i have had from hubspot and the developer community.

There is no way to defer or influence the form javascript or the leadflows javascript to prevent the penalties both of these huge scripts incur via Lighthouse or any other pagespeed measurement platform.

[CS_Team]

@miljkovicmisa and if we were having a CLS issue that might solve our problem. Given our experince with other embedded forms, we can preload the script and it loads up very quickly and fine. When we attempt to preload or defer the script, it stops working. We find this very curious given how large Hubspot is. 

[miljkovicmisa]

Hello @CS_Team , A good practice is to accommodate for the space of the form before it's even loaded, to do that you can set a width and a height on the element that will host the form, in your case the .uk-card element just above the title. Set a height on this element and width slightly bigger than the form like width: 525px and height:585px. Also set a width and a height on the image on the left to prevent the content reflow, so when ready the image and the form will just appear on their place and the page content shouldn't move at all.

If you need any further help don't hesitate to write here.
Greetings!

P.S.: You can also do other stuff, like waiting for the form to be ready and then show the content using global form listeners, more info in this link here. In that case you neet to make sure it works nicely, show a loader to the user and prepare a fallback in case something doesn't load properly.

If my answer was helpful please mark it as a solution.