---
title: Boostify - Full Documentation
description: Complete documentation for Boostify JavaScript performance toolkit
version: latest
last_updated: 2026-01-31
url: https://boostifyjs.com/llms-full.txt
---

# Boostify - Complete Documentation

> A JavaScript toolkit for web performance optimization. Load scripts, styles, and media on-demand using smart triggers.

## Quick Links

- Website: https://boostifyjs.com/
- Repository: https://github.com/andresclua/boostify
- NPM: https://www.npmjs.com/package/boostify
- Condensed version: https://boostifyjs.com/llms.txt

## Installation

```bash
npm install boostify
```

```javascript
import Boostify from 'boostify';

const bstf = new Boostify({
    debug: true,
    license: "YOUR-LICENSE-KEY"
});
```

Or via CDN:

```html
<script src="https://unpkg.com/boostify@latest/dist/Boostify.umd.js"></script>
```

---

## API Reference

### Content Injection Methods

#### loadScript(options)
Dynamically inject JavaScript files or inline scripts.

```javascript
await bstf.loadScript({
    url: 'https://cdn.example.com/library.js',
    appendTo: 'head',
    attributes: ["id=my-script", "data-custom=value"]
});

// Or inline script
await bstf.loadScript({
    inlineScript: `console.log('Hello');`,
    appendTo: 'body'
});
```

**Options:**
- `url` (string): URL of the script to load
- `inlineScript` (string): Inline JavaScript to execute
- `appendTo` (string|Element): Where to append ('head', 'body', or DOM element)
- `attributes` (array): Additional attributes ["key=value"]

#### loadStyle(options)
Dynamically inject CSS files or inline styles.

```javascript
await bstf.loadStyle({
    url: 'https://cdn.example.com/styles.css',
    appendTo: 'head'
});

// Or inline styles
await bstf.loadStyle({
    inlineStyle: `.my-class { color: red; }`,
    appendTo: 'head'
});
```

**Options:**
- `url` (string): URL of the stylesheet
- `inlineStyle` (string): Inline CSS to inject
- `appendTo` (string|Element): Where to append

#### videoEmbed(options)
Lazy-load video embeds (YouTube, Vimeo) with performance optimization.

#### videoPlayer(options)
Native video player with lazy loading and performance features.

---

### Trigger Events

#### onScroll(options)
Execute callbacks when user scrolls to a specific point.

```javascript
bstf.onScroll({
    callback: () => {
        console.log('User scrolled past threshold');
    },
    threshold: 500 // pixels from top
});
```

#### onClick(options)
Execute callbacks on element click.

```javascript
bstf.onClick({
    selector: '.load-more-btn',
    callback: async () => {
        await bstf.loadScript({ url: 'heavy-feature.js' });
    }
});
```

#### observer(options)
Execute callbacks when elements enter the viewport (Intersection Observer).

```javascript
bstf.observer({
    selector: '.lazy-component',
    callback: (element) => {
        element.classList.add('visible');
    },
    threshold: 0.5 // 50% visible
});
```

#### inactivity(options)
Detect user inactivity or browser idle state.

```javascript
// User idle mode - tracks mouse, keyboard, scroll
bstf.inactivity({
    callback: () => {
        console.log('User inactive for 5 seconds');
    },
    idleTime: 5000,
    name: 'my-idle-detector'
});

// Native idle mode - uses requestIdleCallback
bstf.inactivity({
    callback: () => {
        performBackgroundTasks();
    },
    maxTime: 3000,
    name: 'background-tasks'
});

// Destroy instance
bstf.destroyinactivity({ name: 'my-idle-detector' });
```

**Options:**
- `callback` (function): Function to execute
- `idleTime` (number): Ms of inactivity before triggering (user mode)
- `maxTime` (number): Maximum wait time in ms
- `events` (array|'none'): Events to monitor, or 'none' to disable
- `name` (string): Instance identifier (required for destroy)
- `debug` (boolean): Enable console logging

#### onLoad(options)
Execute callbacks after DOM/page load events. Best for third-party scripts.

---

## Common Use Cases

### Lazy Load Third-Party Scripts
```javascript
bstf.onScroll({
    threshold: 100,
    callback: async () => {
        await bstf.loadScript({ url: 'https://analytics.com/script.js' });
    }
});
```

### Load Heavy Features On-Demand
```javascript
bstf.onClick({
    selector: '#open-chat',
    callback: async () => {
        await bstf.loadScript({ url: 'chat-widget.js' });
        await bstf.loadStyle({ url: 'chat-widget.css' });
        initChatWidget();
    }
});
```

### Auto-Logout on Inactivity
```javascript
bstf.inactivity({
    callback: () => {
        if (confirm('Session expiring. Stay logged in?')) {
            resetSession();
        } else {
            window.location.href = '/logout';
        }
    },
    idleTime: 300000, // 5 minutes
    name: 'session-timeout'
});
```

### Defer Non-Critical Work
```javascript
bstf.inactivity({
    callback: () => {
        prefetchNextPageAssets();
        syncAnalyticsData();
    },
    events: 'none',
    maxTime: 5000,
    name: 'background-sync'
});
```

---

## Performance Benefits

- **Reduced Initial Load**: Load resources only when needed
- **Improved Core Web Vitals**: Better LCP, FID, CLS scores
- **Smart Resource Loading**: Trigger-based loading strategies
- **Browser-Friendly**: Uses native APIs like Intersection Observer and requestIdleCallback

================================================================================
COMPLETE DOCUMENTATION
================================================================================

## Guides

### Install
URL: https://boostifyjs.com/guides/install/
Description: Install Boostify in your project

Boostify is free and open source. No license required.

## How To install it?

You can install Boostify using npm or include it directly via CDN:

### npm

``` bash
npm install boostify
```

``` js
import Boostify from 'boostify';

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

### CDN (UMD)

Include Boostify directly in your HTML:

``` html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script src="https://unpkg.com/boostify@latest/dist/Boostify.umd.js"></script>
        <script>
            const bstf = new Boostify({ debug: true });
        </script>
    </body>
</html>
```

## Configuration

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `debug` | Boolean | `false` | Enable colorful console logging for debugging |

## Debug Mode

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

| 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 |

This makes it easy to see exactly what Boostify is doing and when.

## What's Next?

With Boostify installed, you can:

- [Load third-party scripts efficiently](/trigger-events/on-load/) with the proxy feature
- [Trigger events on scroll](/trigger-events/on-scroll/)
- [Inject scripts on click](/trigger-events/on-click/)
- [Detect user inactivity](/trigger-events/inactivity/)

---

### Introduction
URL: https://boostifyjs.com/guides/introduction/
Description: Why Boostify?

Modern websites need to be **fast** — both in loading time and interaction.

I created this library with one main goal in mind: to make it easy for developers to **manage key performance features without adding complexity**. From injecting styles and scripts to embedding videos and triggering events at the right moment, everything is designed to be straightforward and developer-friendly.

One of the main challenges was bringing all these tools into a single, well-structured library. But doing so turned out to be incredibly useful — not only for improving performance but also for **simplifying development workflows**.

Since Google PageSpeed plays a big role in how sites are ranked, we also included a utility to fetch performance scores from your site with minimal setup.

## Feedback

We welcome all types of feedback — whether it's about improving the codebase, fixing bugs, or suggesting new features.
The goal is to build a tool that's truly helpful for everyone.

## Next steps

- [Install Boostify](/guides/install/) - Get started in minutes
- [On Load Events](/trigger-events/on-load/) - Defer third-party scripts
- [Load Scripts](/content-injection/load-script/) - Dynamic script injection
- [Load Styles](/content-injection/load-style/) - Dynamic CSS injection

## From the blog

- [Boostify is Now Free](/blog/boostify-is-now-free/) - Our open source announcement
- [Load Third-Party Scripts via Proxy](/blog/third-party-scripts-proxy/) - New proxy feature
- [Core Web Vitals and the Funnel](/blog/core-web-vitals-marketing-funnel/) - Why performance matters

================================================================================

## Content Injection Documentation

### Load Javascript
URL: https://boostifyjs.com/content-injection/load-script/
Description: Dynamically injects a javascript file into a page or adds elements using the <script> tag.

## When to use it?

Dynamically injecting a JavaScript file into a page or adding elements using the `<script>` tag is a technique that can be particularly useful in several scenarios. This approach allows developers to load scripts on-demand, which can significantly improve the performance of a web application by reducing the initial load time. 

For instance, if a particular feature of a website, such as a **complex interactive chart** or a **third-party widget**, is only needed under certain conditions or after user interaction, it makes sense to load the related JavaScript file dynamically rather than loading it upfront with the rest of the page content.

By loading JavaScript files as and when they're needed, you facilitates lazy loading of modules or components, which can lead to a more responsive user experience, especially on devices with limited resources or slower internet connections.


## How To use it?

Given that this operation utilizes async/await, it must be encapsulated within a promise.


### Example with Async
``` js
(async () => {
    try {
        await bstf.loadScript({
            url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js',
            appendTo: 'head',
            attributes: ["id=jquery", "data-test=1"],
        });
        console.log('jQuery loaded successfully.');
    } catch (error) {
        console.error(error);
    }
})();
```


### Inline Script

Sometimes you might need only to add an inline script instead of loading one from a URL. In such cases, you can replace the `url` with `inlineScript`.

``` js
await bstf.loadScript({
    inlineScript: `console.log('This is inline script execution.');`, 
    appendTo: 'head'
});
```

## Configuration options

- url **`string`** The URL of the script to load.
- inlineScript: **`string`** javascript script to execute.
- attributes: **`array`** An array of strings representing additional attributes to set on the script element. Each attribute can be in the form of "key=value" or just "key" for boolean attributes.
- appendTo **`(string | Element)`** Optional. Specifies the element to which the script element will be appended. Can be a selector string ('head', 'body'), or a DOM element reference. Defaults to 'head'.

## Related

- [On Load Events](/trigger-events/on-load/) - Defer third-party scripts with proxy support
- [Load Style](/content-injection/load-style/) - Dynamic CSS injection
- [Dynamic jQuery Injection](/blog/jquery-injection-tutorial/) - Tutorial with examples
- [Custom JavaScript Injection](/blog/custom-js-injection-tutorial/) - Advanced techniques
- [Smart Resource Loading](/blog/conditional-resource-loading-tutorial/) - Conditional loading strategies

---

### Load Style
URL: https://boostifyjs.com/content-injection/load-style/
Description: Dynamically injects a stylesheet into a page or adds elements using the <style> tag.

## When to use it?


Dynamically loading stylesheets into a page or incorporating styles using the `<style>` tag offers significant flexibility and performance enhancements for web development. This approach is particularly beneficial when you need to apply different styles based on user interactions or specific conditions within your application. 

By dynamically injecting styles, you can ensure that your web pages **remain lightweight upon initial load**, therefore speeding up access times and improving the overall user experience. This method is especially useful for features that are not immediately visible or necessary, allowing for the progressive enhancement of the page as users engage with its content.



## How To use it?

### Example with Async

``` js
(async () => {
    try {
        await bstf.loadStyle({
            url: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
            appendTo: 'head',
            attributes: ["id=boostrap","data-test=2"],
        });
        console.log('Load boostrap on demand');
    } catch (error) {
        console.error(error);
    }
})();
```

### Example with Inline Style

For times when you just need to add a bit of CSS, the inlineStyle feature makes it possible.


``` js
(async () => {
    try {
        await bstf.loadStyle({
            inlineStyle: `h2 { background-color: coral; }`,
            appendTo: 'head'
        });
        console.log('Inline Style applied successfully.');
    } catch (error) {
        console.error(error);
    }
})();
```


## Configuration options

- url **`string`** The URL of the stylesheet to load.
- inlineStyle: **`string`** The CSS styles to apply inline. If provided, the styles will be applied directly to the page within a `<style>` tag.
- attributes: **`array`** An array of strings representing additional attributes to set on the style element. Each attribute can be in the form of "key=value" or just "key" for boolean attributes.
- appendTo **`(string | Element)`** Optional. Specifies the element to which the style element will be appended. Can be a selector string ('head', 'body'), or a DOM element reference. Defaults to 'head'.

## Related

- [Load Script](/content-injection/load-script/) - Dynamic JavaScript injection
- [On-Demand Tailwind CSS](/blog/tailwind-injection-tutorial/) - Load Tailwind dynamically
- [On-Demand CSS Libraries](/blog/css-library-injection-tutorial/) - Load animation libraries
- [Custom CSS Injection](/blog/custom-css-injection-tutorial/) - Theme switching and visual enhancements
- [Smart Font Fallbacks](/blog/smart-font-fallbacks-tutorial/) - Reduce CLS with font optimization

---

### Video Embed
URL: https://boostifyjs.com/content-injection/video-embed/
Description: Dynamically injects Embed Videos.

## When to use it?

Incorporating embeds, such as YouTube or Vimeo videos, into your website can impact its performance in various ways. 

- Firstly, **embeds often delay page** loading time because they require additional external requests to load content from another server. This can be particularly noticeable on pages with multiple embeds. 
- Secondly, multiple embeds come with tracking **scripts and cookies** for analytics and advertising purposes. 

Additionally, because embeds are external resources, your website's performance becomes partially dependent on the efficiency and availability of the **third-party server**. If the external server is slow or down, **it can negatively affect the user experience on your site**. 

Lastly, embeds might not be optimized for all devices or network conditions, potentially leading to a suboptimal display or functionality on mobile devices or in areas with poor internet connectivity.



## How To use it?


``` html
<div class="js--boostify-embed" style="aspect-ratio: 16/9;" data-url-youtube="https://www.youtube.com/embed/1y_kfWUCFDQ">

