前端--一个非前端人员的个人主页优化历程

我们知道现在很多个人主页都是基于模板的二次开发的，本人作为一个非前端人员当然也是模板开发，然而我套了模板且安装了部分插件，发现我的主页居然要9秒才加载完！！！这怎么能忍！必须优化呀，于是就有了这次的优化之路。

---

文章结构：1.我的主页的未优化前的臃肿设计以及我如今的优化效果呈现。2.优化步骤（压缩并替换图片、删除多余代码以及请求、替换CDN，删除插件、使用优化插件）。3.前端资料推荐。

---

一、我的主页的未优化前的臃肿设计以及我如今的优化效果呈现：

未优化前的臃肿设计以及可优化的思路：

如今优化的结果以及代码结构

这就是我的优化结果啦！！优化完我也很惊讶呢，进入了毫秒级别啦！！不过比起一些前端大牛自己设计自己优化，变成0.6毫秒，我当时差点想把自己活埋，我太渣了。

---

二、优化步骤（压缩并替换图片、删除多余代码以及请求、替换CDN，删除插件、使用优化插件）

（1）压缩并替换图片；

见上面第一张图片，可以看到一张图片几十k呢，我的网页加载就几百k，这就几十k了，必须改呀！！！

给个压缩工具给大家先：智图压缩

然后呢？把我们的主题拉下来，然和用上面的工具去压缩图片，替换就可以了。很简单吧。本博主是用FTP的

原来的图片大小

现在的图片大小：

我的主题的图片

（2）删除多余代码以及请求：

这个就需要大家去在网页看自己的首页了，因为一般用别人的模板，它们会偷偷地加很多别的链接去偷取流量，所以我们就要用F12去看下加载耗时很长的是什么，然后去在我们拉下来的主题文件中去删除。（别急，到时候整个主题会重新推回去服务器）

（3）删除插件、使用优化插件（这个放在CDN之前优化，效果会非常明显的喔，代码优化也放在CDN前）

优化的插件，使用水煮鱼大佬的这个插件。

删除不必要的插件：我之前使用过Jetpack 这个统计插件，呃，本博主不推荐使用它，因为它给我的主页的head中加了一大堆标签，一大堆js。导致加载9秒的原因起码被它拖了3秒。

（4）替换CDN：

1.先找一个免费的强大的CDN嘛。给大家推荐：BootCDN

2.然后怎么办呢？？？然后就是根据在网页F12查看我们可以替换的CDN源嘛。本博主找到了JQuery和fontawesome这两个流行的库可以替换！！哈哈。

3.在bootCDN中找到对应版本的CDN喔，注意要对应版本喔！！

在我们的那个主题找到那个jquery的加载源

然后呢去bootCDN找对应的源

再然后就是像这样替换咯。

同理那个很知名的fontawesome库的替换。

---

像这样，我们就完成了四步优化了，我的主页优化效果很明显嘛。

---

三、资源推荐：

下面几位大佬都是有一些优化文章，还有一些有趣的前端效果。都是牛人。

（1）前端人员的优化学习大哥。水煮鱼。他里面有很多的优化方案喔

（2）还有这位的系列，憧憬大哥

（3）再者就是这个牛人博客。轩枫阁大哥

---

对了，另外，我给出我的主题模板给大家吧，大家想用就用吧。哈哈。喜欢就给个star咯，谢谢大家。

Github地址–源码传送门

好了，前端–一个非前端人员的个人主页优化历程。本博主不是一个职业前端人员，不过呢就是会搭建点自己的个人主页，搞点小优化这样，当然，有需要的话，我也会继续学习一些优化知识，分享经验给大家。欢迎在下面指出错误，共同学习！！你的点赞是对我最好的支持！！

转载请注明：【JackFrost的博客】

更多内容，可以访问JackFrost的博客