Integrating dynamic media into landing pages presents a clear performance challenge. After generating several AI presenters with HeyGen, I needed to embed them into HubSpot-hosted pages without degrading Core Web Vitals, specifically Largest Contentful Paint and Cumulative Layout Shift. The primary objective was to maintain sub-2s LCP while ensuring the video player loaded asynchronously.
My workflow involved exporting the HeyGen video, hosting it on a CDN, and embedding via HubSpot's HTML module. The critical step is controlling the resource loading behavior. Here’s the configuration I used for a non-blocking embed:
```html
```
Key performance considerations:
* **Hosting:** Do not use the default HeyGen share link directly. The additional redirects and third-party scripts added ~800ms to LCP in my tests. Self-hosting on a performance-optimized CDN (e.g., Cloudflare, Bunny.net) is non-negotiable.
* **Loading Attribute:** The `loading="lazy"` attribute is crucial for below-the-fold placements. For above-the-fold, omit it but ensure the iframe `src` is not a blocker.
* **Layout Stability:** Explicitly defining the container's `aspect-ratio` in CSS prevents layout shifts during iframe initialization.
Post-integration Lighthouse testing showed acceptable results:
* LCP: 1.8s (with the video as LCP element)
* CLS: 0.05
* Total Blocking Time: 150ms
Has anyone else benchmarked alternative embedding methods, such as using the HTML5 `
sub-10ms or bust