Project

General

Profile

Bug #64377

Enable nginx gzip compression to reduce page weight

Added by David Beitey 11 months ago. Updated 7 months ago.

Status:
Done
Priority:
No priority
Assignee:
Waqar Ahmed
Category:
Middleware
Target version:
Seen in:
Severity:
New
Reason for Closing:
Reason for Blocked:
Needs QA:
No
Needs Doc:
No
Needs Merging:
No
Needs Automation:
No
Support Suite Ticket:
n/a
Hardware Configuration:
ChangeLog Required:
No

Description

At present, the Nginx install on FreeNAS 11.2 is serving its resources without using Gzip compression.

This means that, for example, the new Angular-based UI requires a lot more data to be transferred and is slower to load than necessary.
For the new UI specifically, when uncompressed, the initial requests required to load the UI consume 6.14MB (after fixes I made in https://redmine.ixsystems.com/issues/63630 are used). With use of the following Nginx configuration, which enables gzip for text-based mime types, the data transfer required drops to just 1.64MB (saving 4.5MB or 73%):

http {
    
    gzip_types
        text/plain
        text/css
        text/js
        text/xml
        text/javascript
        application/javascript
        application/x-javascript
        application/json
        application/xml
        application/rss+xml
        image/svg+xml;
    
    server {
        
        location /ui {
            
            gzip on;
        }
        
    }
    
}

Unrelated config has been omitted.

This change has the effect of speeding up the UI, even for a nearby LAN-connected NAS, and particularly so for a NAS which is being accessed over connections like cellular. See the attached comparison screenshots of before and after enabling gzipping, loaded on a 1GbE LAN, in Firefox with browser caching disabled. Note the blue is "waiting" and green is "receiving"; both are greatly decreased after gzipping is on. The total request time for the whole page comes down to the websocket connection, which is highly variable, so best to focus on the individual resources themselves (eg main.js goes from 922ms down to just 29ms). Greater time savings occur as the network speed decreases. In this proof-of-concept Gzipping is done dynamically for all requests, however for the static Angular resources, these could be gzipped ahead of time, saving both downloads and CPU time.

Gzipping adds a little CPU overhead (precise figures aren't clear) but the result is that requests and pages require much less data and thus end up loading a lot more quickly. See more info at https://royal.pingdom.com/2018/08/15/can-gzip-compression-really-improve-web-performance/

So, it makes sense to be enabling gzip for the new web UI as it has a significant positive impact on load times. However, Nginx on FreeNAS is serving more than just this UI though, such as documentation, APIs and so on. All these other endpoints could benefit in similar manners -- so thoughts on applying this gzipping for all of the content served? Responses like images or fonts are usually not compressed as they don't give the savings that text does.

Happy to create a PR for this if required; I just need some guidance on which file(s) to modify since a quick look shows several nginx.conf files are present in the repo at https://github.com/freenas/freenas/

before.png (175 KB) before.png Before gzipping David Beitey, 12/14/2018 09:00 PM
after.png (176 KB) after.png After gzipping David Beitey, 12/14/2018 09:00 PM
45306
45315

Associated revisions

Revision 5358d6da (diff)
Added by Waqar Ahmed 10 months ago

Gzip compression in nginx This commit enables gzip compression for nginx. Ticket: #64377

Revision 230e64c9 (diff)
Added by Waqar Ahmed 10 months ago

Gzip compression in nginx This commit enables gzip compression for nginx. Ticket: #64377

History

#1 Updated by David Beitey 11 months ago

  • File deleted (before.png)

#2 Updated by David Beitey 11 months ago

  • File deleted (after.png)

#3 Updated by David Beitey 11 months ago

45306
45315

#4 Updated by Dru Lavigne 11 months ago

  • Assignee changed from Release Council to Alexander Motin

#6 Updated by Alexander Motin 11 months ago

  • Category changed from OS to Middleware
  • Assignee changed from Alexander Motin to William Grzybowski

#8 Updated by William Grzybowski 11 months ago

  • Assignee changed from William Grzybowski to Waqar Ahmed
  • Target version changed from Backlog to 11.3

Waqar, can you please enable gzip in our nginx.conf?

I cant think of a reason why we shouldnt do this.

#9 Updated by Waqar Ahmed 11 months ago

  • Status changed from Unscreened to Screened

#10 Updated by Waqar Ahmed 10 months ago

  • Status changed from Screened to In Progress

#11 Updated by Bug Clerk 10 months ago

  • Status changed from In Progress to Ready for Testing

#12 Updated by David Beitey 10 months ago

Bug Clerk wrote:

11.3 PR: https://github.com/freenas/freenas/pull/2394

LGTM. With gzipping, login page data transfer drops from 6.18MB to 1.48MB.

The web UI's JavaScript is still 5MB+ that needs to be executed on each request (unsure if that can be optimised) but at least with caching the resources only need to be downloaded once.

#13 Updated by Waqar Ahmed 10 months ago

Thank you for your help David ;)

#14 Updated by Dru Lavigne 10 months ago

  • Subject changed from Nginx on FreeNAS should gzip compress responses to reduce page weight to Enable nginx gzip compression to reduce page weight
  • Needs Doc changed from Yes to No
  • Needs Merging changed from Yes to No

#15 Updated by Dru Lavigne 10 months ago

  • Target version changed from 11.3 to 11.3-BETA1

#16 Updated by Dru Lavigne 9 months ago

  • Status changed from Ready for Testing to Done
  • Needs QA changed from Yes to No

#18 Updated by Dru Lavigne 7 months ago

  • Target version changed from 11.3-BETA1 to 11.3-ALPHA1

Also available in: Atom PDF