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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,259评论 25 707
  • 前些日子从@张鑫旭微博处得一份推荐(Front-end-tutorial),号称最全的资源教程-前端涉及的所有知识...
    谷子多阅读 4,154评论 0 44
  • 所谓的牛逼不过只是良好习惯的养成和坚持,仅此而已。
    一个人的独行阅读 100评论 0 0
  • 如果有一天,我从你的世界消失了,你会不会在街上走着走着突然想起了我,站着愣神好久;如果有一天 ,我从你的世界消失了...
    不暴阅读 254评论 0 0
  • 7月1日 第一天选择新的运动:瑜伽 一节阴瑜伽,基本都是静止的动作,不会出太多汗,更多的是放松,调整呼吸 第二节是...
    陈小lu阅读 461评论 0 0