Enable Gzip Compression for resources on Production Site about camp-web

[sarathms]

One way to achieve is to tweak the nginx config. I've only used a bare-bones config file currently for production. Pasting it here. Please provide a drop-in replacement after proper testing.

upstream camp_rubyapp {
        server 127.0.0.1:3000;
}

server {
        server_name camp.fsmk.org www.camp.fsmk.org;
        #listen 103.250.184.149;
        root /home/fsmkcamp/public_html/camp-web/public;
        index index.html index.htm index.php;
        access_log /var/log/virtualmin/camp.fsmk.org_access_log;
        error_log /var/log/virtualmin/camp.fsmk.org_error_log;

    location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy true;

      proxy_pass http://camp_rubyapp/;
      proxy_redirect off;
    }
}

Another way is to minify the js. Unless its generated on the fly, it should be done.

[nikhildamle]

Js files will be automatically minified by Rails Sprokets. So only it's required to enable gzip compression in nginx.

Right now I'm not sure with the nginx config file. But enabling gzip shouldn't be difficult. Probably it will be one liner.

I'll test required configuration once I'll be done with my Lab exams (Tomorrow Evening)

[sarathms]

There was this in the unicorn related nginx config file that @vishalvijay was trying. It was failing, I think because of the regex in the location directive. Can someone verify/modify?

    location ~ ^/assets/ {
        root /home/fsmkcamp/camp-web/public;
        gzip_static on; # to serve pre-gzipped version
        expires 1y;
        add_header Cache-Control public;
        add_header ETag "";
        break;
    }

[vishalvijay]

I think JS is already minified.

I was wondering, how it became 1.3 MB.
I checked in development mode. I found that OpenLayers.js is 3MB, JQuery is taking 200+ KB. And all other file are taking 1-100KB. Max 3.8MB.
After compression it is 1.3MB.

Now I removed OpenLayers.js js and ran production mode in my machin, I got total compressed JS size is just 300KB.

We need to do somthing with OpenLayer js

[sarathms]

Can it be linked from a cdn or something?

On Fri, May 30, 2014 at 10:00 PM, Vishal Vijay [email protected]
wrote:

I think JS is already minified.

I was wondering, how it became 1.3 MB.
I checked in development mode. I found that OpenLayers.js is 3MB,
JQuery is taking 200+ KB. And all other file are taking 1-100KB. Max 3.8MB.
After compression it is 1.3MB.

Now I removed OpenLayers.js js and ran production mode in my machin, I got
total compressed JS size is just 300KB.

We need to do somthing with OpenLayer js

—
Reply to this email directly or view it on GitHub
#117 (comment).

[sarathms]

Can this be done? http://docs.openlayers.org/library/deploying.html

On Fri, May 30, 2014 at 11:25 PM, sarath ms [email protected] wrote:

Can it be linked from a cdn or something?

On Fri, May 30, 2014 at 10:00 PM, Vishal Vijay [email protected]
wrote:

I think JS is already minified.

I was wondering, how it became 1.3 MB.
I checked in development mode. I found that OpenLayers.js is 3MB,
JQuery is taking 200+ KB. And all other file are taking 1-100KB. Max 3.8MB.
After compression it is 1.3MB.

Now I removed OpenLayers.js js and ran production mode in my machin, I
got total compressed JS size is just 300KB.

We need to do somthing with OpenLayer js

—
Reply to this email directly or view it on GitHub
#117 (comment).

[nikhildamle]

Since maps are such a kind of thing that requires pretty big amount of screen space, How about just linking to openstreetmaps over a static image of a map. This will not only reduce javascript payload, but also make good UX.

Edit: Something like this

[sarathms]

Nikhil Damle [email protected] wrote:

Since maps are such a kind of thing that requires pretty big amount of
screen space, How about just
linking
to openstreetmaps over a static image of a map. This will not only
reduce javascript payload, but also make good UX.

---

Reply to this email directly or view it on GitHub:
#117 (comment)

+1

Sent from my Android device with K-9 Mail. Please excuse my brevity.

[vishalvijay]

Awesome idea. W'll do that

[nikhildamle]

@sarathms @vishalvijay - I tried the above configuration with nginx. The total transfer size reduced from 1.3MB to 400KB for the home page. Removing openlayers should reduce the total size below 50KB.

Live compilation is enabled in config/environments/production.rb. So i guess assets aren't precompiled.

If the assets aren't precompiled, then there will be no files in public/assets. So the nginx matching assets/{asset-file} will fails as there are no files in there.

The solution is to disable live compilation in production and manually compile assets.
Set live compile to false in config/environments/production.rb

config.assets.compile = false

Precompile assets everytime app is deployed using

$ RAILS_ENV=production rake assets:precompile

Disabling live compile will also speed up rails app since for every request rails will not check for file modification.

[vishalvijay]

@nikhildamle I tried it before. Facing problem with active admin assets. Getting errors while precompiling. I tried some solution for fixing it, but didn't work for me.

Later I went back to default setting where live compiling enabled.

Can you please pull the code and give it a try.

[nikhildamle]

@vishalvijay - Precompiled it again didn't get any errors. Logged in into admin panel, page is properly styled and also no 404s in network panel. So I guess all required active admin assets are properly precompiled. What error are you getting?

[vishalvijay]

@nikhildamle its woking fine. Thanks

[vishalvijay]

@sarathms

    location ~ ^/assets/ {
        root /home/fsmkcamp/camp-web/public;
        gzip_static on; # to serve pre-gzipped version
        expires 1y;
        add_header Cache-Control public;
        add_header ETag "";
        break;
    }

W'll add this to nginx config to night. And deploy. Now this should work.