Fix Large Cache Folder Size Caused by Dynamic Inline JS

If the cache/min folder is too big due to an unusually large number of JS files it could cause problems:

  • Takes up too much disk quota in your hosting account
  • Too many files means that sometimes old ones will not be completely removed

When the number of JS files is too large, it’s typically related to dynamic inline JavaScript on your site. Since WP Rocket 3.1, when the combine JS option is activated, inline JS scripts are also optimized by including them in the combined JS file.

What is “Dynamic Inline JS”?

In this context, “dynamic” means content that varies from page to page. Dynamic inline JS means that the same script is on many pages of your site, but one small part changes from page to page.  This will cause a new combined JS file to be made for each page. On a site with a lot of pages, this will quickly create too many JS files.

Here’s an example of part of an inline script:

ga('ec:addProduct', {
       'id': '3DH048',
       'name': '3D Uruguay Hat',
       'category': 'Countries/South America/Uruguay/All Products/Hats/3D Hats/World Cup/Uruguay',
       'price': '7.99',
   });

This same script will be on every product page of your site, but the details, such as the product ID, name, category and price will be different for every product, requiring a new JS file for every product on your site. 

It only takes one character in the script to be different per page, to trigger the problem.

The solution is to exclude such scripts from being added to the combined JS file.

How to find the Inline JS to exclude

To identify which scripts are dynamic we have to compare 2 of the combined JS files created by WP Rocket, and find the differences. This will lead us to the scripts to exclude.

  1. Activate WP Rocket with the Combine JS option enabled.
  2. Open two pages of the same content type on the website, e.g. two blog posts, or two products.
  3. Go to View > Page Source and locate the combined JS file created by WP Rocket. It will be toward the bottom of the page source, and the URL will have this format: /cache/min/1/734613487895454.js Here’s an example:
  4. TIP: Do a “Find” (Mac: Command + F, PC: CTRL+F) for cache/min , or .js to narrow down the search
  5. Check if the combined .js files are different by looking at the filenames.  If the filenames are different, we know there is an issue.
  6. Next we’re going to compare these 2 files to find the difference. Since the code is minified, it’s hard to read, so first we’ll unminify the code. You can do that at: unminify.com
    • Click on the JS file from the page source
    • Select all of the JS (Mac: Command +A, PC: CTRL+A),  then copy the contents
    • Paste the contents into unminify.com, then click Unminify.
  7. Open a new browser tab and go to DiffChecker.com. Paste the unminified contents in the Original Text field on the left side.
  8. Repeat Step 5 for the second page you opened in Step 2. Then take the unminified contents and paste it in the Changed text field on the right side in Diffchecker:

  9. Click Find Difference. Wait a minute or so for the diff to process. You will then see a side-by-side comparison of the code with changes highlighted. Click on the red/green bars on the right to jump directly to the parts of the code which are different. The specific changes will be highlighted in a darker shade of red/green. Now you should be able to see the specific parts of the code that are different: 

    In this example there is a long string of numbers/letters which is different on each page. It’s likely unique on every page and that’s the issue.

  10. Next we have to choose a string that will exclude the script in WP Rocket . This should be something unique to this script that will be present in each case. In this example a good candidate to identify this script would be: ct_input_name
  11. Enter that into the WP Rocket option: Excluded Inline JavaScript

After making your exclusions, monitor the cache folder to check that the issue has been resolved. If the issue continues, you should repeat the process, but compare a different type of content on your site. For example, if you compared blog posts first, then try comparing products. There could be different JS included on different content types.

If there were already too many JS files in the  min folder for your server to delete automatically, you may have to manually remove those via FTP. Once the correct exclusions have been made, the files will be deleted as normal, automatically.