</div>
```

**Pls check how embed URL is typed**, `https://www.youtube.com/embed/1y_kfWUCFDQ` - who does not love kitties? 



``` js
document.querySelectorAll('.js--boostify-embed').forEach(element => {
    bstf.videoEmbed({
        url:element.getAttribute('data-url-youtube'), 
        autoplay: true,
        appendTo: element,
        style : { height: "auto"}
    });
})
```

## Configuration options

- url **`string`** The URL of the script to load.
- inlineStyle: **`string`** The CSS styles to apply inline. If provided, the styles will be applied directly to the page within a `<style>` tag.
- style **`object`**: Optional. An object containing CSS styles to apply to the iframe. By default, the iframe's width is set to `100%` and its height to `100%`. The `style` object allows for additional CSS properties to be defined, such as `border`, `margin`, or an explicit `height`. The function applies these styles to the iframe element.
- attributes: **`array`** An array of strings representing additional attributes to set on the script element. Each attribute can be in the form of "key=value" or just "key" for boolean attributes.
- appendTo **`(string | Element)`** Optional. Specifies the element to which the script element will be appended. Can be a selector string ('head', 'body'), or a DOM element reference. Defaults to 'head'.

## Related

- [Video Player](/content-injection/video-player/) - Native HTML5 video injection
- [Observer Events](/trigger-events/observer/) - Load videos when visible
- [On Click Events](/trigger-events/on-click/) - Load videos on user interaction
- [Improve CLS with Dimensions](/blog/improve-cls-with-dimensions/) - Prevent layout shifts with video placeholders

---

### Video Player
URL: https://boostifyjs.com/content-injection/video-player/
Description: Dynamically injects a video tag into a page using <video> tag.

## When to use it?

Including videos on your website can affect its performance due to several reasons. Videos often come with large file sizes, which can significantly slow down page loading times. This slowdown occurs even if the video isn't immediately necessary for the visitor. 

Additionally, **auto-playing videos can consume a lot of bandwidth**, especially for users on limited data plans, leading to a negative browsing experience. 

Moreover, excessive video content **can drain battery life on mobile devices more quickly**. It's also worth mention that videos require additional processing power for playback, which can be an issue for older or less powerful devices, potentially leading to stuttering or buffering issues that detract from the user experience.

## How To use it?

On your Html first define where you want to place that video

``` html
<div class="js--boostify-player" style="aspect-ratio: 16/9;">

</div>

```

Note: Understanding the aspect ratio of this div is crucial to prevent **Cumulative Layout Shift (CLS)**, which Google PageSpeed Insights penalizes. It can also impact your animations and other items that are below the video.


``` js
document.querySelectorAll('.js--boostify-player').forEach(element => {
    bstf.videoPlayer({
      url: {
          ogg: 'path.ogg',
          mp4: 'path.mp4',
      },
      attributes: {
          class: "Test",
          id: "MyVideo",
          loop: true,
          muted:true,
          controls:true,
          autoplay:true,
      },
      appendTo: element,
  });
})
```


  Note: **A good practice** is providing all attributes, url and more items as data-attributes of your parent div `document.querySelectorAll('.js--boostify-player')`


``` html
<div class="js--boostify-player" style="aspect-ratio: 16/9;" data-url-mp4="yourVideoPath.mp4">

</div>

```

``` js
document.querySelectorAll('.js--boostify-player').forEach(element => {
    bstf.videoPlayer({
      url: {
          mp4: getAttribute('data-url-mp4')
      },
      style:{ height:'200px'},
      attributes: {
          class: "Test",
          id: "MyVideo",
          loop: true,
          muted:true,
          controls:true,
          autoplay:true,
          playsinline:true
      },
      appendTo: element,
  });
})
```

## Configuration options

- url **`object`** - Specifies the video URLs. It should contain properties for different video formats to ensure cross-browser compatibility.

  - mp4 **`string`** The URL for the Mp4 video format.
  - ogg **`string`** The URL for the Ogg video format.

- attributes `object` - Defines various attributes to control video playback behavior and appearance. Here are some common attributes you can set:
    - class: **`string`** CSS class name(s) for styling the video player.
    - id: **`string`** A unique identifier for the video element.
    - loop: **`boolean`** If set to true, the video will loop continuously.
    - muted: **`boolean`** If true, the video will start playing without sound.
    - controls: **`boolean`** Shows the video player controls when true.
    - autoplay: **`boolean`** If true, the video will start playing as soon as it is ready.
    - playsinline: **`boolean`**  If true, the video will play inline on mobile devices, instead of going fullscreen.

- appendTo: `(string | Element)` Specifies the element that the video player will be appended to. This can be either a CSS selector string (e.g., '.my-video-container') or a direct DOM element reference. If not provided, you'll need to specify where the video player should be added in your document.

- style `object`: CSS styles to apply to the video player. The object should contain CSS property names as keys and CSS values as values. For example, `{ width: '100px', height: '200px' }`. The width is always set to 100%, and height is set based on the provided value or defaults to 'auto' if not specified. Additional styles provided in this object are applied to the video element.

## Related

- [Video Embed](/content-injection/video-embed/) - YouTube/Vimeo embed injection
- [Observer Events](/trigger-events/observer/) - Load videos when visible
- [Inactivity Detection](/trigger-events/inactivity/) - Pause videos when user is inactive
- [Improve CLS with Dimensions](/blog/improve-cls-with-dimensions/) - Prevent layout shifts with video placeholders

================================================================================

## Trigger Events Documentation

### Observer Event
URL: https://boostifyjs.com/trigger-events/observer/
Description: Fire events intersection certain object.

## When to use it?

Utilizing this event is an **excellent strategy for loading specific content at just the right moment—when** a particular element comes into view. This functionality greatly simplifies the implementation of **infinite scrolling**, seamlessly integrating the dynamic addition of content as users scroll through a page, all while maintaining optimal performance. 

Moreover, this approach enhances the ability to dynamically introduce content, advertisements, or interactive widgets based on user interaction,**efficiently managing resources** and tailoring content delivery to align with user preferences and actions.

## How To use it?

This setup includes several options that configure how the observation behaves. Understanding the root, rootMargin, and threshold options is crucial for effectively leveraging this observer mechanism.

The `root` option in an Intersection Observer defines the viewport for visibility checks; when set to `null`, the browser's viewport is used. For visibility within a specific container, that container should be specified as the `root`. The `rootMargin` option, mirroring CSS margin syntax, allows for adjusting the visibility area with margins defined in pixels or percentages, with a default of `0px`, affecting when the visibility check triggers. 

The `threshold` option sets the visibility percentage required to trigger the callback, ranging from 0 to 1. A threshold of 0.01 means the callback triggers when just 1% of the target is visible, suitable for early detections, while a threshold of 1.0 requires full visibility. Multiple thresholds can be specified as an array, enabling the callback to trigger at various visibility levels, facilitating granular control over visibility-triggered actions.



