array())); ?>>

Incompatibility Notice: At this time, "Combine loaded JS (JavaScript) into fewer files" option is not taking any effect as "Minify HTML" is active in "WP Rocket" -> "File Optimization" Settings. If you wish to keep WP Rocket's Minify HTML on, consider optimizing JavaScript files with WP Rocket while cleaning the useless JavaScript with .

  
  • This option is locked as optimize/minify JavaScript (JS) is already enabled in the following plugins: . works together with the mentioned plugin(s).
  • Eliminate the bloat first via CSS & JAVASCRIPT LOAD MANAGER, then minify the remaining JS with any plugin you prefer.
:
  • The CSS/JS cached files will be re-generated once the file version changes (the value from ?ver=). In addition, the versioning value from the source will be appended to the new cached CSS/JS file name (e.g. new-file-name-here-ver-1.2).
  • :
    • JS WordPress core files that end up in .min.js (e.g. /wp-includes/js/jquery/jquery-migrate.min.js, /wp-includes/js/jquery/ui/datepicker.min.js etc.)
    • /wp-includes/js/jquery/jquery.js'); ?>
: .    / 
Your website `` is delivered through the HTTP/2 network protocol, thus the website will be as fast without using this feature which might require maintenance once in a while.

 * if directory is not writable for some reason, this feature will not work; requires the DOMDocument XML DOM Parser to be enabled in PHP (which it is by default) for maximum performance
  • This option is locked as optimize/minify JavaScript (JS) is already enabled in the following plugins: .
  • works together with the mentioned plugin(s). Eliminate the bloat first via CSS & JAVASCRIPT LOAD MANAGER, then concatenate (if necessary) the JS using any plugin you prefer.
style="opacity: 1;" style="opacity: 0.4;">

Note: When a file is added to a combined group of files, the CDATA as well as any other inline content (e.g. added via wp_add_inline_script()) associated with it will also be added to the combined files. This reduces the number of DOM elements as well makes sure that, in case, the combined file is deferred, the code from the inline tags is triggered at the same time as the one from the file

:

:

/wp-includes/js/admin-bar.min.js
/wp-includes/js/masonry.min.js
/wp-content/plugins/plugin-title/js/(.*?).js

-

To be 100% sure everything works fine after activation, consider using the checkbox option above to apply the changes only for logged-in administrator (yourself). If all looks good, you can later uncheck so the changes will apply to everyone.

Any scripts having "defer" or "async" attributes (which are there for a reason) will be combined in their own groups and not together with other render-blocking scripts.

