import-on-interaction

Lazy-load heavy JavaScript modules on user interaction by using the dynamic import() pattern to fetch code on demand during events like clicks or hovers. This defers non-critical loading until needed, reducing initial load times.

The best way to improve Time to Interactive is to defer non-critical UI components using facades or lightweight placeholders. By loading heavyweight dependencies only on interaction, you reduce initial load times and improve First Input Delay.

Yes, you can use dynamic import() to load third-party widgets on demand in React or Vue. Framework-aware strategies allow you to fetch non-critical widgets during user interactions, preserving initial load performance without blocking the UI.

Facades help web performance by providing lightweight placeholders that preserve user experience while heavyweight dependencies load in the background. They visually represent deferred non-critical code until a user interaction triggers the dynamic import.

You should not use import-on-interaction for lazy-loading critical modules required during initial page load. This approach is strictly for non-critical code, heavy libraries, and third-party widgets that can be deferred without degrading core user experience.