个人主页优化

优化步骤(压缩并替换图片、删除多余代码以及请求、替换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)再者就是这个牛人博客。轩枫阁大哥


转自:

JackFrost的博客