Boostify

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:

EventWhat it means
User moves mouseThey’re actively browsing
User scrollsThey’re reading your content
User touches screenMobile interaction
Max time reachedFallback 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) => { }
});
OptionDefaultWhat it does
workerfalsetrue = load via Boostify proxy (faster, recommended)
maxTime600Max milliseconds to wait before loading anyway
eventsHandler['mousemove', 'load', 'scroll', 'touchstart']Which user actions trigger loading
callbacknullFunction called when done

The worker Option Explained

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

  1. Faster loading: Scripts are fetched in a separate thread
  2. 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:

ServiceWorks?
Google Tag ManagerYes
Google AnalyticsYes
Facebook PixelYes
Microsoft ClarityYes
HotjarYes
LinkedIn InsightYes
TikTok AnalyticsYes
jsDelivr, unpkg, cdnjsYes

What if my service is not listed?

Don’t worry, you have options:

  1. Use worker: false - Your scripts still load deferred, just not through the proxy:

    bstf.onload({ worker: false });  // Works with ANY script

  2. Request the domain - Open an issue on GitHub and we’ll add it to the proxy whitelist.

  3. 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?

  1. One script to load - GTM loads once through the proxy, everything else loads inside GTM
  2. Easier management - Add/remove tags from GTM’s interface, no code changes needed
  3. Better performance - One proxy request instead of multiple
  4. 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

  1. Boostify loads GTM through the proxy (background, doesn’t block)
  2. GTM starts and loads your configured tags
  3. 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.