自从博客建立以来速度就一直不怎么理想,所以我在昨天为博客优化了一下,现在访问速度大幅提升,本文详细记录了我的优化过程,以供参考.
前记
我使用的是Hexo配合GitHub搭建的免费博客且一并部署到了Coding,本来想着部署到Coding可以加速陆内用户的访问速度,不过目前看来Coding并不怎么给力…(还是部署到Gitee更能加快陆内用户的访问啊,但Gitee好像要花钱想了想还是算了…
Hexo文件压缩
这里我用的是Hexo-neat压缩插件因为配置简单,无需额外的命令,只需使用原本的部署三连就可以自动完成静态资源的压缩,具体操作如下:
- 在博客根目录下安装Hexo-neat
npm install hexo-neat --save - 为站点配置文件添加相关配置
以下是我自己的相关配置，直接添加到_config.yml的末尾就可以了,当然也可以按照自己的需求去自定义配置.# hexo-neat # 博文压缩 neat_enable: true # 压缩html neat_html: enable: true exclude: # 压缩css neat_css: enable: true exclude: - '**/*.min.css' # 压缩js neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js'
这里附上此插件的Github项目地址: Hexo-neat
图片优化
使用PS优化博客图片
这里我先是缩小了图像尺寸到最适合博客主题的程度,然后再使用了PS自带的存储为Web所用格式压缩了图片的大小,具体操作如下:
缩小图像尺寸
- 用PS打开要优化的图像
- 点击左上方图像按钮
- 点击图像大小 (在这里就可以调整图像的尺寸了,修改完点击确定即可)
压缩图片大小
- 点击左上角文件按钮
- 点击导出
- 选择存储为Web所用格式(右上方可以设置优化的程度,修改完点击存储即可)
使用免费CDN:JsDelivr+Github
优化完图片当然还是需要一个图床来加速图片的显示,这里我使用的是JsDelivr+Github的方式,具体操作如下:
新建Github仓库
点击 Clone or download,复制仓库地址
在本地随便一个文件目录下右键 Git Bash Here,执行以下命令:
git clone 复制的仓库地址复制需要上传的资源到本地的Github仓库,在本地Github仓库目录下右键 Git Bash Here,执行以下命令:
注意:JsDelivr不支持加载超过20M的资源.git status //查看状态 git add . //添加所有文件到暂存区 git commit -m '第一次提交' //把文件提交到仓库 git push //推送至远程仓库到Github仓库里点击release发布仓库
自定义发布版本号
通过JsDelivr引用资源,使用方法:https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件名
例子:https://cdn.jsdelivr.net/gh/Shengcv/[email protected]/concept.jpg
注意:版本号不是必需的,是为了区分新旧资源,如果不使用版本号,将会直接引用最新资源,除此之外还可以使用某个范围内的版本,查看所有资源等,具体使用方法如下:
//加载任何GitHub版本，提交或分支
//注意：我们建议对支持npm的项目使用npm
https://cdn.jsdelivr.net/gh/user/repo@version/file
//加载jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
//使用版本范围而不是特定版本
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js
//完全省略该版本以获取最新版本
//您不应该在生产中使用它
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
//将“ .min”添加到任何JS / CSS文件以获取缩小版本
//如果不存在，我们会为您生成
https://cdn.jsdelivr.net/gh/jquery/[email protected]/src/core.min.js
//在末尾添加/以获取目录列表
https://cdn.jsdelivr.net/gh/jquery/jquery/
这里附上Jsdelivr的官方网站:Jsdelivr
注意:我这里只是使用这种方式来加速首页的文章头图.
推荐使用以下图床来加速文章里的图片:
优化成果
网站性能测试地址:
本网站测试得分:
优化前
优化后
可以看到优化效果还是很明显哒~