我們知道現(xiàn)在很多個人主頁都是基于模板的二次開發(fā)的，本人作為一個非前端人員當(dāng)然也是模板開發(fā)，然而我套了模板且安裝了部分插件，發(fā)現(xiàn)我的主頁居然要9秒才加載完?。?！這怎么能忍！必須優(yōu)化呀，于是就有了這次的優(yōu)化之路。

文章結(jié)構(gòu)：1.我的主頁的未優(yōu)化前的臃腫設(shè)計以及我如今的優(yōu)化效果呈現(xiàn)。2.優(yōu)化步驟（壓縮并替換圖片、刪除多余代碼以及請求、替換CDN，刪除插件、使用優(yōu)化插件）。3.前端資料推薦。

一、我的主頁的未優(yōu)化前的臃腫設(shè)計以及我如今的優(yōu)化效果呈現(xiàn)：

未優(yōu)化前的臃腫設(shè)計以及可優(yōu)化的思路：

這里寫圖片描述

這里寫圖片描述

如今優(yōu)化的結(jié)果以及代碼結(jié)構(gòu)

這里寫圖片描述

這里寫圖片描述

這就是我的優(yōu)化結(jié)果啦??！優(yōu)化完我也很驚訝呢，進(jìn)入了毫秒級別啦??！不過比起一些前端大牛自己設(shè)計自己優(yōu)化，變成0.6毫秒，我當(dāng)時差點想把自己活埋，我太渣了。

二、優(yōu)化步驟（壓縮并替換圖片、刪除多余代碼以及請求、替換CDN，刪除插件、使用優(yōu)化插件）

（1）壓縮并替換圖片；

見上面第一張圖片，可以看到一張圖片幾十k呢，我的網(wǎng)頁加載就幾百k，這就幾十k了，必須改呀?。。?/h4>

給個壓縮工具給大家先：智圖壓縮

然后呢？把我們的主題拉下來，然和用上面的工具去壓縮圖片，替換就可以了。很簡單吧。本博主是用FTP的

原來的圖片大小

這里寫圖片描述

現(xiàn)在的圖片大?。?/h5>

這里寫圖片描述

我的主題的圖片

這里寫圖片描述

（2）刪除多余代碼以及請求：

這個就需要大家去在網(wǎng)頁看自己的首頁了，因為一般用別人的模板，它們會偷偷地加很多別的鏈接去偷取流量，所以我們就要用F12去看下加載耗時很長的是什么，然后去在我們拉下來的主題文件中去刪除。（別急，到時候整個主題會重新推回去服務(wù)器）

（3）刪除插件、使用優(yōu)化插件（這個放在CDN之前優(yōu)化，效果會非常明顯的喔，代碼優(yōu)化也放在CDN前）

優(yōu)化的插件，使用水煮魚大佬的這個插件。

這里寫圖片描述

刪除不必要的插件：我之前使用過Jetpack 這個統(tǒng)計插件，呃，本博主不推薦使用它，因為它給我的主頁的head中加了一大堆標(biāo)簽，一大堆js。導(dǎo)致加載9秒的原因起碼被它拖了3秒。

（4）替換CDN：

1.先找一個免費的強(qiáng)大的CDN嘛。給大家推薦：BootCDN

2.然后怎么辦呢？？？然后就是根據(jù)在網(wǎng)頁F12查看我們可以替換的CDN源嘛。本博主找到了JQuery和fontawesome這兩個流行的庫可以替換！！哈哈。

3.在bootCDN中找到對應(yīng)版本的CDN喔，注意要對應(yīng)版本喔??！

在我們的那個主題找到那個jquery的加載源

這里寫圖片描述

然后呢去bootCDN找對應(yīng)的源

這里寫圖片描述

再然后就是像這樣替換咯。

這里寫圖片描述

同理那個很知名的fontawesome庫的替換。

像這樣，我們就完成了四步優(yōu)化了，我的主頁優(yōu)化效果很明顯嘛。

三、資源推薦：

下面幾位大佬都是有一些優(yōu)化文章，還有一些有趣的前端效果。都是牛人。

（1）前端人員的優(yōu)化學(xué)習(xí)大哥。水煮魚。他里面有很多的優(yōu)化方案喔

（2）還有這位的系列，憧憬大哥

（3）再者就是這個牛人博客。軒楓閣大哥

對了，另外，我給出我的主題模板給大家吧，大家想用就用吧。哈哈。喜歡就給個star咯，謝謝大家。

Github地址--源碼傳送門

好了，前端--一個非前端人員的個人主頁優(yōu)化歷程。本博主不是一個職業(yè)前端人員，不過呢就是會搭建點自己的個人主頁，搞點小優(yōu)化這樣，當(dāng)然，有需要的話，我也會繼續(xù)學(xué)習(xí)一些優(yōu)化知識，分享經(jīng)驗給大家。歡迎在下面指出錯誤，共同學(xué)習(xí)?。∧愕狞c贊是對我最好的支持??！

轉(zhuǎn)載請注明：【JackFrost的博客】

更多內(nèi)容，可以訪問JackFrost的博客