``` js
bstf.observer({
    options: {
        root:null,
        rootMargin: '0px',
        threshold: 0.5
    },
    element:document.getElementById('target'),
    callback: () =>{
        console.log('callback executed target observer!');
    }
})
```

In the given scenario, the objective is to initiate the loading of a stylesheet upon reaching an element identified by the class `observed-element`.

``` js
bstf.observer({
    options: {
        root:null,
        rootMargin: '0px',
        threshold: 0.01
    },
    element:document.querySelector('.observed-element'),
    callback: async () =>{
       await bstf.loadStyle({ 
            inlineStyle: `
                body{color:green;background:grey;transition:all 0.6s ease-in-out;}
            `, 
            appendTo: document.getElementById('embed-form')
        });
    }
})
```

## Configuration options

- debug `Boolean` This boolean flag, when set to true, activates console logging for debugging purposes.

- options: `object` This is an object containing several sub-options that configure the behavior of the observer
    - root: `HTML Element | null`- *`null` by default *  Specifies the DOM element that acts as the viewport for checking the target element's visibility. If set to null or not provided, the browser's viewport is used as the default observation area. This is useful for scenarios where observation needs to occur within a specific scrollable area rather than the entire document.
    - rootMargin: `string` - *`0`px by default* - Expects a value similar to the CSS margin property (e.g., "10px 20px 30px 40px" for top, right, bottom, and left margins, respectively). This property extends or contracts the visibility area around the root, using units like px or %, enabling events to trigger just before the target becomes visible or starts to exit the visibility area.
    - threshold:` number` - *`0.01` px by default* - Determines the percentage of the target's visibility that triggers the callback, ranging from 0 to 1. A value of 0.01 means the callback triggers when as little as 1% of the target is visible, suitable for detecting initial appearances, while a value of 1.0 requires the entire element to be visible. An array can specify multiple thresholds, allowing the callback to trigger at various visibility levels.

- element: `HTML Element` - *`document.querySelector('.js--observer-boostify')` by default* -  The element property is crucial for the observer's functionality, as it specifies the target DOM element that the observer will monitor for visibility changes. The example uses document.querySelector('.observed-element') to select the element.

- callback: `Function` This function is executed whenever the observed element's visibility crosses one of the specified thresholds in the observer's options.



### Utilities


Additionally, there's a public 'destroy' method available, which requires specifying the observer you wish to remove:

``` js
bstf.destroyobserver({element:document.querySelector('.observed-element')})
```

If you need to refresh the observer, it will delete the existing event listener and establish a new one.
``` js
bstf.refreshObserverEvents({element: document.querySelector('.observed-element')});
```

:::tip[Info]
There are helper functions that you can use inside your callback:

- [**Load Style**](/content-injection/load-style/)
- [**Load Scripts**](/content-injection/load-script/)
- [**Video Player**](/content-injection/video-player/)
- [**Video Embed**](/content-injection/video-embed/)
:::

## Related

- [On Load Events](/trigger-events/on-load/) - Defer third-party scripts
- [On Scroll Events](/trigger-events/on-scroll/) - Scroll-based triggers
- [Inactivity Detection](/trigger-events/inactivity/) - User inactivity triggers
- [Smart Resource Loading](/blog/conditional-resource-loading-tutorial/) - Visibility-based loading strategies

---

### Inactivity Detection
URL: https://boostifyjs.com/trigger-events/inactivity/
Description: Monitors user activity and executes callbacks when the user becomes inactive for a specified period of time, or when the browser is idle.

## When to use it?

Detecting user inactivity is crucial for enhancing both user experience and performance optimization in modern web applications. This functionality is particularly valuable when you need to:

- **Conserve resources** by pausing animations, video playback, or other resource-intensive operations when users aren't actively engaging with your site
- **Enhance security** by automatically logging out users after periods of inactivity
- **Improve engagement** by displaying targeted messages, promotions, or suggestions when users appear to be idle
- **Gather analytics** on user engagement patterns and session activity
- **Optimize performance** by deferring non-critical tasks until the browser is idle

By implementing inactivity detection, you can create more responsive applications that intelligently adapt to user behavior, leading to improved performance and more personalized user experiences.

## Detection Modes

The inactivity detection supports two distinct modes:

### User Idle Mode
When you provide an `idleTime` parameter, the system tracks user activity through events like mouse movements, scrolling, and keyboard input. The callback executes when no activity is detected for the specified duration.

### Native Idle Mode
When `idleTime` is not provided, the system uses the browser's `requestIdleCallback` API to detect when the browser is idle. This is useful for deferring non-critical work until the browser has spare time.

## How To use it?

### Basic Example - User Idle Mode

```js
// Basic user inactivity detection
bstf.inactivity({
    callback: () => {
        console.log('User has been inactive');
        document.getElementById('idle-message').style.display = 'block';
    },
    idleTime: 5000, // 5 seconds
    name: 'basic-inactivity',
    debug: true
});
```

### Native Idle Mode Example

```js
// Use browser's native idle detection
bstf.inactivity({
    callback: () => {
        console.log('Browser is idle - performing background tasks');
        // Perform non-critical tasks like analytics, preloading, etc.
        performBackgroundSync();
    },
    // No idleTime specified - uses native idle detection
    maxTime: 3000, // Maximum wait time of 3 seconds
    name: 'background-tasks',
    debug: true
});
```

### Example with Custom Events and Named Instance

For more control, you can specify which events to monitor and provide a name for your inactivity instance:

```js
// Advanced inactivity detection
bstf.inactivity({
    callback: () => {
        // Pause video playback when user is inactive
        document.querySelector('video').pause();
        // Show a message
        document.getElementById('activity-status').textContent = 'Inactive';
    },
    idleTime: 10000, // 10 seconds
    events: ['mousemove', 'scroll', 'keydown', 'click', 'touchstart'],
    name: 'video-player-inactivity',
    debug: true
});

// Later, destroy this specific inactivity instance
document.getElementById('resume-btn').addEventListener('click', () => {
    bstf.destroyinactivity({
        name: 'video-player-inactivity'
    });
});
```

### Example with No Event Monitoring

You can disable event monitoring entirely by setting `events: 'none'`. This is useful when you only want to use native idle detection without any user activity tracking:

```js
// Native idle detection without event monitoring
bstf.inactivity({
    callback: () => {
        console.log('Browser idle detected - no user events monitored');
        updateCacheInBackground();
    },
    events: 'none', // Disable all event monitoring
    maxTime: 5000,
    name: 'cache-updater'
});
```

### Example with Auto-Logout

A robust implementation of auto-logout functionality:

```js
// Auto-logout after inactivity
const setupInactivityMonitor = () => {
    bstf.inactivity({
        callback: () => {
            // Show a confirmation dialog
            if (confirm('You have been inactive. Would you like to stay logged in?')) {
                console.log('User chose to stay logged in');
                // Reset the inactivity timer by destroying and recreating
                bstf.destroyinactivity({ name: 'security-auto-logout' });
                setupInactivityMonitor(); // Restart monitoring
            } else {
                // Perform logout
                console.log('Logging out due to inactivity');
                window.location.href = '/logout';
            }
        },
        idleTime: 300000, // 5 minutes
        maxTime: 310000, // Slightly higher than idleTime
        name: 'security-auto-logout'
    });
};

setupInactivityMonitor();
```

## Configuration options

- **callback** `function` **(Required)**: The function to execute when the user becomes inactive or the browser is idle.
- **idleTime** `number` (Optional): Time in milliseconds to consider the user inactive. When not provided, uses native browser idle detection. **Important**: Must be less than `maxTime`.
- **maxTime** `number` (Optional): Maximum time in milliseconds before forcing callback execution. Defaults to 2000 (2 seconds). Acts as a safety net to ensure the callback executes.
- **events** `array|string` (Optional): Array of events to monitor for user activity, or the string `'none'` to disable event monitoring. Defaults to `['mousemove', 'scroll', 'keydown', 'mousedown', 'mouseup', 'click', 'touchstart', 'touchend']`.
- **name** `string` (Optional): Custom name for the inactivity instance. **Required** when destroying specific instances.
- **debug** `boolean` (Optional): Enable debug mode to see console messages. Defaults to false.

## Destroying Inactivity Detection

To stop monitoring for inactivity, use the `destroyinactivity` method. Note that the `name` parameter is now required:

```js
// Destroy a specific inactivity instance (name is required)
bstf.destroyinactivity({
    name: 'my-inactivity-instance'
});
```

## Important Constraints

1. **idleTime must be less than maxTime**: When using user idle mode (providing `idleTime`), ensure that `idleTime` is smaller than `maxTime`. If not, the system will automatically adjust `idleTime` to be 100ms less than `maxTime`.

2. **Name is required for destroy**: Unlike previous versions, you must provide a `name` when destroying an inactivity instance. There's no longer an option to destroy all instances at once.

## Performance Considerations

The inactivity detection uses efficient event listeners and modern browser features like `requestIdleCallback` when available to minimize performance impact. However, keep these best practices in mind:

- Use reasonable idle times (not too short) to avoid unnecessary callback executions
- Keep callback functions lightweight and efficient
- Consider destroying inactivity detection when it's no longer needed
- Limit the number of events monitored to only those necessary for your use case
- Use `events: 'none'` when you only need native idle detection without user activity tracking
- In native idle mode, the browser determines when to execute based on available resources

## Browser Compatibility

- **User Idle Mode**: Works in all modern browsers
- **Native Idle Mode**: Uses `requestIdleCallback` when available, falls back to `setTimeout` in older browsers
- The `events: 'none'` option works in all browsers but is most beneficial when combined with native idle mode

## Related

- [On Load Events](/trigger-events/on-load/) - Defer third-party scripts
- [Observer Events](/trigger-events/observer/) - Visibility-based triggers
- [On Click Events](/trigger-events/on-click/) - User interaction triggers
- [Smart Resource Loading](/blog/conditional-resource-loading-tutorial/) - Conditional loading strategies

---

### On Scroll Event
URL: https://boostifyjs.com/trigger-events/on-scroll/
Description: Fire Event on Scroll

## When to use it?

On Scroll Event aims to manage scroll events on a web page. It provides a way to execute a callback function when the user scrolls a specified distance down the page, to track how far users scroll for analytics purposes, or even Implementing "scroll to reveal" animations or features.



