JS: Site Booster Module

The Ocean Site Booster's S module enables you to optimize, compress, and control the loading behavior of JavaScript files on your website. Managing how your scripts load directly impacts your site's interactive performance, helping you improve crucial Core Web Vitals metrics like Interaction to Next Paint (INP) and Total Blocking Time (TBT).

The JS feature is available as of Site Booster 1.5.0 version.

To enable JS optimization features, toggle   to enable the module.

Enable (or disable) any option you would like to use, then save changes   at the bottom of the module page.

Available JS options include:

• JS Minification:
  • Enable Minify JS,
  • Exclude JS Files from Minify,
• JS Loading:
  • JS Loading Strategy,
  • Excluded Handles (Defer/Async),
  • Excluded Paths (Defer/Async),
• Best Practices & General Recommendation.

Enable Minify JS

The Enable Minify JS option allows you to compress your scripts by removing unnecessary spacing, comments, and line breaks to minimize file size and speed up download times.

Exclude JS Files from Minify

The Exclude JS Files from Minify text area allows you to stop specific JavaScript files from being compressed. Simply enter one JS file path per line to exclude it from minifying.

This is a life-saver if a specific plugin's script malfunctions or throws syntax errors after compression.

JS Loading Strategy

This dropdown lets you choose how non-essential scripts are handled by the browser. You can select between 3 optimization strategies:

• Disabled: Default selection.
• defer  (Recommended): Scripts are downloaded in the background, but their execution is paused until the HTML document is fully parsed. This maintains the intended code order and is significantly safer for most WordPress configurations.
• async : Scripts download in the background and execute the exact millisecond they finish downloading. This means they can execute out of order, which is excellent for independent scripts but can disrupt scripts that rely on dependencies.

Excluded Handles (Defer/Async)

The Excluded Handles field lets you specify script identifiers (handles) that should bypass the deferred or asynchronous loading rules. Enter one handle per line.

Excluded Paths (Defer/Async)

The Excluded Paths text field allows you to exclude scripts based on their file locations or URLs. This is ideal if you want to exclude an entire plugin's worth of scripts at once. Enter one URL path substring per line.

For example: /wp-content/plugins/my-plugin/  

Best Practices & General Recommendation

JavaScript optimization is incredibly powerful, but because scripts control your site's functionality, they require a thoughtful approach. Keep these tips in mind:

1. Choosing Between Defer and Async

• Go with Defer First: As a general rule of thumb, use defer  as your primary strategy. Because WordPress plugins heavily rely on one another (and on core libraries), loading them out of order via async   can cause critical interactive elements like mobile menus, sliders, or forms to freeze.
• When to use Async: Reserve async   primarily if your site uses very few plugins or if you are targeting specific independent scripts (like analytics trackers) that do not care about theme dependencies.

2. Hunting Down Interactive Glitches

• Console is Your Friend: If a button stops working or an image gallery disappears after turning on the JS module, right-click your webpage, select Inspect, and open the Console tab.
• Look for Red Errors: Look for red error messages pointing to a specific script file. Once you identify the culprit script handle or plugin path, paste it into the Excluded Handles or Excluded Paths boxes to instantly restore functionality.

3. Clear Caches After Adjustments

• Sync Your Optimization: Any time you change your JS loading strategy or add script exclusions, make sure to clear your Page Cache so that your visitors are served the newly reordered HTML script tags immediately.

Enjoy speeding up your website's performance with Site Booster.

That's it!

Boost your WordPress website on all levels with OceanWP and Ocean Site Booster.