JavaScript Optimization

The Problem with Render-Blocking JavaScript

By default, when a browser encounters a <script> tag, it stops parsing HTML, downloads the script, executes it, then resumes parsing. This "render-blocking" behavior means your page can't display content until all scripts in the head have finished loading.

BoostPro offers three strategies to solve this: defer, delay, and minify.

JavaScript Defer

Deferring JavaScript tells the browser to download scripts in parallel with HTML parsing, but wait to execute them until the HTML is fully parsed. Scripts still execute in order, just later.

• Default: Off
• How it works: Adds the defer attribute to external script tags
• Impact: Reduces render-blocking, improves First Contentful Paint (FCP)

What's Automatically Excluded

BoostPro never defers these scripts to prevent breakage:

• jquery-core and jquery (many plugins depend on jQuery being available immediately)
• jquery-migrate
• wp-polyfill and wp-hooks
• Scripts that already have defer or async
• Inline scripts (no src attribute)
• Module scripts (type="module")

Custom Exclusions

If a specific script breaks when deferred, add its handle or URL pattern to the exclusion list, one per line:

slider-script
my-custom-plugin
analytics.js

JavaScript Delay

Delay is more aggressive than defer. Instead of executing scripts after HTML parsing, delayed scripts don't execute at all until the user interacts with the page (scroll, click, tap, mouse move, or keypress).

• Default: Off
• Fallback timer: 10 seconds (scripts load automatically for bots or non-interactive sessions)
• Impact: Dramatic improvement to LCP, FID, and TBT scores

How Delay Works

1. BoostPro converts <script src="..."> to <script type="boostdelayedscript" data-boost-src="...">
2. The browser ignores these scripts because it doesn't recognize the type
3. A small loader script listens for user interaction events
4. On first interaction (or after 10 seconds), the loader restores and executes all delayed scripts

What's Automatically Excluded from Delay

• Scripts with data-boost-no-defer attribute
• Module scripts (type="module")
• JSON data (type="application/json" or type="application/ld+json")
• jQuery core (detected by filename)
• User-excluded patterns

Delay Modes

BoostPro supports two delay modes that control which scripts get delayed:

• Exclusion mode (default): All scripts are delayed except those matching your exclusion patterns. Best for most sites where you want maximum performance and selectively protect critical scripts.
• Inclusion mode: Only scripts matching your inclusion patterns are delayed. Everything else loads normally. Best when you want precise control and only want to delay specific heavy scripts like analytics or chat widgets.

Delay Presets

BoostPro includes pre-configured exclusion patterns for popular plugins and services. Instead of manually figuring out which patterns to exclude, you can toggle presets for common tools like Google Analytics, Facebook Pixel, reCAPTCHA, and others. Each preset adds the correct exclusion patterns automatically.

Common Scripts to Exclude from Delay

consent
cookie
gdpr
gtag
analytics
recaptcha

JavaScript Minification

JS minification removes whitespace, comments, and unnecessary characters from JavaScript files to reduce their size.

• Default: Off
• Typical savings: 10-20% per file
• Cache location:/wp-content/cache/boost-js/
• Skips: Files already minified (.min.js), external scripts, and inline scripts
• Smart caching: Only serves the minified version if it's at least 10% smaller than the original

The cache has a 100MB size limit and a weekly cleanup that removes files older than 30 days.

Excluding Scripts from Minification

If a script has issues when minified, add its handle or URL pattern to the exclusion list:

my-custom-script
plugin-problematic-js

Defer vs. Delay vs. Minify

The No-Defer Attribute

If you're a developer and want to prevent a specific script from being deferred or delayed, add the data-boost-no-defer attribute:

<script src="critical.js" data-boost-no-defer></script>

BoostPro will skip this script entirely.

Recommended approach

1. Start with Minify enabled (low risk, immediate benefit)
2. Enable Defer and test your site
3. Check forms, sliders, modals, and interactive elements
4. Add exclusions for any broken scripts
5. Once defer is stable, optionally try Delay for maximum performance
6. Exclude consent managers, analytics, and critical UI scripts from delay
7. Run PageSpeed tests to measure the improvement