Nothing loaded yet.
Scroll to prove it.

DEMO 01 / 09

Mark any script tag with type="text/boostify" and call bstf.onload(). Scripts execute after the first user interaction — mousemove, scroll, or touchstart — or after maxTime as a fallback. Zero refactoring. With worker: true, scripts are fetched through Boostify's proxy in a separate thread — your main thread never touches them, so parsing and execution can't block rendering or slow down user interactions.

<script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX"></script>
// ↑ blocks render immediately

<script type="text/boostify"
  src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX">
</script>

const bstf = new Boostify({ debug: true });
bstf.onload({ worker: true });

// 1. mark scripts for deferral
<script type="text/boostify"
  src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX"></script>

// 2. initialize and call onload
const bstf = new Boostify({ debug: true });
bstf.onload({ worker: true, maxTime: 5000 });

DEMO 03 / 09

Fires a callback when a target element enters the viewport. Perfect for UI components that only make sense when visible — carousels, galleries, maps. CSS and JS load together on demand, so the widget is fully styled when it initialises.

import { tns } from 'tiny-slider';
import 'tiny-slider/dist/tiny-slider.css';
// ↑ loads at page open
// even if slider is never seen

bstf.observer('#slider', async () => {
  // loadStyle + loadScript — see Demos 07 & 08
  await bstf.loadStyle('tiny-slider.css');
  await bstf.loadScript('tiny-slider.js');
  tns({ container: '#slider', items: 1 });
});

bstf.observer('#slider', async () => {
  // loadStyle + loadScript covered in Demos 07 & 08
  await bstf.loadStyle('https://cdn.jsdelivr.net/npm/tiny-slider@2/dist/tiny-slider.css');
  await bstf.loadScript('https://cdn.jsdelivr.net/npm/tiny-slider@2/dist/min/tiny-slider.js');
  tns({ container: '#slider', items: 1, autoplay: true });
});

DEMO 05 / 09

Fires a callback when the user clicks a DOM element. Ideal for loading modals, payment SDKs, or request handlers only when there is real intent — not on page open. Zero bytes downloaded until the click happens.

import modal from 'modal-lib';
// ↑ 45KB loads at page open
// even if user never clicks

let modal = null;
bstf.click({
  element: document.getElementById('open-modal'),
  callback: async () => {
    // import runs once — subsequent
    // clicks reuse the cached module
    modal ??= (await import('./modal-lib.js')).modal;
    modal.show();
  },
});

let modal = null;
bstf.click({
  element: document.getElementById('open-modal'),
  callback: async () => {
    // import() is cached by the browser — runs once
    modal ??= (await import('./modal-lib.js')).modal;
    modal.show();
  },
});

DEMO 06 / 09

A YouTube or Vimeo iframe weighs ~320KB and fires multiple tracking requests on load. videoEmbed keeps the iframe out of the DOM entirely — but you must pair it with a trigger. Calling it alone fires immediately at page open, same as a plain iframe but with extra JS overhead. Combined with bstf.click(), the full 320KB only transfers when the user actively chooses to play.

<iframe
  src="youtube.com/embed/ID"
  width="100%"
  height="315">
</iframe>
// ↑ 320KB loads immediately

bstf.click({
  element: thumbEl,
  callback: () => {
    bstf.videoEmbed({
      url: 'youtube.com/embed/ID',
      appendTo: '#player',
      autoplay: true,
    });
  },
});
// 320KB loads on click only

// ✅ content injection + trigger
bstf.click({
  element: document.getElementById('thumb'),
  callback: () => {
    bstf.videoEmbed({
      url: 'https://www.youtube.com/embed/0q6yphdZhUA',
      appendTo: '#player',
      autoplay: true,
    });
  },
});
// 0 bytes transferred until the user clicks

DEMO 08 / 09

Appends a script tag to the document on demand. Use this inside any trigger callback to load third-party SDKs — Stripe, Intercom, Segment — only when you actually need them.

<script src="https://js.stripe.com/v3/"></script>
// 180KB loads on every page
// even on pages without checkout

bstf.observer('#checkout', () => {
  bstf.loadScript('https://js.stripe.com/v3/');
  // SDK loads only when checkout
  // section enters the viewport
});

bstf.observer('#checkout', () => {
  bstf.loadScript('https://js.stripe.com/v3/');
  // Stripe SDK loads only when checkout is visible
});