Hexo博客优化教程
前言
每日一说: 这又是一篇托更的文章!
此教程所有博客通用
关于我为什么要优化博客主要有几点原因:
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 | neat_enable: true |
gulp
本文章不细讲,具体可以看糖果屋店长的文章: https://akilar.top/posts/49b73b87/
转载一点
安装gulp
1 | npm install --global gulp-cli #全局安装gulp指令集 |
[Blogroot]下新建
1 | gulpfile.js |
[Blogroot]\gulpfile.js,输入以下内容
1 | //用到的各个插件 |
按自己的需求来
最后一键三连
1 | hexo cl |
懒加载插件
安装代码:
1 | npm install hexo-lazyload-image --save |
打开[Blogroot]的_config.yml
配置:
1 | lazyload: |
之后一键三连
1 | hexo cl |
第三方库
说起第三方库,我首先想起的是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 | <script 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/
有什么不足的可以提出来,以后还会更新哦。
咕咕咕…