前端--一个非前端人员的个人主页优化历程
2016-12-25 本文已影响189人
JackFrost_fuzhu
我们知道现在很多个人主页都是基于模板的二次开发的，本人作为一个非前端人员当然也是模板开发，然而我套了模板且安装了部分插件，发现我的主页居然要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找对应的源
这里写图片描述
再然后就是像这样替换咯。
这里写图片描述
