VuePress 博客优化之开启 Gzip 压缩

冴羽
• 阅读 918

前言

《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,在 《一篇从购买服务器到部署博客代码的详细教程》中,我们将代码部署到服务器上,最终的效果查看:TypeScript 中文文档。今天我们来学习如何开启服务器的 Gzip 压缩。

Gzip 压缩

关于 Gzip 压缩,引用 MDN 的介绍

Gzip 是一种用于文件压缩与解压缩的文件格式。它基于 Deflate 算法,可将文件压缩地更小,从而实现更快的网络传输。 Web服务器与现代浏览器普遍地支持 Gzip,这意味着服务器可以在发送文件之前自动使用 Gzip 压缩文件,而浏览器可以在接收文件时自行解压缩文件。

而对于我们而言,开启 Gzip,不仅能提高网站打开速度,还能节约网站流量,像我购买的服务器是按照使用流量付费,开启 Gzip 就是在为自己省钱。

Nginx 与 Gzip

Nginx 内置了 ngx_http_gzip_module 模块,该模块会拦截请求,并对需要做 Gzip 压缩的文件做压缩。因为是内部集成,所以我们只用修改 Nginx 的配置,就可以直接开启。

# 登陆服务器
ssh -v root@8.147.xxx.xxx

# 进入 Nginx 目录
cd /etc/nginx

# 修改 Nginx 配置
vim nginx.conf

在 server 中添加 Gzip 压缩相关配置:

server {
        listen 443 ssl;
        server_name ts.yayujs.com;
        ssl_certificate cert/6982037_ts.yayujs.com.pem;
        ssl_certificate_key cert/6982037_ts.yayujs.com.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_prefer_server_ciphers on;
        location ^~ /learn-typescript/ {
                alias /home/www/website/ts/;
        }
        location / {
                alias /home/www/website/ts/;
                index index.html;
        }
              # 这里是新增的 gzip 配置
              gzip on;
              gzip_min_length 1k;
              gzip_comp_level 6;
              gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/xhtml+xml application/xml font/eot font/otf font/ttf image/svg+xml text/css text/javascript text/plain text/xml;
}

这里简要介绍一下涉及到的配置项含义,更具体的可以查看 Nginx 官方文档里的解释

  1. gzip :是否开启 gzip 模块 on 表示开启 off 表示关闭,默认是 off
  2. gzip_min_length: 设置压缩的最小文件大小,小于该设置值的文件将不会压缩
  3. gzip_comp_level: 压缩级别,从 1 到 9,默认 1,数字越大压缩效果越好,但也会越占用 CPU 时间,这里选了一个常见的折中值
  4. gzip_types:进行压缩的文件类型

修改完后,不要忘记重新加载一次 Nginx 配置:

systemctl reload nginx

验证

第一种方式是直接查看网络请求,打开浏览器的调试工具,查看 Network 请求,如果请求响应头的 Content-Encoding 字段为 gzip,就表示成功开启了 Gzip:

VuePress 博客优化之开启 Gzip 压缩

第二种方式是通过站长工具验证,打开网页GZIP压缩检测,输入网站,进行查询:

VuePress 博客优化之开启 Gzip 压缩

效果

我们以「基础」章节页面为例,这是开启 Gzip 压缩前的截图:

VuePress 博客优化之开启 Gzip 压缩

我们可以看到传输大小为 2.2M,用时 14.53s。

这是开启 Gzip 压缩后的截图:

VuePress 博客优化之开启 Gzip 压缩

我们可以看到传输大小为 526 K,用时 1.27s,可以看到资源大小、加载速度都得到了大幅的提升。

系列文章

博客搭建系列是我至今写的唯一一个偏实战的系列教程,讲解如何使用 VuePress 搭建博客,并部署到 GitHub、Gitee、个人服务器等平台。

  1. 一篇带你用 VuePress + GitHub Pages 搭建博客
  2. 一篇教你代码同步 GitHub 和 Gitee
  3. 还不会用 GitHub Actions ?看看这篇
  4. Gitee 如何自动部署 Pages?还是用 GitHub Actions!
  5. 一份前端够用的 Linux 命令
  6. 一份简单够用的 Nginx Location 配置讲解
  7. 一篇从购买服务器到部署博客代码的详细教程
  8. 一篇域名从购买到备案到解析的详细教程
  9. VuePress 博客优化之 last updated 最后更新时间如何设置
  10. VuePress 博客优化之添加数据统计功能
  11. VuePress 博客优化之开启 HTTPS

