Do you compress your JavaScript files?

Question

I always use the minified version of JQuery to save space and bandwitdth, so I was thinking about also compressing my JavaScript files.

But would it significantly save page load time? What compressor would you recommend?

Thanks in advance 😊

Answer 1

you could imagine how all those newlines/tabs/spaces gradually adds up as your codebase grows

in here you can find some tools/sites for minification of HTML CSS and JS

https://developers.google.com/speed/docs/insights/MinifyResources

and there's also this site, which tells you after minification how much space was saved:

https://www.minifier.org

Answer 2

@Paola: I could be wrong, but it sounds like you might be referring to gzip compresion. If so, this is typically configured via the htaccess file and requires either the mod_deflate or mod_gzip extensions to be enabled on the web server. The mod_deflate is the more current and preferred extension for gzip compression. But, you should be able to work with mod_gzip if that is the only one available. Just be aware that not all hosts support these extensions. You may need to consult with your host for further support.

Here are some links to help you with the details:

- https://kinsta.com/knowledgebase/enable-gzip-compression/

- https://winningwp.com/how-to-enable-gzip-compression-for-wordpress/

- https://softstribe.com/wordpress/enable-gzip-compression-in-wordpress/

Answer 3

Here are some additional links from Google's PageSpeed Tools website. The 2nd link presents various compression ratios for various common JS and CSS libraries in both standard and minified format.

- https://developers.google.com/speed/docs/insights/EnableCompression

- https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text-compression-with-gzip

Answer 4

Thanks a lot for the valuable info @David pretty interesting stuff 😊 I had come across the gzip setup but I was hoping to find a plugin that would cache the minified versions of my files on the plugin's folder and send those to the browsers, something like this one: https://es.wordpress.org/plugins/bwp-minify/ I haven't tested it yet because it hasn't been updated in 2 years, so I was looking for recommendations 😊 but thanks again!

Answer 5

in this post @Morpheus

somewhere out there someone is diving by zero right now
i must go now

you got it covered here >:D

Answer 6

no probs :)

Answer 7

@Burey: If I may ask you another quick question :) would you recommend a particular plugin to compress pages in Wordpress? There are many plugins installed on a site and I'd like to reduce the number of HTTP requests :) Thanks 😊

Answer 8

I see... Autoptimize is highly regarded:

https://wordpress.org/plugins/autoptimize/

This article does give another one the edge in a recent review:

https://themeisle.com/blog/wordpress-minify-plugins/

Answer 9

Thanks @David got to test them ;)

Answer 10

very helpful post, 👍
I read this in the inner links of that link by Burey( since the main link was introductory)

optimization turns out to be 2 step process every where

1.Apply content-specific optimizations first: CSS, JS, and HTML minifiers.
( I ve not used minifiers till now, but I HV used webpack bundler, I think that it does some minification too,
as comments, space , tabs, identifier gets affected in the resultant bundled file)

2.Apply GZIP or something else to further compress the minified output.
( GZIP is highly regarded and is used by many CDNs by default, it works its compression on the final byte streams that is to be sent ) but it's more of a server centric task

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#minification-preprocessing--context-specific-optimizations

Answer 11

hahahhaha 😂 yes, Burey needs to go save someone in the Q/A asking for a php code to increase their RAM ( ...true story 😂)

Answer 12

@Paola... Something to consider with minifying via plugin on WordPress is not all JS across all plugins and third party themes are written the same. Some plugins might be very popular, but contains poorly written JS that will break when minified. Therefore, you'll definitely want to test everything when using minify plugins.

Ideally, as @morpheus mentioned, it's much nicer when you can control all file preprocessing steps, like minify, uglify, combining, and modularizing all JS via webpack, gulp, or grunt. But that luxury isn't simple when using third party plugins written by other authors. You should be able to exclude incompatible JS via the minify plugins.

As a side note, I recommend putting WordPress sites behind nginx as a reverse proxy so you can manually configure caching and other rules there. It's extremely powerful, but may have a learning curve for some people.

Answer 13

all those free and unused spaces will take lil pieces of your memory so yea if you have a big block of code you deffinitly should use the mini version of it and i think bootstrap has a CDM link for it as well check it out on bootstrap.com click on download and you'll be able to see it in the page .

Answer 14

seems i not needed here anymore ^_^

not that i know much about wordpress anywho xD

Answer 15

@Morpheus: I do love those epiphany moments. 😎Glad I was able to trigger one of those for you. 👍

Answer 16

Hi @Optimist... I'm glad to see you are excited about your progress with JavaScript. However, it's considered spamming when posting irrelevant links like these on unrelated question posts. I'm sure you were not aware of this. So, it's no problem if you remove these links from this post.

You are free to post your links in question posts that are dedicated to sharing these kind of links.

For example, the link below has nearly 50K answers and almost 600 upvotes. Posting your links to this thread will get a lot of attention.

https://www.sololearn.com/Discuss/454972/off-topic-let-s-celebrate-your-day

In the meantime, please remove these links from this post and thank you for your understanding. 🤗

Answer 17

hahaha thanks @Burey, it's ok 😊 also thanks @Morpheus great info and awesome movie😊👍

Answer 18

@Burey why do say u not needed anymore, 60 % of my quality info in SoloLearn comes from ur posts alone, for JavaScript , nodejs.

Answer 19

@David, I couldn't understand the term
"nginx as a reverse proxy server "

and because of that I got to have my awesome EUREKA moment for today, by reading this awesome answer and knowing the difference between forward proxies and reverse proxies , and use of nginx.

It connected a lot of dots for me

https://stackoverflow.com/questions/224664/difference-between-proxy-server-and-reverse-proxy-server

thx

Answer 20

@Burey awesome tools! Big thanks 💙 you keep getting the best answer in my questions hahah 👍

@kanaan I agree, we all should, thank you for your response!