## How To use it?

``` js
boostify.scroll({   
    distance:300,
    callback: async () =>{
       console.log('callback when user scroll more than 300 pixels')
    }
})
```

## Configuration options


- distance: **`Number`** - *(`100`px by default)* - The scroll distance from the top of the page (in pixels) at which the callback function should be executed.
- name: **`String`** - Optional value if you have two triggers with same distance, and you want to differentiate.
- callback: **`function`**  A function to be called once the scroll distance is reached. This function can contain any actions you want to perform at that point.



### Utilities

Occasionally, you may encounter scenarios where it becomes necessary to eliminate or deactivate the scroll event. This could arise for various reasons, perhaps to enhance user experience or to adjust to changes in the webpage's content or functionality.

``` js
// you need to specify the distance trigger you want to eliminate. 
boostify.destroyscroll({distance:300}) 
```

In certain situations, you might encounter a scenario where two triggers are set at the same distance. Rest assured, this poses no issue.
``` js
// Instance A
boostify.scroll({    
    distance:300,
    callback: async () =>{
       console.log('callback at 300 px A')
    }
})
// Instance B
boostify.scroll({    
    distance:300,
    callback: async () =>{
       console.log('callback at 300px B')
    }
})
```


Should you face a scenario where it's necessary to remove one of two events set at the same distance, you have the option to assign a name to each event for easy identification and tracking.

``` js
// Instance A
boostify.scroll({    
    distance:300,
    name:'A',
    callback: async () =>{
       console.log('callback at 300 px A')
    }
})
// Instance B
boostify.scroll({    
    distance:300,
    name:'B',
    callback: async () =>{
       console.log('callback at 300px B')
    }
})
// Specify which event to remove
boostify.destroyscroll({distance: 300, name: "B"}); 

```

<Callout icon="💡" type="info">
There is helper functions that you can use inside your callback: 
    - **<a href="./load-style" class="font-medium underline underline-offset-4" target="_blank">Load Style</a>** 
    - **<a href="./load-style" class="font-medium underline underline-offset-4" target="_blank">Load Scripts</a>**
    - **<a href="./video-player" class="font-medium underline underline-offset-4" target="_blank">Video Player</a>**
    - **<a href="./video-embed" class="font-medium underline underline-offset-4" target="_blank">Video Embed</a>**
</Callout>

## Real World Examples

