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，謝謝！