Your Site On: HubSpot Form Embed

On April 17, 2021Modified: October 20, 2022
In Articles, Your Site On...
By Cristian

Aggregate Difference

Mobile: 11 points (12.88% slower)
Desktop: 3 points (3% slower)

Test Method

Results are cumulated and averaged over the time period between the first tested and last tested dates. I send automated daily^* requests to the PSI API for both mobile and desktop strategies, add the latest result for each strategy to its corresponding existing tally, then divide the tally by the number of times the test was performed, and round it to the nearest integer.

Formula: result ≈ Σ[day results] / times tested to date where ‘≈’ means rounded to nearest integer

^* Additional tests are occasionally performed between the scheduled daily runs, so the times tested to date rubric will most likely not correspond to the number of days between first tested and last tested.

Embed Code Used

As provided by HubSpot, IDs blotted out:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
   hbspt.forms.create({   region: "na1",   portalId: "xxxxxxxx",   formId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" }); 
</script>

Potential Solutions

If your HubSpot embed is below the fold

Lazyload it in order to prevent it from running on page load. One solution to try is Vanilla Lazy Load, though there may be better options for your own case. It has a feature called Lazy Functions which you can use to load HubSpot dynamically only when needed.

If your HubSpot embed is above the fold

I’ve not tested this, but the only thing that occurs to me is to make a dummy form. Emulate the HubSpot form, then at the appropriate moment (say, on the form focus event, or when the user clicks inside the form wrapper), run the whole embed code and replace the form with the HubSpot one. A hack from hell, but it just might work.