#### Example 1
This example will change the body of your website at 300 pixels, it is beneficial if you want to make some smooth transition and this want to include that `<style>` to the body
``` js
boostify.scroll({    
    distance:300,
    callback: async () =>{
        await boostify.loadStyle({ 
            inlineStyle: `
                body{background:red; transition: background 0.5s ease-in-out;}
            `, 
            appendTo: 'body'
        });
    }
})
```
---
#### Example 2
In this example you are loading [Tiny Slider](https://github.com/ganlanyuan/tiny-slider)  when the user scroll 200 pixels, this approach is advantageous because it optimizes your bundle size and reduces the JavaScript processing time, significantly improving performance.
``` js
boostify.scroll({    
    distance:200,
    callback: async () =>{
        await boostify.loadStyle({
            url: 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css',
            attributes: ['media=all'],
            appendTo: 'head'
        });
        await bstf.loadScript({
            url: 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js',
            attributes: ['type="text/javascript"'],
            appendTo: 'body'
        });
        var slider = tns({
            container: '.my-slider',
            items: 3,
            slideBy: 'page',
            autoplay: true
        });
    }
})
```

## Related

- [On Load Events](/trigger-events/on-load/) - Defer third-party scripts
- [Observer Events](/trigger-events/observer/) - Visibility-based triggers
- [On Click Events](/trigger-events/on-click/) - User interaction triggers
- [Load Script](/content-injection/load-script/) - Dynamic JavaScript injection
- [Smart Resource Loading](/blog/conditional-resource-loading-tutorial/) - Conditional loading strategies
```

---

### Click Event
URL: https://boostifyjs.com/trigger-events/on-click/
Description: Fire Event on Click

## When to use it?


This method not only improves the look and feel of web apps but also makes adding **click events easier**, like opening modals or starting animations. **It's efficient because it loads content only when needed**, which helps web pages load faster and use less data. This means a better experience for users and less strain on their devices.

It's also flexible, allowing developers to easily add various libraries,**from modals to request handlers**. This makes adding new features simple, without much coding. The method is designed to be fast and user-friendly, perfect for interactive projects. It enables sleek and effective web apps, meeting modern development needs with less effort. It's all about making web apps that are good-looking, fast, and easy to use.

## How To use it?

``` js
bstf.click({    
    element:document.getElementById('js--fire'),
    callback: async () =>{
       console.log('callback when user click document.getElementById('js--fire')')
    }
})
```

## Configuration options

- element: **`HTML`**  - *`document.querySelector('.js--click-boostify')`by default*  - The DOM element(s) to attach the click event listener to. This can be a single DOM element or an array of DOM elements.

- callback: **`Function`** A function to be executed when the click event is triggered.

**Note** There is a public method `destroy` in case you want to destroy this event, you just need to provide the fire event.

``` js
bstf.destroyclick({element:document.getElementById('js--fire')}) // DOM element mandatory
```

<Callout icon="💡" type="info">
    There is helper functions that you can use inside your callback: 
    - **<a href="./load-style" class="font-medium underline underline-offset-4" target="_blank">Load Style</a>** 
    - **<a href="./load-style" class="font-medium underline underline-offset-4" target="_blank">Load Scripts</a>**
    - **<a href="./video-player" class="font-medium underline underline-offset-4" target="_blank">Video Player</a>**
    - **<a href="./video-embed" class="font-medium underline underline-offset-4" target="_blank">Video Embed</a>**
</Callout>

## Real World Examples

#### Example 1
This example load tiny slider stylesheet & library, and finally instciate with a simple configuration.
``` js

bstf.click({
    element:document.getElementById('js--click-boostify'),
    callback: async () =>{
        await bstf.loadStyle({
            url: 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css',
            attributes: ['media=all'],
            appendTo: 'head'
        });
        await bstf.loadScript({
            url: 'https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js',
            attributes: ['type="text/javascript"'],
            appendTo: 'body'
        });
        var slider = tns({
            container: '.my-slider',
            items: 3,
            slideBy: 'page',
            autoplay: true
        });
    }
})
```

## Related

- [On Load Events](/trigger-events/on-load/) - Defer third-party scripts
- [On Scroll Events](/trigger-events/on-scroll/) - Scroll-based triggers
- [Observer Events](/trigger-events/observer/) - Visibility-based triggers
- [Load Script](/content-injection/load-script/) - Dynamic JavaScript injection
- [Dynamic jQuery Injection](/blog/jquery-injection-tutorial/) - Load libraries on click
```

---

### On Load Event
URL: https://boostifyjs.com/trigger-events/on-load/
Description: Defer third-party scripts to improve page performance

## 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

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

### Step 2: Mark your scripts

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

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

### Step 3: Call onload

```js
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:

```html
<!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

```js
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:

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

```js
// 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:

1. **Use `worker: false`** - Your scripts still load deferred, just not through the proxy:
   ```js
   bstf.onload({ worker: false });  // Works with ANY script
   ```

2. **Request the domain** - Open an issue on [GitHub](https://github.com/andresclua/boostify/issues) 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:

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

Result example:
```js
{
    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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<!-- 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.

---

## Related

- [On Scroll Events](/trigger-events/on-scroll/) - Scroll-based triggers
- [Observer Events](/trigger-events/observer/) - Visibility-based triggers
- [On Click Events](/trigger-events/on-click/) - User interaction triggers
- [Inactivity Detection](/trigger-events/inactivity/) - User inactivity triggers
- [Load Script](/content-injection/load-script/) - Dynamic script injection
- [How to Load Analytics Without Slowing Down Your Site](/blog/third-party-scripts-proxy/) - Full guide

================================================================================

## FAQ

No FAQ available.

================================================================================

## Blog Articles

The following blog articles provide tutorials, best practices, and insights for web performance optimization with Boostify.

### Core Web Vitals and the Funnel: What Marketing Teams Can’t Afford to Ignore
URL: https://boostifyjs.com/blog/core-web-vitals-marketing-funnel/
Description: From visibility to conversion, Core Web Vitals silently shape your marketing funnel. Here’s how poor metrics like CLS, LCP, and FID can hurt performance—and how to fix them.
Tags: Web Performance
Date: Wed Jul 26 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

You probably don’t think about **your marketing funnel** in terms of page speed.
But you should.

Because every second of delay, every visual shift, every lag between a tap and a response—**they’re quietly breaking your funnel** in ways that analytics dashboards don’t always reveal.

Let’s start at the top.

**Awareness**.
Your SEO strategy is driving traffic. But Google’s algorithm favors pages with high Core Web Vitals scores—specifically LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift).
If your site scores poorly, **you rank lower**, show up less often, and pay more for the same visibility in search and ads.

Engagement.
Let’s say you’ve won the click. But the hero image takes too long to load (poor LCP), or the layout shifts as elements render (high CLS). The user starts to scroll, tries to click a CTA, and the button jumps down the screen.
That moment—where they feel “this site isn’t ready for me”—is enough to trigger doubt. And doubt kills engagement.

**Conversion**.
Here’s where the funnel either works—or leaks.
If your site lags when a user starts to interact (high FID), forms feel slow, animations stutter, or the experience just isn’t smooth, the drop-off begins. Not because your offer wasn’t good, but because your experience didn’t match the user’s expectations.

The truth is: **Core Web Vitals are silent killers of conversion**.
They don’t shout. They don’t crash the page. But they make everything feel slightly off—and users don’t stick around when things feel off.

That’s why treating performance like a backend issue is a mistake.
This is marketing territory.

And it’s exactly what [Boostify](https://boostifyjs.com/)  was built for.

By restructuring how content loads, prioritizing speed, and eliminating layout shifts, Boostify helps your funnel flow the way you designed it. No code rewrites. No massive redesign. Just measurable improvements at every step—from the first pixel to the final click.

It’s time to treat performance not as technical debt, but as **funnel optimization**.

Because if your pages don't perform, your funnel doesn't either.
And if your funnel leaks, your growth stalls—no matter how brilliant the campaign.

---

## Related

- [Why Lighthouse Is a Marketing Tool](/blog/beyond-lighthouse-scores/) - Understanding Lighthouse as a strategic tool
- [The Business Case for Web Performance](/blog/website-performance-is-a-business/) - Why speed matters for your bottom line
- [Improve CLS with Image Dimensions](/blog/improve-cls-with-dimensions/) - Simple fix for layout shifts
- [On Load Event Documentation](/trigger-events/on-load/) - Defer scripts to improve Core Web Vitals

---

### Why Lighthouse Is a Marketing Tool, Not Just a Developer Checklist
URL: https://boostifyjs.com/blog/beyond-lighthouse-scores/
Description: Google Lighthouse doesn’t just measure performance—it reflects how your brand is perceived by users and search engines. CMOs should treat it as a strategic tool to drive visibility, trust, and growth.
Tags: SEO Strategy
Date: Tue Jul 25 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Ask most marketers what Google Lighthouse is, and you’ll probably hear something like:
“Ah, that’s a dev thing, right? A performance report?”

Technically, yes. **But strategically, it’s much more than that.**

Lighthouse gives you a snapshot of how Google—and your users—experience your site. It tells you if your page is slow to load, if it feels clunky to interact with, if content shifts unexpectedly, or if elements are blocking the user’s path to conversion.

**And all of that affects your visibility, your cost of acquisition, and your brand perception.**

A poor Lighthouse score is not just a red flag for your developers. It’s a signal that your marketing investment isn’t being delivered as promised. You may have the right messaging and audience—but if your landing page takes five seconds to render or shifts around while loading, you’ve already lost the user’s trust before they even engage.

Let’s be blunt: Google takes this seriously. Core Web Vitals are part of the ranking algorithm. That means your organic traffic, SEO health, and even ad performance (yes, Quality Score matters) are all tied to these metrics.

And here’s where smart tooling can change the game.

[Boostify](https://boostifyjs.com/) wasn’t built for engineers who want cleaner code. It was built for businesses who want faster growth. It helps ensure that Lighthouse sees your site the way you want it to be seen: fast, interactive, and stable. No layout jumps. No render-blocking scripts. No user confusion.

It’s not about chasing a perfect 100. It’s about understanding what those scores represent:

- A fast **First Contentful Paint** = stronger first impressions
- Low **Cumulative Layout Shift** = higher trust and fewer bounces
- Fast **Time to Interactive** = smoother funnels and fewer drop-offs

In short, Lighthouse tells you **what your users feel but don’t say**.

And if you’re in charge of growth, retention, or visibility—**you need to listen**.

Boostify helps you not just improve those scores, but translate them into real business outcomes. Because better performance doesn’t just make your dev team happy. It makes your campaigns convert better, rank higher, and cost less.

That's not technical debt. **That's marketing lift**.
And it starts with how you read the signals Lighthouse is giving you.

---

## Related

- [Core Web Vitals and the Funnel](/blog/core-web-vitals-marketing-funnel/) - How performance metrics affect your entire user journey
- [The Business Case for Web Performance](/blog/website-performance-is-a-business/) - Why speed and stability are marketing tools
- [Load Third-Party Scripts Without Blocking](/blog/third-party-scripts-proxy/) - How to load analytics without hurting performance
- [On Load Event Documentation](/trigger-events/on-load/) - Defer third-party scripts to improve your scores

---

### The Business Case for Web Performance: Why Speed and Stability Are Marketing Tools
URL: https://boostifyjs.com/blog/website-performance-is-a-business/
Description: Poor web performance doesn’t just hurt UX—it drains budgets, damages SEO, and breaks trust. Here's why defining image dimensions and reducing layout shifts are essential for brand growth.
Tags: Web Performance
Date: Mon Jul 24 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

We spend so much time perfecting our copy, refining ad creative, crafting the brand story—yet we often overlook the single point where everything either works or fails: **performance**.

Because it doesn’t matter how clever your message is if the page takes too long to appear. It doesn’t matter how targeted your campaign is if the landing page shifts around as it loads.

**Performance isn’t just a technical metric anymore. It’s a business metric.**

And it affects every stage of your funnel.

Users today expect immediacy. They don’t wait. A delay of more than two or three seconds? That’s enough to lose them. They might not even know why they left—it just didn’t feel smooth. And that feeling? It sticks. It becomes your brand.

Now zoom out. Think about the marketing dollars you’re investing—paid campaigns, content strategies, SEO. If users land on a slow, unstable experience, **you’re not just losing conversions** **—you’re losing trust and wasting budget.**

And then there's Google. With Core Web Vitals like **Cumulative Layout Shift (CLS)** now impacting search rankings, performance directly influences how visible you are in the first place. Pages that shift unexpectedly while loading—often because images are missing width and height attributes—get penalized. That’s not just a developer issue. That’s fewer impressions, less traffic, and reduced ROI.

This is where tools like [Boostify](https://boostifyjs.com/) come in.

Built for marketing outcomes—not just clean code—Boostify restructures how assets load. It ensures your most important content appears quickly, defers anything that can wait, and stabilizes layout to reduce bounce-inducing shifts. It works alongside your stack, without requiring a costly rebuild.

You're not chasing a Lighthouse score for the sake of it. You're reclaiming budget that was leaking out of your funnel unnoticed. You’re delivering on the promise your ads and emails make. You’re removing the friction between curiosity and conversion.

Because in digital, **your site’s speed is your first impression**.
And **stability is trust**.

If you're serious about growth, performance isn’t optional.
It’s foundational.

And Boostify helps you make it part of your marketing strategy—not just your codebase.

---

## Related

- [Core Web Vitals and the Funnel](/blog/core-web-vitals-marketing-funnel/) - How CLS, LCP, and FID affect your funnel
- [Why Lighthouse Is a Marketing Tool](/blog/beyond-lighthouse-scores/) - Lighthouse as a strategic business tool
- [Improve CLS with Image Dimensions](/blog/improve-cls-with-dimensions/) - Quick win for layout stability
- [Getting Started with Boostify](/guides/introduction/) - Start improving your performance today

---

### Boost Your UI with On-Demand CSS Libraries
URL: https://boostifyjs.com/blog/css-library-injection-tutorial/
Description: Learn how to dynamically load popular CSS libraries like Animate.css or Bootstrap to enhance your site without sacrificing initial load performance.
Tags: Coding, Performance, CSS, Animation
Date: Thu Jun 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

# Dynamic CSS Library Injection: Enhanced UI Without the Wait

CSS libraries like Animate.css, Bootstrap, or Bulma can add powerful styling and animation capabilities to your site. However, loading these libraries upfront can significantly increase your initial page load time—especially when their features might only be needed for specific interactions.

## The Smart Approach: Load CSS Libraries On-Demand

With Boostify's content injection capabilities, you can load CSS libraries dynamically, exactly when you need them:

```js
(async () => {
    try {
        // Load Animate.css when user interacts with a specific element
        document.getElementById('show-animation').addEventListener('click', async () => {
            await bstf.loadStyle({
                url: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css',
                appendTo: 'head',
                attributes: ["id=animate-css"],
            });
            console.log('Animate.css loaded successfully.');
            
            // Now you can apply animation classes
            document.getElementById('animated-element').className += ' animate__animated animate__bounce';
        });
        
    } catch (error) {
        console.error(error);
    }
})();
```

## The Benefits Are Clear

1. **Faster Initial Page Load**: Your core content loads quickly without being delayed by non-essential CSS.
2. **Better Performance Metrics**: Improve Core Web Vitals by deferring non-critical resources.
3. **On-Demand Effects**: Apply sophisticated animations and styles exactly when you need them.

## Real-World Use Cases

- **Product Showcases**: Load animation libraries when a user views product details
- **Interactive Tutorials**: Inject styling for tutorial steps only when a user reaches that section
- **Form Validation**: Load form-specific styling only when a user begins interacting with a form

## Before and After Example

**Before:** A static product card with basic styling.

**After:** After clicking "View Details", Animate.css is loaded and applied:
- The product image scales up with `animate__zoomIn`
- Feature highlights fade in with `animate__fadeInRight`
- The "Add to Cart" button pulses with `animate__pulse`

## Implementation Tips

- Group related CSS libraries to minimize the number of separate requests
- Consider preloading libraries for critical user paths where you know they'll be needed
- Use feature detection to load alternative libraries based on browser capabilities

By loading CSS libraries dynamically, you can create rich, engaging user experiences without compromising on initial page load performance.

## Related

- [Load Style Documentation](/content-injection/load-style/) - Complete API reference
- [On-Demand Tailwind CSS](/blog/tailwind-injection-tutorial/) - Load Tailwind dynamically
- [Custom CSS Injection](/blog/custom-css-injection-tutorial/) - Theme switching and visual enhancements
- [Dynamic jQuery Injection](/blog/jquery-injection-tutorial/) - Load JavaScript libraries on-demand
- [Smart Resource Loading](/blog/conditional-resource-loading-tutorial/) - Conditional loading strategies

---

### Enhancing Your Site with Dynamic jQuery Injection
URL: https://boostifyjs.com/blog/jquery-injection-tutorial/
Description: Learn how to load jQuery on-demand to add powerful functionality without impacting initial page load performance.
Tags: Coding, Performance
Date: Thu Jun 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

# Dynamic jQuery Injection: Power Without the Performance Cost

jQuery remains one of the most versatile JavaScript libraries for DOM manipulation and animation effects. However, loading it upfront can unnecessarily slow down your initial page load—especially when its functionality is only needed for specific interactions.

## The Smart Approach: Load jQuery On-Demand

With [Boostify's content injection capabilities](/content-injection/load-script/), you can load jQuery dynamically, exactly when you need it:

```js
(async () => {
    try {
        await bstf.loadScript({
            url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js',
            appendTo: 'head',
            attributes: ["id=jquery", "data-test=1"],
        });
        console.log('jQuery loaded successfully.');
        
        // Now you can use jQuery!
        $('body').css('background-color', '#f0f8ff');
        $('.header').animate({
            opacity: 0.8
        }, 1000);
        
    } catch (error) {
        console.error(error);
    }
})();
```

Check out the [complete loadScript documentation](/content-injection/load-script/#configuration-options) to see all available configuration options.

## The Benefits Are Clear

1. **Faster Initial Page Load**: Your core content loads quickly without being blocked by non-essential scripts.
2. **Better Performance Metrics**: Improve Core Web Vitals by deferring non-critical resources.
3. **On-Demand Power**: Access jQuery's powerful features exactly when you need them.

## Real-World Use Cases

- **Interactive Forms**: Load jQuery only when a user focuses on a complex form
- **Image Galleries**: Inject jQuery when a user clicks to view a gallery
- **Animation Effects**: Add subtle animations after the main content has loaded

## Implementation Tips

- Wrap your jQuery code inside the success callback to ensure it only runs after the library has loaded
- Consider adding a loading indicator if the functionality is user-initiated
- Test on slower connections to ensure a smooth experience for all users
- For more advanced script loading techniques, check out our [detailed content injection guide](/content-injection/load-script/)

By loading jQuery dynamically, you get the best of both worlds: fast initial page loads and the rich functionality of jQuery when you need it.

## Related

- [Load Script Documentation](/content-injection/load-script/) - Complete API reference
- [Load Third-Party Scripts via Proxy](/blog/third-party-scripts-proxy/) - Load analytics without blocking
- [On-Demand Tailwind CSS](/blog/tailwind-injection-tutorial/) - Dynamically inject Tailwind CSS
- [On-Demand CSS Libraries](/blog/css-library-injection-tutorial/) - Load animation libraries on-demand
- [Custom JavaScript Injection](/blog/custom-js-injection-tutorial/) - Advanced injection techniques
- [Smart Resource Loading](/blog/conditional-resource-loading-tutorial/) - Conditional loading strategies

---

### On-Demand Tailwind CSS: Load Styles When You Need Them
URL: https://boostifyjs.com/blog/tailwind-injection-tutorial/
Description: Learn how to dynamically inject Tailwind CSS into your pages for enhanced styling without the initial performance cost.
Tags: Coding, Performance
Date: Thu Jun 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

# Dynamic Tailwind CSS Injection: Style Without the Weight

Tailwind CSS offers an incredible utility-first approach to styling, but including the full framework upfront can add unnecessary weight to your initial page load—especially when those styles might only be needed for specific components or interactions.

## The Smart Approach: Load Tailwind On-Demand

With [Boostify's content injection capabilities](/content-injection/load-style/), you can load Tailwind CSS dynamically, exactly when you need it:

```js
(async () => {
    try {
        // Load the Tailwind CSS from CDN
        await bstf.loadStyle({
            url: 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css',
            appendTo: 'head',
            attributes: ["id=tailwind-css"],
        });
        console.log('Tailwind CSS loaded successfully.');
        
        // Now you can apply Tailwind classes dynamically
        document.getElementById('my-element').className += ' bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded';
        
    } catch (error) {
        console.error(error);
    }
})();
```

Check out the [complete loadStyle documentation](/content-injection/load-style/#configuration-options) to see all available configuration options.

## The Benefits Are Clear

1. **Faster Initial Page Load**: Your core content loads quickly without being weighed down by unused CSS.
2. **Better Performance Metrics**: Improve Core Web Vitals by deferring non-critical resources.
3. **On-Demand Styling**: Apply Tailwind's powerful utility classes exactly when you need them.

## Real-World Use Cases

- **Modal Windows**: Load Tailwind when a user triggers a modal that needs complex styling
- **Advanced UI Components**: Inject Tailwind for rich components that aren't part of the initial view
- **User Preferences**: Apply different Tailwind themes based on user selections

## Implementation Tips

- Consider loading a subset of Tailwind that only includes the utilities you need
- Use the `preload` attribute for critical UI elements that will appear shortly after page load
- Combine with responsive loading strategies to deliver different styles based on device capabilities
- For more advanced style loading techniques, check out our [detailed content injection guide](/content-injection/load-style/)

By loading Tailwind CSS dynamically, you maintain the flexibility and power of utility classes while ensuring your core content loads quickly and efficiently.

## Related

- [Load Style Documentation](/content-injection/load-style/) - Complete API reference
- [Dynamic jQuery Injection](/blog/jquery-injection-tutorial/) - Load jQuery on-demand
- [On-Demand CSS Libraries](/blog/css-library-injection-tutorial/) - Load animation libraries on-demand
- [Custom CSS Injection](/blog/custom-css-injection-tutorial/) - Theme switching and visual enhancements
- [Smart Resource Loading](/blog/conditional-resource-loading-tutorial/) - Conditional loading strategies
- [Core Web Vitals and the Funnel](/blog/core-web-vitals-marketing-funnel/) - Why performance matters for conversions

---

### Transform Your UI with Dynamic CSS Injection
URL: https://boostifyjs.com/blog/custom-css-injection-tutorial/
Description: Learn how to load custom CSS styles on-demand to enhance your site's appearance without impacting initial page load performance.
Tags: Coding, Performance, CSS, Styling
Date: Thu Jun 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

# Dynamic Custom CSS Injection: Beautiful Styling When You Need It

Custom CSS can transform your website's appearance and create visually engaging experiences. However, loading all your styles upfront can significantly increase your initial page load time—especially when certain styles might only be needed for specific sections or user interactions.

## The Smart Approach: Inject Custom CSS On-Demand

With Boostify's content injection capabilities, you can load custom CSS styles dynamically, exactly when you need them:

```js
(async () => {
    try {
        // Load custom CSS when a specific user action occurs
        document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
            // Option 1: Load from an external file
            await bstf.loadStyle({
                url: '/assets/css/dark-theme.css',
                appendTo: 'head',
                attributes: ["id=dark-theme"],
            });
            
            // Option 2: Insert inline CSS
            await bstf.loadStyle({
                inlineStyle: `
                    body {
                        background-color: #121212;
                        color: #e0e0e0;
                    }
                    .card {
                        background-color: #1e1e1e;
                        border: 1px solid #333;
                        box-shadow: 0 4px 8px rgba(0,0,0,0.5);
                    }
                    .button {
                        background-color: #bb86fc;
                        color: #000;
                    }
                    .button:hover {
                        background-color: #9966cc;
                    }
                `,
                appendTo: 'head'
            });
            
            console.log('Dark mode styles loaded successfully.');
        });
        
    } catch (error) {
        console.error(error);
    }
})();
```

## The Benefits Are Clear

1. **Faster Initial Page Load**: Your core content loads quickly without being delayed by non-essential styles.
2. **Better Performance Metrics**: Improve Core Web Vitals by deferring non-critical CSS.
3. **On-Demand Styling**: Apply sophisticated visual enhancements exactly when you need them.
4. **Reduced Rendering Complexity**: Keep your initial render process simpler and faster.

## Real-World Use Cases

- **Theme Switching**: Load dark/light mode styles only when a user toggles the theme
- **Print Styles**: Inject print-specific CSS only when a user initiates printing
- **Advanced Animations**: Load complex animation styles only when elements enter the viewport
- **Specialized UI Components**: Apply component-specific styles only when those components are activated

## Before and After Example

**Before:** A standard light-themed interface with basic styling.

**After:** After clicking "Enable Dark Mode":
- Background shifts to a dark color scheme
- Text becomes lighter for better contrast
- UI elements receive subtle glow effects
- Accent colors adjust for better visibility in dark mode

## Implementation Tips

- Use CSS variables to make theme switching more efficient
- Consider using media queries within your injected CSS for responsive adjustments
- Prioritize critical styles in your initial CSS and defer non-essential styles
- Test your dynamic styling on various devices to ensure consistent experiences

By injecting custom CSS dynamically, you can create visually rich, adaptable interfaces without compromising on initial page load performance.

## Related

- [Load Style Documentation](/content-injection/load-style/) - Complete API reference
- [On-Demand Tailwind CSS](/blog/tailwind-injection-tutorial/) - Load Tailwind dynamically
- [On-Demand CSS Libraries](/blog/css-library-injection-tutorial/) - Load animation libraries on-demand
- [Smart Font Fallbacks](/blog/smart-font-fallbacks-tutorial/) - Reduce CLS with font optimization
- [Improve CLS with Image Dimensions](/blog/improve-cls-with-dimensions/) - Prevent layout shifts

---

### Supercharge Your Site with Custom JavaScript Injection
URL: https://boostifyjs.com/blog/custom-js-injection-tutorial/
Description: Learn how to dynamically load custom JavaScript code to add powerful functionality without bloating your initial page load.
Tags: Coding, Performance, JavaScript
Date: Thu Jun 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

# Dynamic Custom JavaScript Injection: Powerful Functionality When You Need It

Custom JavaScript can add powerful interactivity and functionality to your website. However, loading all your JavaScript upfront can significantly increase your initial page load time and potentially introduce unnecessary complexity—especially when certain features might only be needed in specific scenarios.

## The Smart Approach: Inject Custom JS On-Demand

With Boostify's content injection capabilities, you can load custom JavaScript code dynamically, exactly when you need it:

```js
(async () => {
    try {
        // Load custom JS when a specific user action occurs
        document.getElementById('show-chart').addEventListener('click', async () => {
            // Option 1: Load from an external file
            await bstf.loadScript({
                url: '/assets/js/chart-generator.js',
                appendTo: 'body',
                attributes: ["id=chart-js"],
            });
            
            // Option 2: Execute inline JavaScript
            await bstf.loadScript({
                inlineScript: `
                    // Create a simple chart
                    const ctx = document.getElementById('chart-container').getContext('2d');
                    const data = [12, 19, 3, 5, 2, 3];
                    const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
                    
                    // Draw the chart using canvas
                    ctx.beginPath();
                    ctx.moveTo(0, 100 - data[0] * 4);
                    for(let i = 1; i < data.length; i++) {
                        ctx.lineTo(i * 50, 100 - data[i] * 4);
                    }
                    ctx.stroke();
                    
                    // Add labels
                    for(let i = 0; i < labels.length; i++) {
                        ctx.fillText(labels[i], i * 50, 120);
                    }
                `,
                appendTo: 'body'
            });
            
            console.log('Chart functionality loaded successfully.');
        });
        
    } catch (error) {
        console.error(error);
    }
})();
```

## The Benefits Are Clear

1. **Faster Initial Page Load**: Your core content loads quickly without being delayed by non-essential JavaScript.
2. **Better Performance Metrics**: Improve Core Web Vitals by deferring non-critical code.
3. **On-Demand Functionality**: Add complex features exactly when you need them.
4. **Reduced Memory Usage**: Keep your page's memory footprint smaller until additional functionality is needed.

## Real-World Use Cases

- **Data Visualization**: Load chart-generating code only when a user navigates to the analytics section
- **Advanced Form Validation**: Inject form validation logic only when a user begins filling out a form
- **Interactive Maps**: Load mapping functionality only when a user requests location information
- **Social Media Widgets**: Add social sharing capabilities only after content has been fully loaded

## Implementation Tips

- Use feature detection to ensure compatibility before loading custom code
- Consider breaking complex functionality into smaller, more focused modules
- Add error handling to gracefully degrade if script loading fails
- Use performance monitoring to measure the impact of your dynamic loading strategy

By injecting custom JavaScript dynamically, you can create sophisticated, feature-rich experiences without compromising on initial page load performance.

## Related

- [Load Script Documentation](/content-injection/load-script/) - Complete API reference
- [Load Third-Party Scripts via Proxy](/blog/third-party-scripts-proxy/) - Load analytics without blocking
- [Dynamic jQuery Injection](/blog/jquery-injection-tutorial/) - Load jQuery on-demand
- [Smart Resource Loading](/blog/conditional-resource-loading-tutorial/) - Conditional loading strategies
- [On Load Events](/trigger-events/on-load/) - Defer scripts to improve performance

---

### Preventing CLS with Proper Image Dimensions
URL: https://boostifyjs.com/blog/improve-cls-with-dimensions/
Description: Why defining width and height on images is essential for reducing Cumulative Layout Shift (CLS) and improving Lighthouse performance scores.
Tags: CLS
Date: Mon Jul 24 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

One of the most frustrating visual issues on the web is when content shifts around as the page loads. This is known as **Cumulative Layout Shift (CLS)** — and it directly affects your Lighthouse score and user experience.

CLS is part of Google's [Core Web Vitals](https://web.dev/cls/), and it measures layout stability. A high CLS means users are seeing elements jump around, which can lead to accidental clicks and a sense of jankiness.

## What Causes CLS?

A common reason for layout shifts is when images (or ads, embeds, fonts, etc.) load in **without predefined dimensions**. If the browser doesn't know the size of the image, it can't reserve space for it — so once the image loads, the layout jumps.

## The Fix: Set `width` and `height` on Images

To prevent this, **always add `width` and `height` attributes to your `<img>` tags**. This lets the browser calculate the correct aspect ratio and reserve the right amount of space before the image is downloaded.

### ❌ Bad Example
```html
<img src="/images/photo.jpg" alt="A nice photo" />
```

### ✅ Good Example
```html
<img src="/images/photo.jpg" alt="A nice photo" width="800" height="600" />
```

This defines the image’s size and prevents unexpected layout changes.


### What About Responsive Images?

Even if you're using responsive layouts, you should still include width and height attributes. The browser will use those values to calculate the aspect ratio, then scale the image with CSS.

```css
img {
  width: 100%;
  height: auto;
}
```
This keeps your design fluid while preserving layout stability.

### Using aspect-ratio in CSS

If you’re using modern CSS, another option is to use the aspect-ratio property:

```css
img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}
```
This is especially useful for background images or media rendered dynamically with JavaScript.

### Quick Tips to Improve CLS
- Use `width` and `height` on all `<img>` elements.
- Reserve space for embeds (e.g. iframes, videos) using wrappers with fixed aspect ratios.
- Avoid injecting DOM elements above existing content during load.
- Test your site using Lighthouse or Chrome DevTools → Performance tab.
- Keep CLS below 0.1 for a good Core Web Vitals score.

### Conclusion

Preventing layout shifts is key to improving both user experience and performance metrics. Adding width and height to your images is one of the easiest ways to achieve that.

A stable layout not only looks better — it also feels faster and more professional.

## Related

- [Core Web Vitals and the Funnel](/blog/core-web-vitals-marketing-funnel/) - How CLS affects your conversions
- [The Business Case for Web Performance](/blog/website-performance-is-a-business/) - Why stability matters
- [Why Lighthouse Is a Marketing Tool](/blog/beyond-lighthouse-scores/) - Understanding performance metrics
- [On Load Events](/trigger-events/on-load/) - Defer scripts to improve CLS

---

### Smart Font Fallbacks: Eliminate Layout Shifts with CSS Font Descriptors
URL: https://boostifyjs.com/blog/smart-font-fallbacks-tutorial/
Description: Learn how to use CSS font descriptors to create intelligent fallbacks that prevent layout shifts while maintaining your design integrity.
Tags: Performance, Web Fonts, Core Web Vitals
Date: Wed Jan 08 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

# Smart Font Fallbacks: Eliminate Layout Shifts with CSS Font Descriptors

Layout shifts caused by web font loading are silent conversion killers. Users see content jump around as fonts load, creating a jarring experience that screams "unprofessional." But there's a better way than choosing between `font-display: swap` (which causes shifts) and `font-display: optional` (which might show system fonts).

## The Real Problem with Font Loading

When browsers load web fonts, they initially render text using system fallbacks. Once the web font downloads, the browser swaps it in—often changing the text's dimensions and causing everything below to shift. This directly impacts your Cumulative Layout Shift (CLS) score and user experience.

The traditional approach was to accept this trade-off. Not anymore.

## CSS Font Descriptors: The Game Changer

CSS font descriptors (f-mods) let you override the metrics of fallback fonts to match your web fonts exactly. By adjusting `ascent-override`, `descent-override`, and `line-gap-override`, you can make system fonts behave like your custom fonts—eliminating layout shifts entirely.

Here's how it works in practice:

```css
/* Fallback fonts with custom metrics */
@font-face {
  font-family: 'Syne-fallback';
  src: local('Trebuchet MS');
  ascent-override: 92.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'HubotSans-fallback';
  src: local('Courier New');
  ascent-override: 109%;
  descent-override: 32%;
  line-gap-override: 0%;
}

