闪电加载:Hexo博客性能优化全攻略

巴索罗缪·大熊

前言

这些年积累了很多前端性能优化的知识点和思路,日常工作很少涉及技术层极限优化,近期终于一点点把博客独立搭建并部署了,对之前的一些技术点进行了深度探索,最终结果也达到了预期效果,由于水平有限,写的不好的地方,敬请谅解

服务端优化

Nginx 添加压缩模块设置

gzip

Nginx 的 gzip 模块用于对 HTTP 响应进行 gzip 压缩,以减少传输数据量,提高页面加载速度,表示为 Content-Encoding 参数值为 gzip

使用

server 中添加 gzip 模块设置,如下示例中的内容,直接整个复制就能使用

    server {listen       443 ssl;server_name  yiwuan.xyz;...# gzipgzip on;gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;gzip_proxied any;gzip_vary on;}
参数详解

gzip on; 启用 gzip 压缩

gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 指定要压缩的 MIME 类型

gzip_proxied any; 启用对代理请求的响应进行压缩

gzip_vary on; 在响应头中添加 “Vary: Accept-Encoding”,以便客户端和代理服务器能够缓存不同的压缩版本

gzip 模块的其他参数可以根据需要进行配置,以优化 Nginx 的 gzip 压缩功能

测试结果

添加 gzip 后的 完成 参数需要 3.03 秒

执行 5 次取平均值,最终结果为 3.02 秒

3.31  
3.24
3.03
2.79
2.77
Brotli

Brotli 是一种现代的压缩算法,通常比 gzip 提供更高的压缩率,表示为 Content-Encoding 参数值为 br

Brotli 需要单独手动安装,下面是操作步骤

安装必要依赖
sudo yum install -y epel-release
sudo yum install -y brotli brotli-devel gcc make pcre-devel zlib-devel openssl-devel git
下载 Nginx 源码和 Brotli 模块
wget http://nginx.org/download/nginx-<version>.tar.gz
tar -zxvf nginx-<version>.tar.gz
cd nginx-<version>git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
git submodule update --init
cd ..

注意

<version> 最好是跟本机安装的 nginx 版本保持一致,执行 nginx -v 查询版本号,然后替换 <version> 后执行上面命令

编译 Brotli 动态模块
./configure --with-compat --add-dynamic-module=./ngx_brotli
make modules
将编译好的模块复制到 Nginx 模块目录
sudo cp objs/ngx_http_brotli_filter_module.so /etc/nginx/modules/
sudo cp objs/ngx_http_brotli_static_module.so /etc/nginx/modules/
在 nginx.conf 文件中配置 Brotli 模块
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;http {brotli on;brotli_comp_level 11;brotli_buffers 16 8k;brotli_min_length 20;brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;brotli_static on;# brotli_vary on;
}

注意!

brotli_vary on; 这个参数是老版才有的参数,我查看了Github上的最新版文档,在新版官方似乎把这个参数去掉了

我在服务器上测试发现,如果安装的最新版模块,添加这个 brotli_vary on; 参数会报错,可能网上有些教程中有这个参数,遇到报错把这个参数去掉试试看

重启 Nginx
systemctl restart nginx
验证模块加载

在浏览器 开发者工具 中测试响应头 Content-EnCoding 值也已变成 br, 并且整体资源加载速度明显提升则说明这个模块正确安装并加载了

参数详解

brotli on; 启用 Brotli 压缩

brotli_comp_level 11; Brotli 压缩级别,范围 1-11,数字越大压缩率越高,但CPU使用率也越高

brotli_buffers 16 8k; 设置 Brotli 压缩缓冲区的数量和大小

brotli_min_length 20; 设置允许压缩的页面最小长度,单位是字节。通常设置较小的值以确保小文件也能被压缩

brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript 指定要压缩的 MIME 类型

brotli_static on; 启动对预压缩文件的支持

测试结果

注意!

load_module 加载配置必须要在 Nginx 配置文件的最顶层使用,否则会出现 load_module 指令过晚的错误

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

开启 brotli 和 gzip 压缩两种配置, 执行 5 次取平均值,最终结果为 3.09 秒

3.92
3.11
2.95
2.63
2.84

只开启 brotli 压缩一种配置, 执行 5 次取平均值,最终结果为 3.15 秒

3.64 
2.65 
3.79 
2.76 
2.89

使用 brotli 和 gzip 压缩,以及两种压缩方式混用的方式,这三种情况结果似乎差距不大,可能和目前博客项目的资源体积不大也有关系

开启HTTP3

安装必要依赖
sudo yum install -y gcc gcc-c++ make zlib-devel pcre-devel openssl-devel
下载源码并编译

下载Nginx源代码

wget http://nginx.org/download/nginx-1.26.0.tar.gz
tar -zxvf nginx-1.26.0.tar.gz
cd nginx-1.26.0

下载quiche,下面命令是在 nginx-1.26.0 目录下执行的

quiche库是 Nginx 支持 HTTP/3 所需的库

git clone --recursive https://github.com/cloudflare/quiche

编译 Nginx

./configure --with-http_v3_module --with-cc-opt='-I../quiche/deps/boringssl/include' --with-ld-opt='-L../quiche/deps/boringssl/build/ssl -L../quiche/deps/boringssl/build/crypto' --with-http_ssl_module --with-http_v2_module --with-http_v3_module
make
sudo make install
不同版本HTTP协议的区别
HTTP/1
  • 使用多个串行的 TCP 连接来处理请求和响应

  • 每个请求都需要建立新的连接,存在头部阻塞(Head-of-Line Blocking)问题

  • 不支持请求和响应的多路复用,导致性能较低

HTTP/2
  • 引入了二进制分帧层,允许多个请求和响应在同一个连接上并行传输

  • 支持请求和响应的多路复用,减少了头部开销和提高了性能

  • 使用头部压缩和优先级控制来提高效率

HTTP/3
  • 基于 UDP 协议,使用 QUIC 传输协议

  • 解决了 TCP 连接的慢启动问题,减少了连接建立时间

  • 支持零RTT连接恢复和数据传输,提高了性能和安全性

  • 具有更好的拥塞控制和流量控制机制,适应了现代网络环境

HTTP/3 在性能上相对于 HTTP/2 和 HTTP/1 有更好的表现,主要体现在连接建立速度、并行传输、头部压缩和拥塞控制等方面。因此,推荐在现代网络环境中使用 HTTP/3 来获得更好的性能和用户体验

注意!

HTPP/3 是实验性的


客户端优化

资源优化

移除引入的第三方文件
typeface-source-code-pro

测试发现这个 https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css css 文件用国内网络正常访问有的访问不了,单文件加载失败需要时间高达20s+,移除这个文件后发现样式变化不大,索性直接删掉

fancybox

图片预览器,并且支持各种小功能,这是它的官网 Fancyapps UI - 强大的 JavaScript UI 组件库

文章插图可以通过右键菜单 在新标签页中打开图像 满足个人需求,这个功能有点鸡肋,主要还引入了一个库,也删掉吧

改一下 landscape 主题下的 _config.yml 中的 fancybox 设置为 false,同时删除 source 目录下的 fancybox 相关文件

图片压缩
首页背景图压缩

具体操作方式为把 png 转为 webp 并压缩,由原来的 296KB 压缩成 138KB

底部 police svg 图标压缩

svg 图标从 21KB 压缩到 19KB,效果不大,这种图标其实也可以直接去掉

主页文章展示方式调整

目前博客站点首页是默认展示 10 篇文章,并且文章是自动全部展示的,由于文章首发是掘金,然后再后期手动同步到博客站点平台,文章中的图片资源是掘金外链形式,虽然图片资源服务器用了HTTP2进行了优化,但是资源分析中发现大量的外链图片资源也占用了相当比例的时间加载,如下

设置成文章只显示摘要的形式,在文章的 md 文件头部添加 excerpt 摘要属性

注意!

这是 landscape 主题,其他主题可能是别的参数名,思路都一样

设置好摘要后的展示效果

文章中的图片资源不额外加载了,文字比例看着有点少,再完善一下摘要内容,接下来把所有文章的摘要属性都加上

先测试一下

本地 Edge 浏览器无痕模式,禁用缓存情况下,首次加载 完成 需要 256ms

继续优化请求资源

分析请求资源大小发现 jquery-3.6.4.min.js 文件占用了单独一个请求,并且请求资源体积最大,分析 jquery 文件的使用场景,结合页面功能和代码引入,只有在 script.js 中用了

分析目前页面上用到的功能,只有 script.js 中只有一个分享按钮代码有用,而且效果还不太好,把整个 js 文件不用的功能代码删掉,后面需要什么功能单独加代码

把分享功能先去掉,这个功能没有配置选项,在 article.ejs 中把 footer 标签注释掉就行了,这时候 jquery 引入代码也注释掉

再测试一下

本地无痕模式,禁用缓存情况下,基本秒开了,完成 用时 100ms 左右

发布到云服务器测试一下

https://yiwuan.xyz 线上地址和本地 localhost 测试效果差不多,多次测试,平均用时 100ms 多一点,视觉效果上也是秒开了

测试环境参数

  • 操作系统: Win11家庭版
  • 处理器:12th Gen Intel® Core™ i5-12400 2.50 GHz
  • 机带RAM: 32.0 GB (31.7 GB 可用)
  • 系统类型:64 位操作系统, 基于 x64 的处理器
  • 浏览器:Microsoft Edge 120.0.2210.7 (正式版本) dev (64 位)
  • Nginx:1.26.0
  • Hexo: 7.1.1

小结一下

好了,目前为止博客性能优化基本就差不多了,由于极限压缩资源,删除代码,导致样式现在太丑了,还有一些小功能的莫名其妙不太好使,例如搜索,后面如果时间允许会把整个页面样式优化和功能完善的操作过程完整记录并分享出来

欢迎讨论交流,技术探索和文章整理不易,如果喜欢可以点赞支持一下 ^_^

微信公众号:草帽Lufei

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/843992.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

河北奥润顺达集团研究院PMO经理常江南受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 河北奥润顺达集团研究院PMO经理、研发部运营管理办负责人常江南先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“初建PMO的体系宣贯和人员培养实践总结”。大会将于6月29-30日在北京举办&#xff0c;敬请关注&#xf…

如何利用云平台上更好地规划安全生产教育与培训

在平台上进行安全教育和培训&#xff0c;可以采取以下步骤和策略&#xff0c;以确保教育的有效性和参与度&#xff1a; 一、明确教育目标和培训内容 确定教育目标&#xff1a;明确希望员工通过培训达到的安全意识和技能水平。 制定培训内容&#xff1a;根据行业特点、岗位需求…

centos7安装python-gdal环境

python3 yum install python3 python3-pip -y gdal-3.6.2 参考编译postgis python安装gdal export CPLUS_INCLUDE_PATH/usr/local/gdal-3.6.2/include export C_INCLUDE_PATH/usr/local/gdal-3.6.2/include export LDFLAGS"-L/usr/local/gdal-3.6.2/lib64" pip3…

wordpress子比主题文章付费发卡插件

插件仅适用于子比主题 插件演示 免费下载 &#xff1a;子比主题文章付费发卡插件_麦田吧 如下图&#xff0c;添加卡密支持批量添加&#xff0c;按照卡号&#xff08;英文逗号/空格/—-&#xff09;密码的格式输入&#xff0c;一行一条&#xff0c;可以直接添加数据&#xff0…

​​人工智能_大模型083_大模型时代机遇02_提示词优化开发工具_立项_计量模式_真实需求_5why法---人工智能工作笔记0218

上一节我们提供了一个非常好用的提示词,优化开发的,调试工具 vellum 可以看到是这个工具 使用的时候,写完一段提示词,可以选择不同的模型,看看给出的效果情况 对应的模型非常多. ### 立项在立项阶段,要对这三个要素有初步的答案:1. 真实需求是什么? 2. 商业模式是什么? 3…

Tomcat端口配置和网页浏览

安装完成Tomcat后&#xff0c;到安装目录里看到内容如下&#xff1a; 各文件夹作用 bin&#xff1a;可执行文件&#xff08;启动文件startup.bat、关闭文件shutdown.bat&#xff09;conf&#xff1a;配置文件&#xff08;修改端口号&#xff1a;server.xml&#xff0c;建议将s…

[自动驾驶技术]-5 Tesla自动驾驶方案之算法(AI Day 2021)

有朋友问我&#xff0c;如何有效学习一个新技术。笔者这么多年的经验是&#xff1a;1&#xff09;了解国内外产业应用和标准法规现状&#xff0c;先建立宏观知识图谱及技术系统框架&#xff1b;2&#xff09;根据系统框架逐块进行深入研究&#xff08;横向、纵向&#xff09;&a…

【html+css(大作业)】二级菜单导航栏

目录 实现效果 代码及其解释 html部分 CSS部分 hello&#xff0c;hello好久不见&#xff01; 今天我们来写二级导航栏&#xff0c;所谓二级导航栏&#xff0c;简单来说就是鼠标放上去就有菜单拉出&#xff1a; 实现效果 代码及其解释 html部分 <!DOCTYPE html> &l…

嵌入式进阶——矩阵键盘

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 矩阵按键原理图按键状态检测单行按键状态检测多行按键状态检测 状态记录状态优化循环优化 矩阵按键 矩阵键盘是一种常见的数字输入…

Databend 开源周报第 146 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 支持 Expressio…

网络编程基础知识

一、网络的相关概念 二、Ip 对于ipv4&#xff0c;是由4个字节&#xff08;32位&#xff09;表示&#xff0c;一个字节的范围是0~255&#xff0c;采用的是十进制表示ipv6的地址长度位128位&#xff0c;是ipv4的4倍&#xff0c;采用的是16进制表示查看ip地址&#xff1a;在命令行…

windows 下载redis (通过redis-server.exe启动服务)

下载链接&#xff1a; https://github.com/MicrosoftArchive/redis/releases 启动&#xff1a; 查看&#xff1a; 人工智能学习网站 https://chat.xutongbao.top

玩转STM32-I2C通信协议(详细-慢工出细活)

文章目录 一、I2C总线原理&#xff08;掌握&#xff09;1.1 硬件构成1.2 传输位1.3数据传输格式 二、STM32的I2C特性和结构三、STM32的I2C通信实现&#xff08;硬件实现方式&#xff09;3.1 I2C主模式 四、应用实例 一、I2C总线原理&#xff08;掌握&#xff09; 1.1 硬件构成…

day19--IO流(二)

day19-IO流&#xff08;二&#xff09; 一、字符流 同学们&#xff0c;前面我们学习了字节流&#xff0c;使用字节流可以读取文件中的字节数据。但是如果文件中有中文使用字节流来读取&#xff0c;就有可能读到半个汉字的情况&#xff0c;这样会导致乱码。虽然使用读取全部字…

Harmony OS 开发指南——源码下载和编译

本文介绍了如何下载鸿蒙系统源码&#xff0c;如何一次性配置可以编译三个目标平台&#xff08;Hi3516&#xff0c;Hi3518和Hi3861&#xff09;的编译环境&#xff0c;以及如何将源码编译为三个目标平台的二进制文件。 坑点总结&#xff1a; 下载源码基本上没有太多坑&#xff…

爬虫案例-亚马逊反爬分析-验证码突破(x-amz-captcha)

总体概览&#xff1a;核心主要是需要突破该网站的验证码&#xff0c;成功后会返回我们需要的参数后再去请求一个中间页&#xff08;类似在后台注册一个session&#xff09;&#xff0c;最后需要注意一下 IP 是不能随意切换的 主要难点&#xff1a; 1、梳理整体反爬流程 2、验证…

【C++初阶】--- C++入门(中)

目录 一、缺省参数1.1 缺省参数概念1.2 缺省参数分类 二、函数重载2.1 函数重载概念2.2 C支持函数重载的原理 --- 名字修饰 三、引用3.1 引用概念3.2 引用特性3.3 常引用3.4 使用场景3.5 引用和指针的区别 一、缺省参数 1.1 缺省参数概念 缺省参数是声明或定义函数时为函数的…

数据挖掘与机器学习——回归分析

目录 回归分析定义&#xff1a; 案例&#xff1a; 线性回归 预备知识&#xff1a; 定义&#xff1a; 一元线性回归&#xff1a; 如何找出最佳的一元线性回归模型&#xff1a; 案例&#xff1a; python实现&#xff1a; 多元线性回归 案例&#xff1a; 线性回归的优缺…

大疆、猛犸、西圣无线麦克风哪个牌子好?大疆、西圣麦克风测评PK

在当今这个全民参与媒体创作的时代&#xff0c;视频分享已经崛起为引领流行文化的关键力量。随着自媒体领域的竞争日益白热化&#xff0c;要想在浩瀚的内容海洋中脱颖而出&#xff0c;创作出卓越的作品无疑是吸引观众目光的核心要素。然而想要成功打造这样的佳作&#xff0c;除…

学习Uni-app开发小程序Day21

学习了评分组件、自定义导航栏 评分组件uni-rate 这是需要达到的效果图&#xff0c;这里先分析下效果图&#xff0c; 1、图片是从布局中间弹出的&#xff0c;那这里就要用到uni-popup &#xff0c;设置type从中间弹出 2、这个弹出的顶部和上一张的顶部布局是一样的&#xff0c…