smart-preload ⚡

Preload scripts and styles only when users show real intent.

Load smarter, not earlier.

🚀 Why smart-preload?

Traditional preload loads resources even if users never use them.

smart-preload waits for real user behavior signals before preloading:

• Hover on actionable elements
• Deep scroll (engaged users)
• Time spent on page

This reduces wasted bandwidth and improves perceived performance.

📦 Installation

npm

npm install smart-preload

CDN

<script src="https://unpkg.com/smart-preload"></script>

✨ Usage

Hover-based preload

import { smartPreload } from "smart-preload";

smartPreload(() => {
  import("./checkout.js");
}, {
  when: "hover",
  target: "#buy"
});

Scroll or time based preload

smartPreload(() => {
  loadChatWidget();
}, {
  when: ["scroll", "time"],
  scrollDepth: 0.6,
  delay: 3000
});

🧠 Supported behavior signals (v1)

| Signal | Description | |------|------------| | hover | Mouse hover on element | | scroll | Scroll depth reached | | time | Stay on page for N ms |

🛡 Safety guards

smart-preload automatically disables itself when:

• navigator.connection.saveData === true
• Tab is backgrounded (document.visibilityState === "hidden")

🎥 Demo

Hover the button → resource appears instantly in Network tab.

Tip: Open DevTools → Network → Disable cache → Hover the button

demo/
├─ index.html
└─ demo.gif

🗺 Roadmap

• v1: behavior-based preload
• v1.1: touch support
• v2: intent confidence scoring
• v3: AI-assisted prediction

📄 License

MIT