Resource for JS order (for combining/minifying js)

Support
#1

I’m trying to reduce the load times on my site, and combining the JS files into 1 would really help, but when I do, the js breaks on my site. How would I be able to determine the order that would work, or which files just can’t be split? Thanks!

#2

Hi @jrhager84,

Theme files are already minified. That’s is why it is breaking. Please exclude these files from being minified.

/wp-content/themes/pro/cornerstone/assets/dist-app/js/cs-vendor.fa34ec9.js
/wp-content/themes/pro/cornerstone/assets/dist-app/js/cs.fa34ec9.js
/wp-content/themes/pro/cornerstone/assets/dist/js/admin/huebert.fa34ec9.js
/wp-content/themes/pro/framework/dist/js/site/x.js

Exclude Pages and Directories from Caching in W3 Total Cache

For sites that are under CloudFlare, they can follow this guide here.

Remember to clear all caches (plugins, server-side, CDN, and browser’s cache) this will help you to avoid any potential errors.

Hope it helps,
Cheers!

#3

Also - Now that that is taken care of, when I visit the site, the mobile menu flashes ‘open’ and then closes. How would I address that? Maybe it’s some js event firing? Any ideas?

sammyhager.com

#4

Hi @jrhager84,

I can see it is not working at all. There’s error on console from your minification setup:

Uncaught SyntaxError: Invalid or unexpected token
(index):82 Uncaught TypeError: $window.scrollBottom is not a function
    at HTMLDocument.<anonymous> ((index):82)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.K (jquery.min.js:2)

Please double check your minification setup.

#5

I have tried to exclude those files to no avail. I cannot combine the JS files to lower load times. I am getting nearly 80 requests per visit. Surely that can be lowered, yes?

#6

Hey @jrhager84,

There are some plugins that do minifiction quite effectively for example you can try WP Rocket, for the minification part of this plugin please take a look at this thread https://theme.co/apex/forum/t/do-you-know-if-wp-rocket-is-compatibility/68386/2

I found an article that you can follow to combine JavaScript files into one file: https://speedrak.com/blog/how-to-combine-javascripts-into-1-file/

You can also use https://pakd.io/, this site allows you add multiple css/js files into one package, the package generates a single file with the contents of the files you add with the order you choose.

For instance let’s say you have example.com/js1.js and js2.js, you can go there and create a new package of type : js, add your files to it. It will minify the files as well, so you will get a fine tuned single JS instead of multiple js, this should reduce the number of head requests per page.

Also take a look at our article on improving the site’s performance: https://theme.co/docs/how-to-improve-site-performance

Hope this helps!

#7

Ah. My host uses LiteSpeed, so they recommended LSCache as a native server-side caching minifying solution. I’ll take a look at those resources. Thanks!

#8

You’re most welcome, @jrhager84.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.