Boostify JS

Free & Open Source - No license required.

Boostify is a lightweight JavaScript library that improves website performance by deferring third-party scripts and loading resources on demand.

Why Boostify?

Third-party scripts (Google Analytics, Facebook Pixel, Hotjar, etc.) block your main thread and slow down your site. Boostify loads them in the background after your page is interactive.

Installation

npm

npm install boostify

import Boostify from 'boostify';

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

CDN

<script src="https://unpkg.com/boostify@latest/dist/Boostify.umd.js"></script>
<script>
    const bstf = new Boostify({ debug: true });
</script>

Quick Start: Load Analytics Without Blocking

Step 1: Mark your scripts

Change type="text/javascript" to type="text/boostify":

<script type="text/boostify" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>
<script type="text/boostify">
    window.dataLayer = window.dataLayer || [];
    window.gtag = function(){dataLayer.push(arguments);}
    window.gtag('js', new Date());
    window.gtag('config', 'G-XXXXX');
</script>

Step 2: Initialize and load

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

bstf.onload({
    worker: true,  // Load via proxy (recommended)
    callback: (result) => {
        console.log('Scripts loaded!', result);
    }
});

That's it. Your analytics load in the background without blocking your page.

Debug Mode

When debug: true, you'll see colorful logs in your console with emojis:

| Event | Emoji | Color | |-------|-------|-------| | Boostify init | 🚀 | Purple gradient | | OnLoad | ⚡ | Purple/violet | | Click | 👆 | Pink/coral | | Scroll | 📜 | Green/turquoise | | Observer | 👁️ | Cyan/blue | | Inactivity | 💤 | Pink/yellow | | Script loaded | 📦 | Bright green | | Style loaded | 🎨 | Pink |

Recommendation: Use Google Tag Manager

Instead of multiple scripts, use GTM as a single container:

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

Then add all your tags (Facebook Pixel, Hotjar, HubSpot, etc.) inside GTM. One proxy request, everything works normally.

Features

Trigger Events

| Method | Description | |--------|-------------| | bstf.onload() | Defer third-party scripts until page is interactive | | bstf.scroll() | Fire callback when user scrolls to a distance | | bstf.click() | Fire callback on element click | | bstf.observer() | Fire callback when element enters viewport | | bstf.inactivity() | Fire callback when user is inactive |

Content Injection

| Method | Description | |--------|-------------| | bstf.loadScript() | Dynamically inject JavaScript | | bstf.loadStyle() | Dynamically inject CSS | | bstf.videoPlayer() | Inject HTML5 video player | | bstf.videoEmbed() | Inject YouTube/Vimeo embed |

Examples

Load scripts on scroll

bstf.scroll({
    distance: 300,
    callback: async () => {
        await bstf.loadScript({
            url: 'https://example.com/library.js',
            appendTo: 'body'
        });
    }
});

Load scripts on click

bstf.click({
    element: document.getElementById('load-chat'),
    callback: async () => {
        await bstf.loadScript({
            url: 'https://example.com/chat-widget.js',
            appendTo: 'body'
        });
    }
});

Load when element is visible

bstf.observer({
    element: document.querySelector('.lazy-section'),
    callback: async () => {
        await bstf.loadStyle({
            url: 'https://example.com/section-styles.css',
            appendTo: 'head'
        });
    }
});

Detect user inactivity

bstf.inactivity({
    idleTime: 5000,
    name: 'my-inactivity',
    callback: () => {
        console.log('User has been inactive for 5 seconds');
    }
});

Proxy: Supported Services

When using worker: true, these services load through Boostify's proxy:

• Google Tag Manager
• Google Analytics
• Facebook Pixel
• Microsoft Clarity
• Hotjar
• LinkedIn Insight
• TikTok Analytics
• HubSpot
• jsDelivr, unpkg, cdnjs

Services not listed? Use worker: false (still deferred, just not proxied) or request the domain.

Documentation

Full documentation at boostifyjs.com

• On Load Events
• Scroll Events
• Click Events
• Observer Events
• Inactivity Detection
• Load Script
• Load Style

Support

• GitHub Issues
• Discord
• Sponsor

Changelog

[0.0.18] - 2026-01-31

Changed

• Library is now free and open source (no license required)
• Added worker option to onload() for proxy-based loading
• Added Web Worker support for background script fetching
• Callback now receives detailed result object (loadTime, method, scripts, etc.)
• Renamed destroyNoMatterWhat() to destroyAll()

[0.0.17] - 2025-08-15

Changed

• Library Validation

[0.0.16] - 2025-08-15

Changed

• Enhanced inactivity detection with dual-mode support (user idle/native idle)
• Added maxTime parameter for better idle timeout control
• Breaking: destroyinactivity() now requires event name parameter

Improved

• Event listeners now use passive mode for better performance
• More robust timer cleanup with centralized management

[0.0.15] - 2025-08-07

Changed

• Fix autoplay true/false in videoplayer

[0.0.14] - 2025-06-18

Changed

• Refactored event handling
• Added user inactivity detection feature

[0.0.13] - 2024-04-11

Changed

• Issue #2 fixed

[0.0.12] - 2024-04-04

Changed

• Updated package.json to resolve Netlify build issues