前言

每日一说: 这又是一篇托更的文章!
此教程所有博客通用
关于我为什么要优化博客主要有几点原因:
1.访问速度的要求
2.更快的加载
3.让访客有更好的体验
废话不多说开始吧!

Service Worker加速

相信懂点网站的都知道Service Worker,这个东东在前端可是堪称黑科技,他NB到甚至可以代理网站,不管你的网站原本速度有多慢,加上SW基本都是秒加载!

ChenYFan的加速文章

我觉得他这篇文章写的是优质好文,所以推荐一下
链接: https://blog.cyfan.top/p/d3c51290.html

乐特的加速文章

我也觉得这篇文章特别好,所以一样推荐
链接: https://blog.imlete.cn/article/Service-Worker-Preferred-Request-Resource.html

我的加速SW

如果你喜欢我的网站SW可以随便扒哦

压缩网站

Hexo的插件有许多可以压缩的插件,我推荐几个我喜欢的压缩插件。

Hexo-neat

安装代码:

1
npm install hexo-neat --save

在[Blogroot]
我们打开_config.yml
配置信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
neat_enable: true
neat_html:
enable: true
exclude:
neat_css:
enable: true
exclude:
- '*.min.css'
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'

gulp

本文章不细讲,具体可以看糖果屋店长的文章: https://akilar.top/posts/49b73b87/
转载一点
安装gulp

1
2
3
4
5
6
7
8
9
10
npm install --global gulp-cli #全局安装gulp指令集
npm install gulp --save #安装gulp插件
# 安装HTML压缩
npm install gulp-htmlclean --save-dev
# 安装css压缩
npm install gulp-clean-css --save-dev
# 安装js压缩
npm install gulp-terser --save-dev
# 安装字体压缩(可选)
npm install gulp-fontmin --save-dev

[Blogroot]下新建

1
gulpfile.js

[Blogroot]\gulpfile.js,输入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
//用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var fontmin = require('gulp-fontmin');
// gulp-tester
var terser = require('gulp-terser');
// 压缩js
gulp.task('compress', async() =>{
gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(terser())
.pipe(gulp.dest('./public'))
});
//压缩css
gulp.task('minify-css', () => {
return gulp.src(['./public/**/*.css'])
.pipe(cleanCSS({
compatibility: 'ie11'
}))
.pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', () => {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true, //清除html注释
collapseWhitespace: true, //压缩html
collapseBooleanAttributes: true,
//省略布尔属性的值,例如:<input checked="true"/> ==> <input />
removeEmptyAttributes: true,
//删除所有空格作属性值,例如:<input id="" /> ==> <input />
removeScriptTypeAttributes: true,
//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,
//删除<style>和<link>的 type="text/css"
minifyJS: true, //压缩页面 JS
minifyCSS: true, //压缩页面 CSS
minifyURLs: true //压缩页面URL
}))
.pipe(gulp.dest('./public'))
});
//压缩字体
function minifyFont(text, cb) {
gulp
.src('./public/fonts/*.ttf') //原字体所在目录
.pipe(fontmin({
text: text
}))
.pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
.on('end', cb);
}

gulp.task('mini-font', (cb) => {
var buffers = [];
gulp
.src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
.on('data', function(file) {
buffers.push(file.contents);
})
.on('end', function() {
var text = Buffer.concat(buffers).toString('utf-8');
minifyFont(text, cb);
});
});
// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel(
'compress', 'minify-css', 'minify-html','mini-font'
))

按自己的需求来
最后一键三连

1
2
3
4
hexo cl
hexo g
gulp
hexo s 或 hexo deploy

懒加载插件

安装代码:

1
npm install hexo-lazyload-image --save

打开[Blogroot]的_config.yml
配置:

1
2
3
4
5
6
lazyload:
enable: true
onlypost: false # 可选
loadingImg: # 懒加载图片
isSPA: false # 可选
preloadRatio: 3 # 可选,默认1

之后一键三连

1
2
3
hexo cl
hexo g
hexo s 或 hexo deploy

第三方库

说起第三方库,我首先想起的是Staticfile。

Staticfile

网站: https://www.staticfile.org/
这个库是我用过最好的最稳定的第三方库,免费全球cdn加速,目前是我博客用的cdn静态资源加速。

字节跳动静态资源库

链接: http://cdn.bytedance.com/
这个库是速度最好的库

BootCDN

这个是和极兔云合作的第三方库,速度还行。
链接: https://www.bootcdn.cn/

360前端第三方库

链接: https://cdn.baomitu.com/
这个库应该比较安全,速度也还行。

自建静态资源库

参考: https://szraz.cn/206.html
这里也出一个教程
我们使用天御云用作cdn加速
此CDN由冷寂维护和开发
首先打开链接: tyucdn.com

并注册一个账号,实名认证完成之后。
呼叫客服给你充钱
客服QQ: 1481169617
客服给你充好钱之后,去域名管理添加域名,选择你买的套餐,并输入你想当静态资源的域名,比如: npm.mrzefr.cn
回源设置为: unpkg.com
小伙伴可以看一下我配置的图片

发现可以访问就可以按自己需求去搞配置了

CDN加速网站

参考: https://bo.ke/92.html
要想网站访问的快,CDN加速不能少!

天御云高防CDN

链接: tyucdn.com
这个cdn有国内和国外加速,可以免费使用600GB.

BotDun云梯

链接: https://botdun.ml/
我正在使用的cdn,速度非常快。

木空数据CDN

这个要0.1块钱10GB一个月,价格可以接受,速度也可以了
链接: https://aini3.cn

多吉云融合CDN

链接: https://www.dogecloud.com/
每月有20GB的免费流量,速度快,价格也实惠!

日常可以加速网站的小方法

JS异步加载

1
2
3
<script src="xxx/xx.js"></script>
<script defer src="xxx/xx.js"></script>
<script async src="xxx/xx.js"></script>

defer适用于原生JS,async适用于有依赖的JS
参考: https://blog.zhheo.com/p/b0d49523.html

用webp作为博客的图片

webp是Google发明出来的,目的是让图片更快的加载
我们先看一个网站: https://isparta.github.io/compare-webp/index_a.html#12
我们可以从对比中发现Webp加载的快,而GIF原图却很慢。

从这个网站我们就可以发现Webp的优势,所以我建议各大网站都使用Webp作为博客图片。

加上自己的cdn

我的网站有很多JS和CSS还有图片,我们可以选择用自己的CDN来储存。
这里我推荐缤纷云,价格实惠,有很多的免费额度(新开发的系统,功能有点少,不要嫌弃哈!
链接: https://dogecast.com/
使用建议先看文档: https://dogecast.com/docs/intro

后言

你可以自己去各大测速网站测速,来评估你的网站哦
推荐几个:
1.https://www.webpagetest.org/
2.https://www.experte.com/pagespeed
3.https://pagespeed.web.dev/
有什么不足的可以提出来,以后还会更新哦。
咕咕咕…