Jack Frost

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

我们知道现在很多个人主页都是基于模板的二次开发的,本人作为一个非前端人员当然也是模板开发,然而我套了模板且安装了部分插件,发现我的主页居然要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的博客

码字很辛苦,转载请注明来自JackFrost《前端–一个非前端人员的个人主页优化历程》

Leave a Reply

Your email address will not be published. Required fields are marked *