/* Your actual web fonts */
@font-face {
  font-family: "Syne";
  src: url('/fonts/Syne/Syne-VariableFont_wght.woff2') format('woff2'),
       url('/fonts/Syne/Syne-VariableFont_wght.woff') format('woff');
  font-style: normal;
  font-weight: 400 800;
  font-display: fallback;
}

@font-face {
  font-family: "Hubot Sans";
  src: url('/fonts/HubotSans/HubotSans-VariableFont_wdth,wght.woff2') format('woff2'),
       url('/fonts/HubotSans/HubotSans-VariableFont_wdth,wght.woff') format('woff');
  font-style: normal;
  font-weight: 200 900;
  font-display: fallback;
}
```

## How to Calculate the Right Values

The magic is in getting the override values right. You need your web font's metrics, which you can extract from the font file itself:

1. **Get the TTF file** of your web font
2. **Use FontDrop.info** to analyze the font metrics
3. **Find the HHEA table** values: ascender, descender, line-gap
4. **Calculate percentages** based on unitsPerEm

For example, if your font has:
- unitsPerEm: 1000
- ascender: 925
- descender: 275

Your CSS would be:
```css
ascent-override: 92.5%;  /* 925/1000 */
descent-override: 27.5%; /* 275/1000 */
line-gap-override: 0%;
```

## Integrating with Dynamic Loading

This technique pairs perfectly with [Boostify's dynamic font loading](/content-injection/load-style/). You can load fonts on-demand while ensuring zero layout shift:

```js
// Load fonts dynamically with Boostify
await bstf.loadStyle({
    url: '/fonts/custom-fonts.css',
    appendTo: 'head'
});

