Combining numerous JS files into one JS file.

Scott235 · Post by **Scott235** » Sun Jul 30, 2017 11:39 am

Post by **Per Yngve Berg** » Sun Jul 30, 2017 1:01 pm

Mod. Note: Relocating the topic to the Performance Forum.

leolam · Post by **leolam** » Sun Jul 30, 2017 4:50 pm

Start reviewing JCH-optimize since you will need that to achieve what you need https://www.jch-optimize.net

Leo

Scott235 · Post by **Scott235** » Sun Jul 30, 2017 5:25 pm

Downloaded and installed the free version. Didn't make any changes to the settings. Left them as is. Let's see if it helps any.

leolam · Post by **leolam** » Sun Jul 30, 2017 5:34 pm

That won't fly since it depends completely on your extensions, template, server and a lot more. Just implementing JCH default won't help and it requires a lot of trial and error since wrong settings in JCH can/will break your site

You might set JCH to 'optimum' and it will break...than you discover for instance that you keep 'optimum' but adjust settings since our template breaks or shows no longer properly so you will need to adjust settings for example "include inline scripts" = no since an extension is not playing game with JCH etc etc

This needs to be vigorously set by trial and error I am afraid but once you get it right you can be in heaven. You might also want to install Jotcache (READ the manuals) which you can use in very good combination with JCH... Jotcache gives you tremendous good Page Caching where the Joomla Page Cache is a horror story (Disable that system page cache plugin!)

Leo

Scott235 · Post by **Scott235** » Sun Jul 30, 2017 5:39 pm

I'll have to install it to the DEV version of the site which is a duplicate and try different settings there first. In the meantime I'll leave it as is on the PROD version.

Scott235 · Post by **Scott235** » Sun Jul 30, 2017 6:21 pm

I just downloaded the optimized files from the Google speed test site. I now have one CSS and one JS file. Looks like all the CSS and all JS files were combined into one. My question is where do these one files go on the server to replace all the numerous files?

sozzled · Post by **sozzled** » Sun Jul 30, 2017 9:57 pm

The opening message in this discussion seems to be about improving the user experience through code aggregation: combining several CSS files into one package (and doing the same thing for several Javascript files). There's a useful discussion on code aggregation here: https://www.appnovation.com/blog/dark-side-aggregation

Scott235 wrote:I ... downloaded the optimized files from the Google speed test site.

I'm not sure I understand what you mean. In what way are these files "optimised"? Are we still discussing code aggregation or are you, perhaps, talking about minified files?

Can you also tell us the URL of the "Google speed test site" where you downloaded these "optimised files" from?

Aggregation is typically performed on-the-fly. Minification can be done "on-the-fly"—the server may minify the CSS/Javascript before transmitting the minified version(s) to the user—or it may be done "statically", i.e. the site owner has minified versions of CSS and Javascript stored on the server and it's those files that are sent to the browser.

JCH_Optimize, from what I remember about it, is mainly about code aggregation. Therefore, in order to better understand what @Scott235 is now describing, it would help to understand what they mean by "optimised"and, if "optimised" by Google speed test site, how they're "optimised". I vaguely remember seeing something in Google about what people can do but it would be nice to refresh my memory with a link to a URL or a screenshot of the idea.

sozzled · Post by **sozzled** » Sun Jul 30, 2017 10:25 pm

leolam wrote:... the Joomla Page Cache is a horror story (Disable that system page cache plugin!)

Amen to that!

Unless people really understand its purpose—and I don't really understand the purpose of the Joomla System - Page Cache plugin—it's better to disable this plugin.

Scott235 · Post by **Scott235** » Sun Jul 30, 2017 11:53 pm

Hi:

The link is - https://developers.google.com/speed/pag ... ab=desktop
At the bottom of the page you'll see - Optimizations Found.
After downloading the zip file it'll open up three folders. Images, CSS and JS.
I've already uploaded the optimized images and they're much smaller then the original ones that were already there when the site was created. The one CSS file I assume is all the CSS files the tool saw and combined all them into one CSS file and did the exact same thing with the JS files.
My question is where does the one JS file and the one CSS file go? and also how would Joomla know to look for the one CSS file and the one JS file instead of all the ones it is using?

sozzled · Post by **sozzled** » Mon Jul 31, 2017 12:34 am

The "optimised" CSS and Javascript each look like a mix of both file minification (stripping out the comments and multiple spaces) and aggregation (combining separate files into one).

Where would you place these files within your website? That's a very good question!

Would it work? That's an even better question!

Would you achieve any significant improvement in site operation if you do this? Who knows!

Does the Google speed test site have all the answers? Definitely not! It only provides recommendations. You can choose to adopt those recommendations or to ignore them.

How would you implement Google's "optimised" files—where would you place them, test them out, etc.—and maintain them over the life of your site? I haven't any idea because this is a very complicated question.

How long will it take to implement the recommendations, test everything out, make sure that nothing breaks as a consequence, etc.? My response is "how long is a piece of string?"

You asked, at the beginning of this topic, how to combine nine separate Javascript files into one. Technically, there are ways to do this and this topic has explored different ways to achieve that outcome. However, this begs the question as to how, and in what specific ways, your website is currently adversely affected by sending nine separate Javascript files (as well as an unknown number of separate CSS files) from the server to the browser? That question hasn't yet been addressed.

In the end, the real question is this: Is there any significant benefit in compressing multiple CSS and Javascript files for websites built in Joomla? The answer is that there's no agreement on that; everyone is entitled to adopt whatever approach suits their particular purposes.

Sometimes I minify and aggregate my CSS and Javascript and sometimes I don't. I can't answer for anyone else.

Scott235 · Post by **Scott235** » Mon Jul 31, 2017 12:38 am

Thanks for your reply and input.

sozzled · Post by **sozzled** » Mon Jul 31, 2017 12:56 am

Thanks for your help, also, @Scott.

At the end of the day, when weighing up whether it's worth the investment of time in code minification/aggregation/obfuscation, there's no easy solution. As a general comment—and this is extremely general—there are pros and cons in using code aggregators/minifiers/obfuscators such as JCH Optimize and there are also other extensions that people can use for these things.

Sometimes these tools work well—depending on what extensions you've installed and use in your website—and sometimes they don't. The net benefit is usually a few milliseconds' savings in the time it takes for the browser to open a page and display it. If you're involved in making regular changes to the site, JCH Optimize can actually interfere instead of being a benefit. If you're making frequent changes to the site, JCH Optimize (or other such tools) could become more of a hindrance than a help. That's why I can't give you a blanket assurance about whether this is a good idea or not.

Some people swear by code aggregators/minifiers/obfuscators and other people swear at 'em! Vive la différence!

Post by **Per Yngve Berg** » Mon Jul 31, 2017 4:28 am

Have you read this article in the Magazine?

https://magazine.joomla.org/issues/issu ... to-do-less

Scott235 · Post by **Scott235** » Mon Jul 31, 2017 4:48 pm

The Joomla! Forum™

Combining numerous JS files into one JS file.

Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.

Re: Combining numerous JS files into one JS file.