在Magento的NGINX服务器上启用CSS和JS文件的GZIP压缩

Question

我需要在nginx服务器上启用gzip压缩。从Firefox火狐浏览器的网络工具中，我发现HTML文件被gzip压缩了，但是JavaScript和CSS文件没有。

我已经检查了Mime.types和nginx配置文件/etc/nginx/ngnix.conf，并没有发现任何问题。但仍然无法看到CSS和JavaScript的Gzip压缩。我的NGINX.conf条目如下：

gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

- Anant

---

如果您选择备受欢迎的Fooman Speedster，那么JS和CSS将自动进行gzip压缩。 - clockworkgeek

@clockworkgeek..谢谢！！！但我想配置nginx，以便可以对CSS和JS文件进行gzip压缩。 - Anant

Answer 1

这是我目前在生产中使用的有效配置。

http://pastie.org/10870547

gzip on;
gzip_disable "msie6";

gzip_comp_level 6;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_proxied any;
gzip_types
    text/plain
    text/css
    text/js
    text/xml
    text/javascript
    application/javascript
    application/json
    application/xml
    application/rss+xml
    image/svg+xml;

该配置已通过tools.pingdom.com进行测试。

- Vern Burton

---

谢谢回复。我不知道原因，但这对我没有起作用。你能逐步解释调试问题的过程或启用CSS和JS文件的gzip压缩的正确步骤吗？最令人惊讶的是，Gzip适用于html内容即text/html MIME类型，但不适用于CSS和JS。还有一件事是服务器上启用了Varnish缓存，服务器操作系统是Ubuntu。 - Anant

你的头部和标头是否打了esi标签？如果是的话，它们将从Varnish中提供。 - Vern Burton

应该诚实地将SVG添加到答案中。 - Sammaye

谢谢！需要移除 application/x-javascript，一切都正常工作了！ - zaw

这个支持默认的gzip_types text/html值吗？ - vladkras

请注意，gzip_types 使得在“text/html”之外的指定MIME类型的响应也可以进行gzip压缩。 - Andrea Rabbaglietti

Answer 2

你可以从html5 boilerplate代码中找到示例配置。

  # 启用Gzip
  gzip on;
  gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_min_length 1100;
  gzip_buffers 4 8k;
  gzip_proxied any;
  gzip_types
    # text/html 总是被 HttpGzipModule 压缩
    text/css
    text/javascript
    text/xml
    text/plain
    text/x-component
    application/javascript
    application/json
    application/xml
    application/rss+xml
    font/truetype
    font/opentype
    application/vnd.ms-fontobject
    image/svg+xml;
gzip_static on;
gzip_proxied expired no-cache no-store private auth;
  gzip_disable "MSIE [1-6]\.";
  gzip_vary on;

- Koray Güclü

---

感谢HttpGzipModule始终压缩text/html。 - tcpiper

Answer 3

如果你的文件中有一些是压缩的，而一些则没有，那么你的gzip正在工作，但你可能错过了在 gzip_types 中定义的内容。例如，javascript 文件可能会在头部返回以下任意一种类型：

• application/javascript
• application/x-javascript
• text/javascript

为了压缩所有的 javascript 文件，这三个定义都应该包含在 gzip_types 中。

你需要检查 响应头 返回的未压缩文件的 content-type 是什么，然后确保它也在 gzip_types 中进行了定义。

- lubosdz

---

这很重要！所有三个定义都应包含在gzip_types中....这个答案让我的gtmetrix分数从74%跳到了92%。 - Naweed Chougle

谢谢。可以了。我会检查我的文件之一的响应头，看起来它没有被压缩。 - KhoPhi

我的浏览器是Firefox 59.0b5版本，请求JavaScript文件时类型为application/javascript，由于我没有在gzip_types中添加该类型，所以无法正常工作。在添加了该类型后，现在它已经可以正常工作了！ - zw963

Answer 4

您的nginx配置文件中的gzip条目是否在js、css等资源的“范围”内？我问这个问题是因为如果您使用某种框架，有时会有不同的location{...}块来处理html请求和资源。

另外，在浏览器中进行测试时，请确保进行硬刷新以强制服务器向您提供您正在查看的“新副本”。

最后，您可以使用gzip_types *来允许任何内容都被压缩。也许其他人可以发表意见，这是否是一个好的实践。

- Mike T

---

你能给一些例子吗？ - karadayi

位置~* .*.(ico|gif|jpg|jpeg|png|js|css|txt|wsdl|html) { 尝试文件 $uri $uri/ /index.php; } - Mike T

通常情况下，不建议使用gzip_types *。它可能会尝试压缩已经压缩过的资源或难以压缩的资源（如某些图像）。这可能不会导致显着的空间节省。因此，它只是作为一种惩罚，浪费时间而进行gzip压缩资源。gzip_min_length 1100;指令也试图找到这种平衡。 - Zachary Moshansky

Answer 5

压缩SVG的方法是，使用以下代码：

image/svg+xml svg svgz;

- karadayi