Jquery.com shows Minified and Gzipped version as 19KB?
Production (19KB, Minified and Gzipped)
Development (120KB, Uncompressed Code)
but when we click on download for Production version. it goes to this link
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=
and the file which is on this page it's size is 55.9 KB. Why jquery.com showing Production (19KB, Minified and Gzipped)
The file's unzipped size is 55.9 kB. That is the result of the minification, which is a shortening of variable names, stripping of white space and the likes.
When you gzip it additionally, it will lose even more size. The gzipped file is downloaded by the browser and unzipped into the 55.9 kB large, minified version internally so it can be read by the JS interpreter.
You can zip files using gzip but usually, if the server is set up correctly, the server will automatically serve gzipped files if the browser signals it can handle them. In that case you don't have to do anything. You can see whether a file was transmitted gzipped using the "view size information" tab in the Web Developer Toolbar for Firefox.
How to get 19KB Minified version of
jquery file?
% wget http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
% gzip jquery-1.3.2.min.js
% du -b jquery-1.3.2.min.js.gz
19716 jquery-1.3.2.min.js.gz
Download this JQuery minified version. Then ensure that your webserver is gzipping output. You need to ensure mod_deflate is enabled and then place the following (similar) setting in your .htaccess file:
# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript application/javascript text/css .php
# Or, compress certain file types by extension:
<Files *.html>
SetOutputFilter DEFLATE
</Files>
That will ensure your files are gzipped to the browser. You can use the webdeveloper toolbar to check the sizes.
To do this in IIS then follow this tutorial
Related
I have a strange problem with my Tomcat 7 (both on Ubuntu and on Windows 7, no Apache in front of Tomcat) compressing CSS/JS.
It works sometimes:
I have a big third party CSS (comprising of Bootstrap, Angular) and JS (Bootstrap, Angular, JQuery), which is NOT compressed. Tomcat doesn't send an
content-encoding: gzip
But my very own CSS/JS are gzipped, as they should (Tomcat sends an content-encoding: gzip to browser in this case).
So this is the server.xml of my Tomcat:
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443"
compression="force"
compressionMinSize="2048"
compressableMimeType="text/html,text/xml,application/javascript,text/css"/>
So in short:
js/thirdParty.js is uncompressed: FAIL!,
js/own.js is compressed: OK
What could be the reason behind that?
Thanks,
Bernhard
I found it out by myself. I have to add the attribute
useSendfile="false"
to the Connector tag. If I don't, Tomcat will not compress
files greather than 48kb (when I use NIO, which is standard for Tomcat7+).
I was working for a client, and his server doesn't allow running javascript. I tried to re-create and re-upload the JS files but the server keeps changing the file type into text. What's up with this? See screenshot below...
You need to add the .js file MIME type in your Apache http.conf with AddType:
AddType application/x-javascript .js
This will tell Apache to serve .js files with the application/javascript type you need.
I ran Google PageSpeed Insights to optimize my site and it recommended archiving the numerous JavaScript files with gzip.
How does this work? How are the files imported/included as an archive? Can they all be inside one big archive, or should they be individual archives?
You can configure your web server to do the compression for you; in the case of Apache:
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
I think they were referring to having static content compressed by the web server. The files themselves are the same, but you may need to do some configuration with whatever web server you have.
See this for more info.
Most web servers (Apache, IIS, Node) support this feature internally or with plugins. You usually just have to enable it on the web server, you don't actually create the zip files or change anything manually. Take a look at http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
I've minified a .js file, and everything is just fine. But, when I gzip, the browser no longer executes the file. What am I doing wrong? Here's the gzip command:
> gzip test.js
Which results in a regular gzip file called test.js.gz. Do I need to include something in the .js, or pass an added argument to gzip so the browser interprets the file correctly? I tested this with both Chrome and FF.
Thank you advance!
This isn't a client side problem.
Your web server has to be configured to recognise the gzipped file, and send the appropriate Content-Encoding: gzip header to tell the browser to expect gzipped data.
179KB of jQuery is Minified and Gzipped to 26KB. I am trying to do the same compressions to my javascript files and found the Yuicompressor to Minify it. But I am still searching for a way to Gzip it.
How can I Gzip my Javascript files?
If you are using it in a webpage, gzip is a configuration method in your web server. The file is gzipped by the server, sent to the browser. No manual action is needed. For Apache: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html.
If you are delivering the code to developers, you could use the gzip command.
You would use gzip, the GNU compression utility. Luckily, the gzip algorithm and file structure is implemented by numerous other tools, such as 7zip (for Windows). You can configure your server (via mod_deflate or others) to compress files on the fly, but for static content its a waste of CPU power.
Here is an article which shows how to transparently serve pre-compressed gzip to browsers which support it: http://blog.alien109.com/2009/03/17/gzip-your-javascript/
You could also use zbugs.com - just provide your website url and it will do everything for you.