前端性能优化：启用 gzip

2024-04-21 19:20:33

大家好，我是前端西瓜哥。今天带大家学习如何启用 gzip 来做前端性能优化。

HTTP 上的 gzip

gzip 是一种优秀的压缩算法，我们可以在 HTTP 请求上对一些文本文件，设置 gzip 压缩。

服务端将响应头设置上 Content-encoding: gzip，表示当前资源会使用 gzip 压缩，提示客户端解压使用。

当然前提是客户端支持该压缩算法，服务端会通过客户端发送的请求头中的 Accept-Encoding 字段来确定是否支持。

只对文本文件进行压缩，是因为文本类压缩效果好，而图片视频这些文件则本身就是进行压缩过的，压缩起来不仅效果差，还因为体积大耗费时间。

我用我自己的网站 https://frontend.fstars.wang 做了测试。

开启 gzip 前 index.html 大小为 8.4 KB：

开了 gzip 后减小为 2.7 KB：

你还可以对比图片上其他资源 gzip 压缩前后的大小变化，提升还是相当可观的。我能够感觉到加载确实快了一些的。

Nginx 上开启 gzip

Nginx 默认是不开启 gzip 的，你需要这样设置：

http {# 开启 gzip 压缩gzip  on;# 使用 gzip 压缩的文件类型# 此外，text/html 是自带的，不用写上gzip_types text/plain text/css application/javascript application/json text/xml application/xml application/xml+rss;# 小于 256 字节的不压缩# 这是因为压缩是需要时间的，太小的话压缩收益不大gzip_min_length 256;# 开启静态压缩# 压缩的资源会被缓存下来，下次请求时就直接使用缓存gzip_static  on;
}

结尾

绝大多数的网站都对文本文件做了 gzip 压缩传输处理，降低了带宽压力，也让用户能够更快地加载资源，属于是一个非常基础的前端性能优化了。

如果你也部署了自己的个人网站，快去看看你是否正确地开启了 gzip。

我是前端西瓜哥，欢迎关注我，学习更多前端知识。

前端性能优化：启用 gzip相关推荐

前端性能优化之gzip
gzip是GNUzip的缩写,它是一个GNU自由软件的文件压缩程序.它最早由Jean-loup Gailly和Mark Adler创建,用于UNⅨ系统的文件压缩.我们在Linux中经常会用到后缀为.g ...
前端性能优化之 gzip+cache-control
刚刚在Node.js环境下使用gzippo模块进行了测试. 使用gzip的压缩率惊人的好,达到了50%以上. 再加上express的staticCache,配合cache-control max-ag ...
前端性能优化之gzip压缩(压缩js、css、HTML，千万不能压缩图片！)
gzip主要用来压缩html,css,javascript等静态文本文件,gzip 压缩的比率通常在3~10 倍之间,压缩后的体积能达到只有原本的30%左右,这样就能大大节省服务器的网络带宽和大大提升 ...
speeding up your web site 前端性能优化规则（一）
接上一篇:speeding up your web site 前端性能优化 -------------------------------------------------------------- ...
深度讲解：web前端性能优化
一.课程简介: 1.课程大纲涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类型选择浏览器渲染机制懒加载预加载浏览器存储缓存机 ...
大型网站技术架构（3）：WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
前端性能优化——从 10 多秒到 1.05 秒
https://lishaoy.net 关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程.常见技术手段.工具等. 提及前端性能优化 ,大家应该都会想到雅虎军 ...
移动H5前端性能优化指南[转]
移动H5前端性能优化指南米随随2015.01.23 移动H5前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
前端性能优化 -- 从 10 多秒到 1.05 秒
关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程.常见技术手段.工具等. 提及前端性能优化 ,大家应该都会想到雅虎军规,本文会结合雅虎军规融入自己的了解 ...

最新文章

热门文章