VuePress 博客优化之开启 Gzip 压缩

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

0.png


前言


《一篇带你用 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:


1.png


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


2.png


效果


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


3.png


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


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


4.png


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


系列文章


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


  1. 一篇带你用 VuePress + GitHub Pages 搭建博客


  1. 一篇教你代码同步 GitHub 和 Gitee


  1. 还不会用 GitHub Actions ?看看这篇


  1. Gitee 如何自动部署 Pages?还是用 GitHub Actions!


  1. 一份前端够用的 Linux 命令


  1. 一份简单够用的 Nginx Location 配置讲解


  1. 一篇从购买服务器到部署博客代码的详细教程


  1. 一篇域名从购买到备案到解析的详细教程


  1. VuePress 博客优化之 last updated 最后更新时间如何设置


  1. VuePress 博客优化之添加数据统计功能


  1. VuePress 博客优化之开启 HTTPS


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


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



目录
相关文章
|
4月前
|
Python
gzip模块概述
gzip模块概述
|
6月前
|
Linux
linux(二十六)打包压缩命令gzip
linux(二十六)打包压缩命令gzip
85 1
|
XML JSON 算法
宝塔面板Nginx开启Brotli压缩,提升网站加载速度
前言 Google 认为互联网用户的时间是宝贵的,他们的时间不应该消耗在漫长的网页加载中,因此在 2015 年 9 月 Google 推出了无损压缩算法 Brotli。Brotli 通过变种的 LZ77 算法、Huffman 编码以及二阶文本建模等方式进行数据压缩,与 Gzip相比效率提升约 17-25%。这里简单说一下如何在宝塔面板Nginx开启Brotli压缩。 正文 下载Brotli cd /www/server#下载brotligit clone https://github.com/google/ngx_brotli.gitcd ngx_brotli#更新brotligit subm
597 0
宝塔面板Nginx开启Brotli压缩,提升网站加载速度
|
算法 应用服务中间件 nginx
宝塔面板Nginx开启Brotli压缩,提升网站加载速度-【给网站提提速】
Google 认为互联网用户的时间是宝贵的,他们的时间不应该消耗在漫长的网页加载中,因此在 2015 年 9 月 Google 推出了无损压缩算法 `Brotli`。`Brotli` 通过变种的 `LZ77` 算法、Huffman 编码以及二阶文本建模等方式进行数据压缩,与 `Gzip`相比效率提升约 `17-25%`。这里简单说一下如何在宝塔面板Nginx开启Brotli压缩。
336 0
宝塔面板Nginx开启Brotli压缩,提升网站加载速度-【给网站提提速】
|
JavaScript 算法 Java
网页内容压缩与解压教程
本教程将为你介绍如何使用Node.js、Java和Python进行网页内容的压缩与解压。我们将重点讨论gzip、deflate和brotli这三种常用的压缩方法。
314 0
|
缓存 前端开发 应用服务中间件
Nginx开启Gzip压缩功能(附详细解释)+测试是否开启了压缩
Nginx实现资源压缩的原理是通过ngx_http_gzip_module模块拦截请求,并对需要做gzip的类型做gzip,ngx_http_gzip_module是Nginx默认集成的,不需要重新编译,直接开启即可。
2899 1
Nginx开启Gzip压缩功能(附详细解释)+测试是否开启了压缩
|
存储 缓存 JavaScript
网站性能优化实战之—— gzip (webpack, vite 开启gzip 部署)
nginx 有一个模块是 gzip 模块,然后你只要开启了,nginx就会帮你来把数据(静态资源 和 接口数据)进行压缩,然后传入到客户端,客户端来解压,然后在进行代码的读取,其实这一步就是节约带宽,减少传输的代码包的数量。从而节约传输时间。然后网站就能很快打开了。
网站性能优化实战之—— gzip (webpack, vite 开启gzip 部署)
|
Web App开发 算法 前端开发
JavaWeb - 简单聊聊 GZIP 的压缩原理与日常应用
JavaWeb - 简单聊聊 GZIP 的压缩原理与日常应用
392 0
JavaWeb - 简单聊聊 GZIP 的压缩原理与日常应用
|
数据采集 搜索推荐 前端开发
VuePress 博客优化之开启 Algolia 全文搜索
由于 VuePress 的内置搜索只会为页面的标题、h2 、 h3 以及 tags 构建搜索索引。 如果你需要全文搜索,可则以使用 Algolia 搜索,本篇讲讲如何申请以及配置 Algolia 搜索。
733 0
VuePress 博客优化之开启 Algolia 全文搜索
|
存储 JSON 前端开发
Nginx网络压缩 CSS压缩 图片压缩 JSON压缩
使用Nginx作为web应用服务时,会代理如下常见文件:`js`、`css`、`JSON`、`图片`等,本文提供基于Nginx内置的压缩技术,提供网络请求响应速度的解决方案。 网络压缩的原理是消耗CPU资源,减少文件在公网传输的大小,提高响应速度。相比于CPU的计算资源,网络带宽通常较为昂贵,因此通过CPU资源置换网络带宽资源在实际生产中是可行的操作方案。
Nginx网络压缩 CSS压缩 图片压缩 JSON压缩