御剑神树
御剑神树
文章5
标签6
分类2
博客性能优化

博客性能优化

自从博客建立以来速度就一直不怎么理想,所以我在昨天为博客优化了一下,现在访问速度大幅提升,本文详细记录了我的优化过程,以供参考.


前记

我使用的是Hexo配合GitHub搭建的免费博客且一并部署到了Coding,本来想着部署到Coding可以加速陆内用户的访问速度,不过目前看来Coding并不怎么给力…(还是部署到Gitee更能加快陆内用户的访问啊,但Gitee好像要花钱想了想还是算了…

Hexo文件压缩

这里我用的是Hexo-neat压缩插件因为配置简单,无需额外的命令,只需使用原本的部署三连就可以自动完成静态资源的压缩,具体操作如下:

  1. 在博客根目录下安装Hexo-neat
    npm install hexo-neat --save
  2. 为站点配置文件添加相关配置
    以下是我自己的相关配置,直接添加到_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所用格式压缩了图片的大小,具体操作如下:
缩小图像尺寸

  1. 用PS打开要优化的图像
  2. 点击左上方图像按钮
  3. 点击图像大小 (在这里就可以调整图像的尺寸了,修改完点击确定即可)

压缩图片大小

  1. 点击左上角文件按钮
  2. 点击导出
  3. 选择存储为Web所用格式(右上方可以设置优化的程度,修改完点击存储即可)

使用免费CDN:JsDelivr+Github
优化完图片当然还是需要一个图床来加速图片的显示,这里我使用的是JsDelivr+Github的方式,具体操作如下:

  1. 新建Github仓库

  2. 点击 Clone or download,复制仓库地址

  3. 在本地随便一个文件目录下右键 Git Bash Here,执行以下命令:

    git clone 复制的仓库地址
  4. 复制需要上传的资源到本地的Github仓库,在本地Github仓库目录下右键 Git Bash Here,执行以下命令:
    注意:JsDelivr不支持加载超过20M的资源.

    git status                    //查看状态
    git add .                     //添加所有文件到暂存区
    git commit -m '第一次提交'     //把文件提交到仓库
    git push                      //推送至远程仓库
  5. 到Github仓库里点击release发布仓库

  6. 自定义发布版本号

  7. 通过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/[email protected]/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/[email protected]/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

注意:我这里只是使用这种方式来加速首页的文章头图.
推荐使用以下图床来加速文章里的图片:

优化成果

网站性能测试地址:

本网站测试得分:

优化前

优化前

优化后

优化后

优化后

优化后

可以看到优化效果还是很明显哒~