// Your fallbacks are already preventing layout shifts
// while the web fonts load in the background
```

## The Performance Impact

Smart fallbacks deliver measurable improvements:

- **Zero CLS from font swaps**: Fallbacks match web font dimensions exactly
- **Faster perceived performance**: Content renders immediately with proper spacing
- **Better Core Web Vitals**: Improved CLS scores boost search rankings
- **Maintained design integrity**: Users see your intended typography, not random system fonts

## Browser Support and Progressive Enhancement

CSS font descriptors work in Chrome 87+ and Safari 14.1+. Firefox support is coming. Since this is a progressive enhancement, unsupported browsers simply get the standard fallback behavior—no harm done.

```css
/* This works everywhere */
body {
  font-family: "Syne", "Syne-fallback", sans-serif;
}

/* Enhanced browsers get perfect fallbacks */
/* Older browsers get standard system fonts */
```

## Implementation Tips

1. **Test across operating systems**: Fallback fonts vary between Windows, macOS, and Linux
2. **Use variable fonts when possible**: Single file, multiple weights, better performance
3. **Preload critical fonts**: Combine with `<link rel="preload">` for fastest loading
4. **Monitor your metrics**: Track CLS improvements in your analytics

## Real-World Results

Sites implementing smart fallbacks typically see:
- 40-60% reduction in CLS scores
- Improved user engagement metrics
- Better search rankings due to Core Web Vitals improvements
- Maintained design consistency across all loading states

Smart font fallbacks aren't just a technical optimization—they're a user experience upgrade that protects your brand while boosting performance metrics.

## Related

- [Improve CLS with Image Dimensions](/blog/improve-cls-with-dimensions/) - Another quick CLS fix
- [The Business Case for Web Performance](/blog/website-performance-is-a-business/) - Business impact of layout shifts
- [Core Web Vitals and the Funnel](/blog/core-web-vitals-marketing-funnel/) - How CLS affects conversions
- [On-Demand CSS Libraries](/blog/css-library-injection-tutorial/) - Dynamic CSS loading techniques
- [Load Style Documentation](/content-injection/load-style/) - CSS loading API reference

---

### Smart Resource Loading: Load What You Need, When You Need It
URL: https://boostifyjs.com/blog/conditional-resource-loading-tutorial/
Description: Learn how to conditionally load resources based on user interactions, device capabilities, and other factors to optimize performance.
Tags: Coding, Performance, Optimization, JavaScript
Date: Thu Jun 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

# Conditional Resource Loading: The Smart Way to Optimize Performance

Modern websites often require numerous resources—JavaScript libraries, CSS frameworks, fonts, and more—to deliver rich experiences. However, loading everything upfront can significantly impact performance, especially on slower connections or less powerful devices.

## The Smart Approach: Load Resources Conditionally

With Boostify's content injection capabilities, you can implement sophisticated conditional loading strategies:

```js
(async () => {
    try {
        // Example 1: Load based on user interaction
        document.getElementById('open-chat').addEventListener('click', async () => {
            await bstf.loadScript({
                url: 'https://cdn.example.com/chat-widget.js',
                appendTo: 'body',
            });
        });
        
        // Example 2: Load based on viewport/element visibility
        const observer = new IntersectionObserver(async (entries) => {
            if (entries[0].isIntersecting) {
                await bstf.loadStyle({
                    url: 'https://cdn.example.com/advanced-animations.css',
                    appendTo: 'head',
                });
                observer.disconnect(); // Load only once
            }
        });
        observer.observe(document.querySelector('.animation-container'));
        
        // Example 3: Load based on device capabilities
        if (window.matchMedia('(min-width: 768px)').matches) {
            // Load desktop-specific enhancements
            await bstf.loadScript({
                url: '/assets/js/desktop-features.js',
                appendTo: 'body',
            });
        } else {
            // Load mobile optimizations
            await bstf.loadScript({
                url: '/assets/js/mobile-optimizations.js',
                appendTo: 'body',
            });
        }
        
        // Example 4: Load based on user preferences
        if (localStorage.getItem('prefers-advanced-features') === 'true') {
            await bstf.loadScript({
                url: '/assets/js/advanced-features.js',
                appendTo: 'body',
            });
        }
        
    } catch (error) {
        console.error(error);
    }
})();
```

## The Benefits Are Clear

1. **Optimized Performance**: Load only what users actually need based on their context.
2. **Better User Experience**: Prioritize critical resources first, then enhance progressively.
3. **Reduced Data Usage**: Save bandwidth by avoiding unnecessary resource downloads.
4. **Device-Appropriate Experiences**: Deliver the right experience for each device type.

## Real-World Use Cases

- **Chat Widgets**: Load chat functionality only when a user clicks the chat icon
- **Media-Rich Content**: Load high-resolution images or videos only on capable devices
- **Advanced Interactions**: Add sophisticated UI behaviors only when users scroll to that section
- **Feature Toggles**: Enable experimental features only for users who opt in

## Implementation Strategies

### 1. User Interaction-Based Loading

Load resources in response to specific user actions:
```js
element.addEventListener('click', async () => {
    await bstf.loadScript({ url: 'resource.js' });
    // Initialize newly loaded functionality
});
```

### 2. Visibility-Based Loading

Load resources when elements come into view:
```js
const observer = new IntersectionObserver(async (entries) => {
    if (entries[0].isIntersecting) {
        await bstf.loadStyle({ url: 'animations.css' });
    }
});
observer.observe(element);
```

### 3. Capability-Based Loading

Adapt loading based on device capabilities:
```js
if ('IntersectionObserver' in window && 'requestIdleCallback' in window) {
    // Load advanced features for modern browsers
} else {
    // Load fallback for older browsers
}
```

### 4. Preference-Based Loading

Respect user preferences for resource loading:
```js
if (localStorage.getItem('data-saver') === 'true') {
    // Load lightweight alternatives
} else {
    // Load standard resources
}
```

By implementing conditional resource loading strategies, you can create websites that are both feature-rich and highly performant, adapting to each user's unique context and needs.

## Related

- [Load Script Documentation](/content-injection/load-script/) - Complete API reference
- [Load Style Documentation](/content-injection/load-style/) - CSS loading API
- [Observer Events](/trigger-events/observer/) - Visibility-based loading with Boostify
- [On Load Events](/trigger-events/on-load/) - Defer third-party scripts
- [Dynamic jQuery Injection](/blog/jquery-injection-tutorial/) - Load libraries on-demand
- [On-Demand CSS Libraries](/blog/css-library-injection-tutorial/) - Load CSS dynamically

---

### Boostify is Now Free & Open Source
URL: https://boostifyjs.com/blog/boostify-is-now-free/
Description: We're removing the license requirement. Boostify is now completely free to use.
Tags: Announcements
Date: Thu Jan 29 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

We are pleased to announce that Boostify is transitioning to a fully open source model, effective immediately.

After several years of development and working closely with the developer community through performance consulting engagements, we have gained valuable insights into how teams approach web performance optimization. These experiences have shaped our vision for Boostify's future.

We believe that the best way to grow this project and maximize its impact is to remove all barriers to adoption. **Starting today, Boostify is completely free to use.** No license keys, no subscription fees, no usage limits.

This transition also means we are opening our doors to the community. Building and maintaining a performance library of this scope requires collaboration. We are actively seeking contributors who share our commitment to making the web faster—whether through code contributions, documentation improvements, bug reports, or feature suggestions.

If you've been waiting for the right moment to try Boostify, this is it.

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

Just install and use it.

## What's changing?

| Before | Now |
|--------|-----|
| $5/month license | Free forever |
| License key required | No license needed |

## What's NOT changing?

- All features remain the same
- Documentation stays updated
- Bug fixes and improvements continue
- Discord community stays active

## New: Proxy for third-party scripts

Along with going free, we're releasing a new feature: load your analytics and tracking scripts through our proxy, keeping your main thread free:

```js
bstf.onload({
    worker: true,
    callback: (result) => {
        console.log('Loaded in', result.loadTime, 'ms');
    }
});
```

[Read more about the proxy feature →](/blog/third-party-scripts-proxy/)

## Support the project

Boostify is built and maintained by one developer. If it saves you time or helps your projects, consider buying me a coffee:

**[Sponsor on GitHub →](https://github.com/sponsors/andresclua)**

Your support keeps the project alive and the proxy servers running.

## Thank you

To everyone who purchased a license before: thank you for believing in this project early on.

To everyone trying Boostify for the first time: welcome.

---

## Get started

- [Installation Guide](/guides/install/) - Get Boostify running in minutes
- [Introduction](/guides/introduction/) - Learn what Boostify can do
- [On Load Events](/trigger-events/on-load/) - Defer third-party scripts

## Community

- [Discord](https://discord.gg/zHseJ3sw8J)
- [GitHub](https://github.com/andresclua/boostify)
- [Sponsor](https://github.com/sponsors/andresclua)

---

### How to Load Google Analytics Without Slowing Down Your Website
URL: https://boostifyjs.com/blog/third-party-scripts-proxy/
Description: Learn how to load third-party scripts like Google Analytics, Facebook Pixel and Hotjar without blocking your website's main thread.
Tags: Performance, Analytics, Guide
Date: Sat Jan 31 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Every website needs tracking. Google Analytics to understand your users. Facebook Pixel for ads. Hotjar to see how people interact with your site.

But here's the problem: every script you add makes your website slower.

## What Happens When You Add a Script

When you add Google Analytics the normal way:

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

Your browser has to stop everything it's doing. It connects to Google's servers, downloads the script, and processes it. During this time, your website can't respond to users.

Click a button? Nothing happens. Try to scroll? It stutters.

This is called **blocking the main thread**.

## What is the Main Thread?

Think of your browser as having one worker who does everything: painting the page, responding to clicks, running animations, loading scripts.

When you add a third-party script, that worker has to stop serving your users and go fetch something from another server. Users wait.

Now imagine you could hire a second worker who handles all the fetching in a back room, while the first worker stays focused on your users.

That's exactly what Boostify does.

## How Boostify Solves This

Instead of loading scripts the normal way, you change one small thing. Your script goes from this:

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

To this:

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

The only difference is `type="text/boostify"`.

This tells Boostify: "Don't load this script normally. Put it in the background."

## What Happens Behind the Scenes

When you use `type="text/boostify"`, Boostify:

1. **Waits** until your page is ready and the user starts interacting
2. **Sends a helper** (called a Web Worker) to fetch the script
3. **Routes the request** through our proxy server (because browsers have security rules about loading scripts from other domains)
4. **Injects the script** only after your page is fully interactive

Your main thread never stops. Your users never wait. The scripts still load and work perfectly—they just don't block anything.

## Complete Example

Here's how to set up Google Analytics without slowing down your site:

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Fast Website</title>
</head>
<body>
    <h1>Welcome</h1>

    <!-- Your analytics scripts with 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>

    <!-- 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 });
    </script>
</body>
</html>
```