微信:「mqyqingfeng」,加我进冴羽唯一的读者群。

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励。

点赞
收藏
评论区
推荐文章
Stella981 Stella981
1年前
Linux 下解压 rar 文件
网上下载rar 压缩文件的使用,在linux在我们需要对其进行解压缩,这个时候,我们需要安装 rar相关的文件,来进行解压缩。 1\. 下载 我们进入[rarlab网站](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.rarlab.com%2Fdownload.htm),进行下
Stella981 Stella981
1年前
Kafka 2.1.0压缩算法性能测试
Apache Kafka 2.1.0正式支持ZStandard —— ZStandard是Facebook开源的压缩算法,旨在提供超高的压缩比(compression ratio),具体细节参见https://facebook.github.io/zstd/。本文对Kafka支持的这几种压缩算法(GZIP、Snappy、LZ4、ZStandard)做了一下基
Stella981 Stella981
1年前
Linux下的解压缩
Linux下常见的压缩包格式有5种:zip tar.gz tar.bz2 tar.xz tar.Z 其中tar是种打包格式,gz和bz2等后缀才是指代压缩方式:gzip和bzip2 filename**.zip**的解压: unzip filename.zip filename**.tar.gz**的解压: tar -zxvf fi
Stella981 Stella981
1年前
Hadoop所支持的几种压缩格式
**Gzip压缩** 优点:压缩率比较高,而且压缩/解压速度也比较快;hadoop本身支持,在应用中处理gzip格式的文件就和直接处理文本一样;有hadoop native库;大部分linux系统都自带gzip命令,使用方便。 缺点:不支持split。 应用场景:当每个文件压缩之后在130M以内的(1个块大小内),都可以考虑用gzip压缩格式。譬如说一
Wesley13 Wesley13
1年前
C#解压或压缩文件夹
C#解压或压缩文件夹 最近要做一个项目涉及到C#中压缩与解压缩的问题的解决方法,大家分享。 这里主要解决文件夹包含文件夹的解压缩问题。 1)下载SharpZipLib.dll,在[http://www.icsharpcode.net/OpenSource/SharpZipLib/Download.aspx中有最新免费版本,“Assemblies](https
Stella981 Stella981
1年前
RestTemplate与Gzip压缩
`Gzip` 是一种压缩算法,服务器经常通过这个算法来压缩响应体,再响应给客户端,从而减少数据体积,提高传输速度。客户端再通过`Gzip`解压缩,获取到原始的数据。因为需要压缩计算,所以会耗费额外的CPU资源。 `Gzip` 与 HttpHeader ------------------- 对于压缩,这个行为来说,客户端与服务器都要经过协商。只有使用了同
Wesley13 Wesley13
1年前
Linux 运维 9月30日 笔记 6.1
目录 一、压缩打包介绍 二、gzip压缩工具 三、bzip2压缩工具 四、xz压缩工具 **一、压缩打包介绍** 1. 常见压缩文件 * Windows .rar .zip. 7z * Linux .zip .gz .bz2 .xz .tar  **二、gzip压缩工具**
Stella981 Stella981
1年前
HTTP协议:不可小觑的Content
接上一篇《[用Netty实现的简单HTTP服务器](http://my.oschina.net/u/203921/blog/93076)》,本篇文章摘自《HTTP权威指南》。 Content-Length首部告诉浏览器报文中实体主体的大小。这个大小是包含了内容编码的,比如对文件进行了gzip压缩,Content-Length就是压缩后的大小(这点对我们编写
Wesley13 Wesley13
1年前
Python针对特定服务定制的代理工具V2.0
该小工具的粗略设计实现结构图如下所示: ![](https://static.oschina.net/uploads/img/201704/22171125_paOy.jpg) 由于该服务的头文件使用了gzip对数据进行了数据压缩,在这个版本处理的策略是,把压缩的数据放在一个压缩文件中。压缩文件按时间进行存储在目录inputJson中。上图中是运行时
冴羽 冴羽
8个月前
搭建 VuePress 站点必做的 10 个优化
前言在 中,我们使用 VuePress 搭建了一个博客,最终的效果查看:。在搭建这样一个博客后,其实还有很多的优化工作需要做,本篇我们来盘点一下那些完成基础搭建后必做的 10 个优化。 1. 开启 HTTPS开启 HTTPS 有很多好处,比如可以实现数据加密传输等,SEO 也会更容易收录: Google 会优先选择 HTTPS 网页(而非等效的 HTTP 网