import-on-interaction

Defer loading heavy third-party widgets by using dynamic import() or React.lazy/Suspense to fetch code only after a user gesture like click, hover, or focus triggers the need, reducing initial payload and main thread blocking.

Facades for third-party embeds improve web vitals by displaying a lightweight placeholder UI instead of the heavy embed, fetching the real resource only upon user interaction to reduce initial JavaScript processing cost and improve FID and TTI.

React Suspense works with dynamic import by using React.lazy for component-level deferral, allowing you to wrap dynamically imported components and show loading states until the non-critical feature code finishes fetching after interaction.

The best way to lazy load non-critical JavaScript without jarring delays is combining on-interaction loading with progressive loading guidance, using idle-time loading, preconnect, and prefetch strategies to prepare resources before the user gesture occurs.

You should not use on-interaction dynamic imports for critical above-the-fold features where delayed functionality after interaction would harm user experience, as the trade-off sacrifices immediate readiness for improved initial page load performance.