## Works With All Major Services

You can use `type="text/boostify"` with:

- Google Analytics
- Google Tag Manager
- Facebook Pixel
- Microsoft Clarity
- Hotjar
- LinkedIn Insight Tag
- TikTok Pixel
- HubSpot
- Any script from jsDelivr, unpkg, or cdnjs

## The Difference You'll Feel

| Without Boostify | With Boostify |
|------------------|---------------|
| Page loads, then freezes while scripts download | Page loads and stays responsive |
| Buttons feel delayed | Buttons respond instantly |
| Scroll stutters | Scroll is smooth |
| Users leave frustrated | Users stay and convert |

## Why a Proxy?

Browsers have security rules that prevent loading scripts from other websites in the background. It's a protection mechanism.

Boostify's proxy acts as a trusted middleman. Your site asks our proxy, our proxy gets the script from Google (or Facebook, or wherever), and delivers it back. The browser trusts this because it comes from a single, known source.

The proxy is free, fast, and handles millions of requests.

## Our Recommendation: Use Google Tag Manager

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

Why? Because you only need to load one script through Boostify:

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

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

**Benefits:**
- One proxy request instead of many
- Easier to manage (no code changes to add/remove tags)
- Everything works normally (cookies, tracking, pixels)

GTM loads late through Boostify, which means all the tags inside GTM also start late. Your page is already interactive before any tracking begins.

## Start Now

1. Add `type="text/boostify"` to your GTM script (or individual scripts if you prefer)
2. Include Boostify at the end of your page
3. Call `bstf.onload({ worker: true })`

That's it. Your analytics work exactly the same, but your site stays fast.

## Related

- [On Load Documentation](/trigger-events/on-load/) - Full configuration options
- [Boostify is Now Free](/blog/boostify-is-now-free/) - No license needed
- [Core Web Vitals and Your Marketing Funnel](/blog/core-web-vitals-marketing-funnel/) - Why speed affects conversions
- [Beyond Lighthouse Scores](/blog/beyond-lighthouse-scores/) - Real performance matters

================================================================================

## Additional Resources

- GitHub Issues: https://github.com/andresclua/boostify/issues
- NPM Package: https://www.npmjs.com/package/boostify

For condensed documentation suitable for smaller context windows, see: https://boostifyjs.com/llms.txt