On Load Event

The Problem

Third-party scripts like Google Analytics, Facebook Pixel, and other tracking tools block your page from loading quickly. They compete for resources with your actual content, making your site feel slow.

If you have Google Analytics, Facebook Pixel, Hotjar, or any tracking script on your site, you probably have a main thread bottleneck. These scripts fight for CPU time with your actual content.

Before Boostify:

Page loads → Main thread blocked → Analytics loads → Facebook loads → Hotjar loads → Your content finally appears (user frustrated)

With Boostify:

Page loads → Your content appears immediately → User happy → Analytics loads quietly in background

The Solution

Mark your scripts with type="text/boostify" instead of type="text/javascript". Boostify will load them after your page is ready.

Quick Start (3 steps)

Step 1: Initialize Boostify

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

Step 2: Mark your scripts

Change this:

<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>

To this:

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

Step 3: Call onload

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

That’s it. Your scripts now load without blocking your page.

Complete Example

Here’s a full example with Google Analytics:

<!DOCTYPE html>
<html>
<head>
    <!-- These scripts are marked for deferred loading -->
    <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(){window.dataLayer.push(arguments);}
        window.gtag('js', new Date());
        window.gtag('config', 'G-XXXXX');
    </script>
</head>
<body>
    <h1>My Fast Website</h1>

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

        bstf.onload({
            worker: true,
            callback: (result) => {
                console.log('Analytics ready!');
            }
        });
    </script>
</body>
</html>

When Do Scripts Load?

Scripts load when any of these happen:

Event	What it means
User moves mouse	They’re actively browsing
User scrolls	They’re reading your content
User touches screen	Mobile interaction
Max time reached	Fallback after X milliseconds

This means: scripts load when the user is engaged, not when they’re waiting for your page.

Configuration Options

bstf.onload({
    worker: true,                    // Use proxy (recommended)
    maxTime: 2000,                   // Wait max 2 seconds
    eventsHandler: ['mousemove', 'scroll', 'touchstart'],
    callback: (result) => { }
});

Option	Default	What it does
`worker`	`false`	`true` = load via Boostify proxy (faster, recommended)
`maxTime`	`600`	Max milliseconds to wait before loading anyway
`eventsHandler`	`['mousemove', 'load', 'scroll', 'touchstart']`	Which user actions trigger loading
`callback`	`null`	Function called when done

The `worker` Option Explained

When worker: true, Boostify loads scripts through our proxy server. This has two benefits:

Faster loading: Scripts are fetched in a separate thread
No main thread blocking: Your page stays responsive

// Without worker (traditional)
bstf.onload({ worker: false });  // Scripts load directly from Google, Facebook, etc.

// With worker (recommended)
bstf.onload({ worker: true });   // Scripts load via Boostify's proxy

Supported Services

The proxy works with all major tracking services:

Service	Works?
Google Tag Manager	Yes
Google Analytics	Yes
Facebook Pixel	Yes
Microsoft Clarity	Yes
Hotjar	Yes
LinkedIn Insight	Yes
TikTok Analytics	Yes
jsDelivr, unpkg, cdnjs	Yes

What if my service is not listed?

Don’t worry, you have options:

Use worker: false - Your scripts still load deferred, just not through the proxy:
```
bstf.onload({ worker: false });  // Works with ANY script
```
Request the domain - Open an issue on GitHub and we’ll add it to the proxy whitelist.
Automatic fallback - If you use worker: true with an unsupported domain, Boostify automatically falls back to traditional loading. Nothing breaks.

Understanding the Callback

The callback tells you exactly what happened:

bstf.onload({
    worker: true,
    callback: (result) => {
        console.log(result);
    }
});

Result example:

{
    success: true,           // Did it work?
    method: 'worker',        // 'worker' or 'traditional'
    loadTime: 245,           // How long it took (ms)
    triggeredBy: 'mousemove', // What triggered loading
    scripts: [
        {
            url: 'https://googletagmanager.com/gtag/js',
            success: true,
            type: 'external',
            proxied: true
        },
        {
            success: true,
            type: 'inline'
        }
    ]
}

Common Questions

Will this break my analytics?

No. The scripts run exactly the same, just later. Your analytics will still track everything.

Will I lose conversions?

You might see 0.5-2% fewer tracked pageviews on very fast bounces. But your site will be faster, which typically increases conversions overall.

What if the proxy is down?

Boostify automatically falls back to traditional loading. Your scripts always load.

Can I use this with any script?

Yes, but it’s designed for third-party tracking scripts. Don’t use it for scripts your page needs immediately (like React or Vue).

More Examples

Google Analytics 4

<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(){window.dataLayer.push(arguments);}
    window.gtag('js', new Date());
    window.gtag('config', 'G-XXXXX');
</script>

Facebook Pixel

<script type="text/boostify">
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', 'YOUR_PIXEL_ID');
    fbq('track', 'PageView');
</script>

Hotjar

<script type="text/boostify">
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

Microsoft Clarity

<script type="text/boostify">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "YOUR_CLARITY_ID");
</script>

Recommendation: Use Google Tag Manager

Instead of adding multiple scripts with type="text/boostify", we recommend using Google Tag Manager (GTM) as your single container.

Why?

One script to load - GTM loads once through the proxy, everything else loads inside GTM
Easier management - Add/remove tags from GTM’s interface, no code changes needed
Better performance - One proxy request instead of multiple
Full functionality - All tags inside GTM work normally (cookies, tracking, pixels)

How it works

<!-- Only ONE script with type="text/boostify" -->
<script type="text/boostify" src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>
<script type="text/boostify">
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
</script>

Then add all your other tags (Analytics, Facebook Pixel, Hotjar, HubSpot, etc.) inside GTM.

What happens behind the scenes

Boostify loads GTM through the proxy (background, doesn’t block)
GTM starts and loads your configured tags
Those tags load normally and work 100% (cookies, tracking, everything)

The key benefit: GTM starts late, so all its child tags also start late. Your page is already interactive before any tracking begins.

On Scroll Events - Scroll-based triggers
Observer Events - Visibility-based triggers
On Click Events - User interaction triggers
Inactivity Detection - User inactivity triggers
Load Script - Dynamic script injection
How to Load Analytics Without Slowing Down Your Site - Full guide