<p>nginx 是一个高性能的 Web 服务器，之前也写过一些关于 nginx 的文章。为了提高博客的响应速度，可以从设置 nginx 的 gzip 和缓存这2方面入手。为字体开启 gzip 和缓存能大大减少带宽的消耗。<br/></p><p><strong>开启gzip</strong></p><p><strong>配置</strong></p><pre class="brush:bash;toolbar:false">http { .... ..... # 开启gzip gzip on; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明 gzip_comp_level 2; # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。 # 由于jpg,jpeg,png本来就是压缩格式，再行压缩只会消耗cpu资源，帮助并不大 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/gif; # 是否在http header中添加Vary: Accept-Encoding，建议开启 gzip_vary on; #压缩版本（默认1.1，前端如果是squid2.5请使用1.0） gzip_http_version 1.0; # 禁用IE 6 gzip gzip_disable "MSIE [1-6]\."; .... }</pre><p>关于具体的参数说明可以参考 <a href="http://nginx.org/en/docs/http/ngx_http_gzip_static_module.html" target="_blank">nginx 的文档</a>。</p><p><strong>gzip_comp_level 参数</strong></p><p>关于 gzip_comp_level 的合理值，可以参考下图。来自 <a href="http://serverfault.com/questions/253074/what-is-the-best-nginx-compression-gzip-level" target="_blank">serverfault</a></p><p><p style="text-align: center;"><img src="/upload/content/20190404/1554353279241563.jpg" alt="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度"title="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度" width="550px"></p><p>nginx gzip 压缩比</p><p>从图中可以看出 gzip_comp_level 大于2时效果并不是很明显。所以可以将值设置为1或者2。</p><p></p><hr/><p><strong>开启缓存</strong><br/></p><p>配置</p><pre class="brush:bash;toolbar:false">server { location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { access_log off; expires 30d; } location ~* ^.+\.(css|js|txt|xml|swf|wav)$ { access_log off; expires 24h; } location ~* ^.+\.(html|htm)$ { expires 1h; } }</pre><p>关于字体其中的缓存时间可以自己根据需要修改。</p><p><strong>关于字体</strong><br/></p><p>为静态资源开启缓存能够较少服务器带宽的消耗，特别是在css中使用字体时，同时配合gzip压缩能够大大减少下载字体造成的带宽影响。</p><p><strong>设置字体缓存</strong></p><p>需要注意的是，字体有很多格式，为所有字体格式设置缓存是很有必要的。</p><pre class="brush:bash;toolbar:false">server { location ~* ^.+\.(eot|ttf|otf|woff|svg)$ { access_log off; expires max; } }</pre><p><strong>启用gzip</strong><br/></p><p>只需要为 ttf、otf 和 svg 字体启用 gzip，对其他字体格式进行 gzip 压缩时效果不明显。启用gzip</p><pre>http { gzip_types font/ttf font/otf image/svg+xml }</pre><p>各种字体类型压缩效果可以参考以下测试结果：</p><p>ttf字体压缩效果</p><p><p style="text-align: center;"><img src="/upload/content/20190404/1554353308523552.jpg" alt="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度"title="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度" width="550px"></p><p>otf字体压缩效果</p><p><p style="text-align: center;"><img src="/upload/content/20190404/1554353309973977.jpg" alt="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度"title="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度" width="550px"></p><p>svg字体压缩效果</p><p><p style="text-align: center;"><img src="/upload/content/20190404/1554353309646760.jpg" alt="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度"title="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度" width="550px"></p><p>woff字体压缩效果</p><p><p style="text-align: center;"><img src="/upload/content/20190404/1554353309744965.jpg" alt="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度"title="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度" width="550px"></p><p>可以看到对 woff 和 eot 进行 gzip 压缩效果不好。</p><p></p><hr/><p><strong>字体总结</strong><br/></p><table class="table table-striped table-bordered table-hover" width="619"><thead><tr class="firstRow"><th style="padding: 8px 8px 10px; text-align: left; vertical-align: middle; border-bottom-width: 3px; border-right-color: rgb(238, 238, 238);">扩展名</th><th style="padding: 8px 8px 10px; text-align: left; vertical-align: middle; border-bottom-width: 3px; border-right-color: rgb(238, 238, 238);">是否压缩</th><th style="padding: 8px 8px 10px; text-align: left; vertical-align: middle; border-bottom-width: 3px; border-right-color: rgb(238, 238, 238);">Content-type</th></tr></thead><tbody><tr style="background-color: rgb(249, 249, 249);"><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">.eot</td><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">否</td><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">application/vnd.ms-fontobject</td></tr><tr><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">.ttf</td><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">是</td><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">font/ttf</td></tr><tr style="background-color: rgb(249, 249, 249);"><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">.otf</td><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">是</td><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">font/opentype</td></tr><tr><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">.woff</td><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">否</td><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">font/x-woff</td></tr><tr style="background-color: rgb(245, 245, 245);"><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">.svg</td><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">是</td><td style="padding: 8px; text-align: left; vertical-align: middle; border-right-color: rgb(238, 238, 238);">image/svg+xml</td></tr></tbody></table><p>最后所有静态文件有nginx直接读取不经过服务容器</p><pre>server{ .... ... #所有静态文件由nginx直接读取不经过tomcat或resin等服务容器 location ~ .*.(htm|html|gif|jpg|jpeg|png|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma)$ { expires 15d; } location ~ .*.(js|css)?$ { expires 1h; } }</pre><p>chrome 查看：</p><p><p style="text-align: center;"><img src="/upload/content/20190404/1554353394970636.jpg" alt="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度"title="Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度" width="550px"></p><p>以上就是关于“Nginx配置gzip：服务器开启gzip和缓存提高页面加载速度”的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流。</p>
