11分钟优化你的网站博客飞起来

---

本人博客: https://blog.onfree.cn (●ˇ∀ˇ●)

11分钟优化你的网站博客飞起来

莫扎特曾经说过大胆地踏上旅途吧，我不知道路途的前方究竟有什么，可是，咱们仍是迈出了步伐，咱们仍在旅途之中

---

目前本人对前端 SEO 等也正处于探索和学习的阶段上，但愿有任何问题和建议请留言哦~

1. 为何要优化呢?

当你打开一个网站时迟迟未能看见显示的页面的时候是否是很暴躁好没耐心呢，因此网站的优化对于开发者来讲是不可少的工做呢。

而可能大多数人和我同样，对于能够不用购买服务器，直接使用Hexo生成静态页面，使用GitHub Pages做为服务器，这样就能够搭建出本身博客了。

如何使用Hexo和GitHub搭建博客请参考我另外篇文章 > 基于Hexo和 hexo-theme-matery的个性化定制开发

然而有个问题，GitHub的访问速度太慢了，对于我来讲太暴躁了！因此就想寻找出更多的优化方法来解决这问题。

2.如何优化呢?

1.更换搭建环境

不使用GitHub来搭建博客,而选择使用Gitee或者coding来搭建，固然有些人会以为仍是GitHub的习惯点呢；

2. 全部的类库使用CDN加速

目前稳定且好的推荐以下：

• jsdelivr

• bootcdn

• staticfile

• baomitu

使用方法就是像本地同样更换成线上的网址就好了

如：<script src="https://cdn.bootcss.com/aos/3.0.0-beta.6/aos.js"></script>

3. 自定义Js、Css等文件加速

使用GitHub+jsdelivr 的方式加速，jsdelivr 能够直接经过引用 Github 的资源，全部用来作CDN加速也不错;

使用方法：直接引用就行，如：https://cdn.jsdelivr.net/gh/用户名/仓库名/文件。

如个人用户名为：athink8 ; 仓库名：myGithub.；想引用的文件：/libs/others/clicklove.js

那引用连接为：

https://cdn.jsdelivr.net/gh/

• athink8/myGithub/libs/others/clicklove.js

防坑指南：正常来讲你须要GitHub打包才能够标识访问,虽然偷工减料，可是有时候会出现资源未更新的状况，

正确的作法是 加上@latest 这样就能够依然不打包使用最新提交的资源了。

如:https://cdn.jsdelivr.net/gh/athink8/

• myGithub@latest/libs/others/clicklove.js

4. 图片资源处理

图片通常都挺大的，为了加快访问速度固然须要作些变更才行呢。

尽可能不使用本地图片，而改为使用线上图床。

什么是图床呢?图床通常是指储存图片的服务器。

图床推荐：

• 微博 : 免费、有损质量

• 七牛云:10G免费空间，每个月10G国内和10G国外流量，速度快

• 又拍云: 注册认证后有10G免费空间，每个月15G的HTTP和HTTPS流量,需加logo

• SM.MS：免费

• 路过图床：免费

• 阿里oss：收费、稳定

• 腾讯cos：新用户六个月的免费存储容量、免费请求和免费流量

• GitHub+jsdelivr 搭建

5. 代码压缩

精简代码能够有效的提升优化呢，如所说的类库也尽可能使用带有min的版本。

手动压缩代码可使用一些工具，如 站长工具、压缩工具箱。

自动压缩的话，若是是使用hexo搭建博客的话可使用gulp压缩代码，安装以下：

1. 进入站点根目录下执行下面的命令：

# 全局安装gulp模块
npm install gulp -g
# 安装各类功能模块
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 安装额外功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save

2. 在站点根目录新建文件 gulpfile.js，并复制如下内容

ar gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理全部文件，(true|处理全部文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译经过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象
​
// 清除public文件夹
gulp.task("clean", function () {
 return del(["public/**/*"]);
});
​
// 下面几个跟hexo有关的操做，主要经过hexo.call()去执行，注意return
// 建立静态页面 （等同 hexo generate）
gulp.task("generate", function () {
 return hexo.init().then(function () {
 return hexo
 .call("generate", {
 watch: false
 })
 .then(function () {
 return hexo.exit();
 })
 .catch(function (err) {
 return hexo.exit(err);
 });
 });
});
​
// 启动Hexo服务器
gulp.task("server", function () {
 return hexo
 .init()
 .then(function () {
 return hexo.call("server", {});
 })
 .catch(function (err) {
 console.log(err);
 });
});
​
// 部署到服务器
gulp.task("deploy", function () {
 return hexo.init().then(function () {
 return hexo
 .call("deploy", {
 watch: false
 })
 .then(function () {
 return hexo.exit();
 })
 .catch(function (err) {
 return hexo.exit(err);
 });
 });
});
​
// 压缩public目录下的js文件
gulp.task("compressJs", function () {
 return gulp
 .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
 .pipe(gulpif(!isScriptAll, changed("./public")))
 .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
 .pipe(plumber())
 .pipe(
 gulpBabel({
 presets: [es2015Preset] // es5检查机制
 })
 )
 .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
 .pipe(gulp.dest("./public")); //输出到目标目录
});
​
// 压缩public目录下的css文件
gulp.task("compressCss", function () {
 var option = {
 rebase: false,
 //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
 compatibility: "ie7" //保留ie7及如下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
 //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
 //keepSpecialComments: '*' //保留全部特殊前缀 当你用autoprefixer生成的浏览器前缀，若是不加这个参数，有可能将会删除你的部分前缀
 };
 return gulp
 .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
 .pipe(gulpif(!isScriptAll, changed("./public")))
 .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
 .pipe(plumber())
 .pipe(cleancss(option))
 .pipe(gulp.dest("./public"));
});
​
// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
 var cleanOptions = {
 protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
 unprotect: /

3. 执行方式有两种：

• 执行 gulp或者 gulp default ，这个命令至关于 hexo cl&&hexo g 而且再把代码压缩。

• 执行 gulp build ，这个命令与第1种相比是在最后又加了个 hexo d ，等于说生成、压缩文件后并自动部署。

值得注意的是：这个加入了图片压缩，若是不想用图片压缩能够把第154行的 "compressImage", 和第165行的 ,"compressImage" 去掉便可

6. 图片懒加载

1. hexo安装懒加载插件：hexo-lazyload-image

2. 在站点根目录执行下面的命令：

   npm install hexo-lazyload-image --save

3. 在站点配置文件下添加下面的代码：

lazyload:
 enable: true  #开启图片懒加载
 onlypost: false  # 是否只对文章的图片作懒加载
 loadingImg: # eg ./images/loading.gif #图片未加载的图片

4. 最后执行hexo clean && hexo g && hexo s就能够看到效果了。

7. 全站托管使用CDN

这才是重点嘛

国内付费的CDN服务商有阿里云、腾讯云等应该都不错的样子。

然而仍是看看有没有免费的吧。(穷)

本人以为还不错且稳定的推荐:Cloudflare

虽然CloudFlare CDN节点基本上在国外,国内的少且常常不通，可是将就着用吧。

推荐使用第三方 CloudFlare 面板来接入，由于中文能够看的懂，也支持容许 CNAME 方式接入 CloudFlare

CloudFlare 面板提供商：

• 笨牛网-Cloudflare免费CDN管理平台

• TLOXYGEN

• 挖站否-CF 管理平台

---

目前已知优化如上所述，如我发现更多优化技巧将会持续更新的~

欢迎各位朋友还有啥建议的欢迎留言哈~

本博客原文：https://blog.onfree.cn/posts/489a4cf4.html 转载请申明原做者Athink，谢谢！