This feature will not work IF:

  • "Test Mode" is enabled and a guest (not logged-in) user visits the page, as the feature's ultimate purpose is to make the plugin inactive for non logged-in administrators for ultimate debugging.
  • The URL has query strings (e.g. an URL such as //www.yourdomain.com/product/title-here/?param=1&param_two=value_here)
×

<head> and <body> locations and combines them into one file per each location.', 'wp-asset-clean-up'); ?>

: <head> location and 7 JS files loading in <body> location, you will end up with a total of 3 JS files: jQuery library & jQuery Migrate (they are not combined together with other JS files for maximum performance) in 1 file and the 2 JS files for HEAD and BODY, respectively.', 'wp-asset-clean-up'); ?>

 . You can choose automatic inlining for JS files smaller than a specific size (in KB) or manually place the relative paths to the files (e.g. in case there is an exception for a larger file you wish to inline or just don't want to use the automatic inlining).
  • This option is not available as optimize/minify JavaScript (JS) is already enabled in the following plugins: .
  • works together with the mentioned plugin(s). Eliminate the bloat first via CSS & JAVASCRIPT LOAD MANAGER, then concatenate (if necessary) the JS using any plugin you prefer.
style="opacity: 1;" style="opacity: 0.4;">

Please be extra careful if you decide to use this feature as inlining JavaScript files can be trickier than inlining CSS ones due to the more complex syntax and various attributes that might set to the external JS file such as "async" & "defer" (the content of any JS having this attribute will be wrapped between document.addEventListener('DOMContentLoaded', function() { and });.

():

Note: Please input the sources to the original JavaScript files (one per line) like in the examples below, not to the cached/optimized ones (which are usually located in ). RegExes are accepted. Note that the hash (#) is automatically used as delimiter so you don't need to add it below.

Examples (you don't have to add the full URL, as it's recommended to use relative paths, especially if you use dev/staging environments or change the domain name of your website):

/wp-content/plugins/plugin-title/scripts/small-file.js
/wp-content/themes/my-wp-theme-dir/js/small.js

.

  

The option should be enabled if any of the following applies:

  • You have moved "jquery-core" to BODY to reduce render-blocking resources and you get "jQuery is undefined" errors because inline jQuery scripts are loaded (usually hardcoded) before the jQuery library tag.
  • jQuery already loads in the HEAD (that's the default behaviour), but inline jQuery code is printed (e.g. hardcoded & without using the function wp_add_inline_script() with 'jquery' dependency) before jQuery library's script tag (either from a plugin or the theme).

.

  <SCRIPT> tags (inline & external) right after the <BODY> opening tag', 'wp-asset-clean-up'); ?>.

The option could be enabled if any of the following applies:

  • There are a few SCRIPT tags left in the HEAD (usually hardcoded and not manageable in the CSS/JS list) and you are sure they can be moved to the BODY without any issues.
  • jQuery library is loaded in the HEAD (sometimes the only render-blocking resources there) and you had difficulties moving it to the BODY as there are themes/plugins which are hardcoding it in the HEAD or dequeue & enqueue it incorrectly.

In case there is JavaScript that you wish to keep in the HEAD, you can add a unique string from the SCRIPT tag(s) in the textarea below (one per line):

Note: A situation when SCRIPT tags should be loaded in the <HEAD> is when the page gets loaded as an AMP (Accelerated Mobile Page) via various plugins. If have SCRIPT tags loading .js from cdn.ampproject.org, you can add a unique string to the exclusion such as //cdn.ampproject.org/ which will detects tags like <script type='text/javascript' src='https://cdn.ampproject.org/v0.js' async></script> and keep them in the <HEAD>

.

  /?custom-javascript=value_here, or /wp-content/plugins/plugin-name-here/js/generate-script-output.php?ver=1', 'wp-asset-clean-up'); ?>

e.g. <script type="text/javascript" src="//yourwebsite.com/wp-content/plugins/plugin-name-here/js/generate-script-output.php?ver="></script>

Some plugins and themes have options to create your own layout / customise specific functionality settings and save the changes from the Dashboard. Instead of creating static JS files from the saved settings, the changes you made are retrieved from the database and the JavaScript content is created "on the fly", thus using more resources by loading the whole WP environment and make MySQL (or whatever database type if used) requests in order to print the JavaScript content. detects such requests and caches the output for faster retrieval. This very important especially if your website has lots of visits (imagine WordPress loading several times only from one visitor) and you're on a shared environment with limited resources. This will also make the user experience better by decreasing the page rendering time.
×

:

test thoroughly the pages that have the assets combined (pay attention to any JavaScript errors in the browser\'s console which is accessed via right click & "Inspect") as, in rare cases, due to the order in which the scripts were loaded and the way their code was written, it could break some functionality.', 'wp-asset-clean-up'); ?>

×

Example #1 (without jQuery Migrate loaded)

FROM

<script type="text/javascript">jQuery(document).ready(function($) { /* code here */ });</script>
<script type="text/javascript" src="/wp-includes/js/jquery.js"></script>

TO

<script type="text/javascript" src="/wp-includes/js/jquery.js"></script>
<script type="text/javascript">jQuery(document).ready(function($) { /* code here */ });</script>

Example #2 (with jQuery Migrate loaded)

FROM

<script type="text/javascript">jQuery(document).ready(function($) { /* code here */ });</script>
<script type="text/javascript">$(document).ready(function() { /* another code here */ });</script>
<script type="text/javascript" src="/wp-includes/js/jquery.js"></script>
<script type="text/javascript" src="/wp-includes/js/jquery-migrate.min.js"></script>

TO

<script type="text/javascript" src="/wp-includes/js/jquery.js"></script>
<script type="text/javascript" src="/wp-includes/js/jquery-migrate.min.js"></script>
<script type="text/javascript">jQuery(document).ready(function($) { /* code here */ });</script>
<script type="text/javascript">$(document).ready(function() { /* another code here */ });</script>

×

FROM 
<head>
    <title>Your page title here</title>
    ...
    ...
    <script type="text/javascript" src="/wp-includes/js/jquery.js"></script>
    <script type="text/javascript">/* code here */</script>
</head>
<body>
    ...
</body>
TO 
<head>
    <title>Your page title here</title>
    ...
    ...
</head>
<body>
    <script type="text/javascript" src="/wp-includes/js/jquery.js"></script>
    <script type="text/javascript">/* code here */</script>
    ...
</body>