如何用gzip进行前端性能优化?

一、简介

HTTP 可以对传输的内容进行压缩,减少网络实际传输数据的大小。原理就是 服务器对文件进行 gzip 压缩后,再进行传输,浏览器收到资源后再解压的过程。

  • 对于 js、text、json、css 这种纯文本进行压缩,效果特别好,不用改变代码即可提升网站响应速度;
  • 压缩过程是需要花费 CPU 资源的,对大文件(图片、音乐等)进行压缩,不仅不能提升网站响应速度,还会增加服务器压力,让网站有明显的卡顿感。

二、nginx 开启 gzip

服务器使用 nginx,浏览器使用 chrome,开启 gzip,看看实际优化的效果。

1、修改配置

打开 nginx 的配置文件 sudo nano /etc/nginx/nginx.conf,找到 gzip 对应区域,增加下面配置后,保存退出。

# 开启gzip,关闭用off
gzip on;

# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;

# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间,推荐6
gzip_comp_level 6;

# 设置压缩所需要的缓冲区大小 
gzip_buffers 16 8k;

# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

# 选择压缩的文件类型,其值可以在 mime.types 文件中找到。
gzip_types text/plain text/css application/json application/javascript


# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;

# gzip_proxied any;

2、重启 nginx
# 1、重启:
sudo /etc/init.d/nginx restart

# 2、重新加载配置文件,无需重启:
sudo /etc/init.d/nginx reload

3、查看 gzip 是否开启?
  1. 打开网站;
  2. 打开开发者工具(windows快捷键Control+Shift+J、Mac快捷键Command+Option+J);
  3. 如下图,响应头中有 Content-Encoding: gzip ,表示已经开启。
查看是否开启gzip

4、查看 gzip 压缩效果?
  1. 打开网站;
  2. 打开开发者工具(windows快捷键Control+Shift+J、Mac快捷键Command+Option+J);
  3. 如下图,73.9kb表示是压缩后在网络传输的大小;574kb表示是实际文件的大小。
查看文件实际大小和网络传输大小

三、前端性能检测工具

lighthouse 是谷歌的开源项目,一键即可查找出网站所有需要优化的内容和建议。安装和使用,可以看这里!

lighthouse-report

四、参考文档
  • 如何用gzip进行前端性能优化?

你可能感兴趣的:(如何用gzip进行前端性能优化?)