I have a javascript file hosted on Cloudfront, the 'Compress objects automatically' settings are set to Yes in the distribution settings. When I request this javascript file, I always get the gzipped version even though my browser accept-encoding is set to: accept-encoding: gzip, deflate, br.
How can I fix this to get Cloudfront to return the Brotli version whenever the browser supports it instead of always sending the gzipped version?
If the file is stored on S3 uncompressed, and Gzip compression is working, one setting to check is whether the Cache Policy that you have attached to this cache behavior has Brotli compression enabled. You have to enable Brotli and Gzip compression separately.
Related
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'm getting this JavaScript error
XMLHttpRequest cannot load http://foo.bar.no/API/map_tools/clean_addresses/check. Origin http://foo.bar.no:9294 is not allowed by Access-Control-Allow-Origin.
This is all on the same domain and the same server, but my JavaScript project is being hosted by a standalone server script that automatically bundles the JavaScript and it's dependencies into one file.
How do I get past this restriction while I'm developing?
I've tried allowing my JavaScript server script to connect. This is the result of a curl to the url:
HTTP/1.1 200 OK
Date: Wed, 11 Jan 2012 09:05:14 GMT
Server: Apache/2.2.16 (Debian)
Access-Control-Allow-Origin: http://foo.bar.no:9294
Vary: Accept-Encoding
Content-Length: 70
Content-Type: text/plain
array(1) {
["q"]=>
string(31) "map_tools/clean_addresses/check"
}
And still I get the exact same error as I pasted above. Why does Chrome still refuse to connect to the damn URL when it's obviously allowed to!?
OK I figured it out. I was looking for a simple and quick fix since I only need the cross domain requests for development purposes. Turns out that I just had to set both
header("Access-Control-Allow-Origin: http://foo.bar.no:9294");
header("Access-Control-Allow-Credentials: true");
In my PHP script on Apache. Then in my JavaScript code:
# Set jQuery ajax to use 'withCredentials' globally
$.ajaxSetup({
xhrFields: {
withCredentials: true
}
});
And that did the trick
Use your webserver's reverse proxy capabilities to proxy http://foo.bar.no/API/map_tools/clean_addresses/check to http://foo.bar.no:9294/API/map_tools/clean_addresses/check.
So, as you use Apache, you should add something like
<Proxy *>
Order allow,deny
allow from all
</Proxy>
ProxyPass /API/map_tools/ http://foo.bar.no:9294/API/map_tools/
ProxyPassReverse /API/map_tools/ http://foo.bar.no:9294/API/map_tools/
to your vhost config
You can get around cross-domain security restrictions in chrome by starting it with the --disable-web-security flag.
E.g. (on OS X):
open /Applications/Google\ Chrome.app/ --args --disable-web-security
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.
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