HyperTurbo

HyperTurbo speeds up real-world sites (especially e-commerce) without prefetch.
Instead of fetching pages early, it reduces main-thread work and rendering cost:

• ✅ Freeze below-the-fold sections using content-visibility + contain-intrinsic-size
• ✅ Lazy-mount heavy widgets when they become visible (reviews, instagram feeds, maps, etc.)
• ✅ Third-party quarantine (opt-in): delay heavy external scripts until interaction / after LCP / timeout
• ✅ Yielding helpers (opt-in): split long loops into chunks to reduce TBT/INP
• ✅ Long-task observer (diagnostics): detect runtime long tasks and show suggestions (debug)

Safe-by-default: you can enable features gradually.

Install

CDN (recommended)

<script>
  window.HyperTurbo = {
    debug: false,
    freezeBelowFold: true,
    lazyMount: true,

    // opt-in:
    quarantineThirdParties: false
  };
</script>

<script src="https://unpkg.com/[email protected]/dist/hyperturbo.min.js" defer></script>

NPM

npm i hyperturbo

Configuration

window.HyperTurbo = {
  debug: true,

  // Freeze below fold
  freezeBelowFold: true,
  freezeSelector: "main > section, .shopify-section, [data-hyperturbo-freeze]",
  freezeRootMargin: "1200px 0px",
  containIntrinsicSize: "800px 1000px",

  // Lazy mount widgets
  lazyMount: true,
  lazyMountSelector: "[data-hyperturbo-mount]",
  lazyMountRootMargin: "800px 0px",

  // Yield helpers
  yieldLongTasks: true,
  yieldMaxChunkMs: 10,

  // Third-party quarantine (OPT-IN)
  quarantineThirdParties: false,
  thirdPartyMode: "allowlist",
  thirdPartyAllow: ["googletagmanager.com", "google-analytics.com"],
  thirdPartyRelease: "interaction", // interaction | afterLCP | timeout
  thirdPartyTimeoutMs: 2500,
  thirdPartyMaxParallel: 1
};

Lazy-mount examples (the magic part)

1) Mount content from a <template> only when visible

<div data-hyperturbo-mount="reviews">
  <template>
    <div id="reviews-root"></div>
    <script src="https://example.com/reviews-widget.js" async></script>
  </template>
</div>

2) Load an external widget script only when visible

<div data-hyperturbo-mount="instagram" data-hyperturbo-src="https://example.com/instagram-widget.js"></div>

Yielding helpers (reduce long tasks)

// Split a long loop into chunks:
HyperTurbo.scheduler.chunkedFor(items.length, (i) => {
  heavyWork(items[i]);
}, { chunkMs: 8 });

API

After load, window.HyperTurbo becomes the library instance (UMD):

• HyperTurbo.version
• HyperTurbo.config
• HyperTurbo.scheduler → postTask, yield, chunkedFor, chunkedWhile
• HyperTurbo.mountNow(selectorOrEl)
• HyperTurbo.getLongTasks() (only if observeLongTasks is enabled)

Notes / Safety

• freezeBelowFold uses modern CSS (content-visibility). Unsupported browsers simply benefit less.
• quarantineThirdParties is OFF by default. Enable it only after testing.
• If a widget must run immediately, allowlist its domain (allowlist mode).

License

MIT © Putia Web