美文网首页程序员
前端性能优化 - Nginx配置Gzip方法及其必要性

前端性能优化 - Nginx配置Gzip方法及其必要性

作者: 叶叶叶同学 | 来源:发表于2020-10-14 09:47 被阅读0次

Nginx配置Gzip

在对应的Nginx配置里,添加gzip on即可

access_log  /var/log/nginx/access.log  main;
gzip on;
#这里根据实际情况加上gzip的一些`min_length`,`buffers`等即可做客制化配置

根据实际情况加上gzip的一些min_length,buffers等即可做客制化配置

开启Gzip的必要性

主要分两个方面

  • 浏览器传输资源大小 -》大幅度减少传输资源的大小
  • 浏览器加载速度大小 -》大幅度提升加载速度

大小方面

同一个项目,Gzip前,浏览器传输大小约为:


Gzip前.png

Gzip后,约为:


Gzip后.png

整体大小缩小了65%

速度方面

同一个项目,Gzip前后速度对比,分五次加载,搜集浏览器加载时间

Gzip前:

Gzip前速度
如上图,基本加载速度,DOMContentLoaded都要7.09s,整体完成均速度基本在7s以上

Gzip后:

Gzip后速度
如上图,基本加载速度,DOMContentLoaded基本保持在1.5s左右完成,整体完成速度基本在2s左右

整体速度提升了70%

开启Gzip后,大小减少65%,速度提升70%,有啥理由不开启呢?

赶巧了,正好发现某个没开启Gzip的知名电商网站,其实它不仅Gzip也没设置,连首屏渲染等技术都没应用上去

未免说我打广告,特解释情况:
疫情在家期间玩狼人杀组了个工会,现上班了都没时间玩,此微信群沦为了拼某夕砍价群,某人发了个砍价链接


非打广告证明.png

链接如下,有兴趣的自己去点击打开尝试
https://www.tdpgihip.cn/8Syn.asp?707DC5CE2D=620tp3JYxU19a65L

当前我打开,加载速度是这样的


image.png

然后看下,果然Gzip没开(其实开了也要配置一些参数才能更好优化的,详细google)

没开Gzip.png

嗯,对,还白屏了好久好久,具体自己点击体验体验吧

哦对了,还有些小盆友打开了一次上面的链接之后,再次在微信打开会说:“不会啊,我打开很快了现在。”我只能说哈哈哈啦,第二次打开的话,微信有缓存机制,是已经把之前的资源缓存下来了,所以二次打开才会快的哦

相关文章

网友评论

    本文标题:前端性能优化 - Nginx配置Gzip方法及其必要性

    本文链接:https://www.haomeiwen.com/subject/ijeipktx.html