现在的位置:首页>wordpress>正文

wordpress博客优化之JS文件压缩,合并,延迟及最后加载

2013年12月03日 ⁄ 共 2024字 评论 35 条

wordpress博客优化的种类有很多,今天部落主要来讲一下关于js文件方面的优化,主要有JS文件压缩,JS文件合并,延迟加载和在网站的最后加载js文件。

合理优化网站中的JS文件,可以减少HTTP请求的次数和压缩文件的大小,能有效提升我们的网站加载速度,实际上,对于网站中的CSS样式文件,也可以按JS的操作方法来处理。

一,JS文件压缩
一般的服务器都开启gzip功能,另外还有一些wordpress插件也可以将您网站中的JS文件进行压缩操作,但很明显,如果仅仅是执行压缩,完全没必要使用插件,现在提供在线压缩的网站不少,我们可以直接将js内容复制上去,从而得到相应的压缩好的JS文件,这里部落推荐大家用开源中国提供的在线工具,地址是:http://tool.oschina.net/jscompress,圧缩过程如下图:

JS文件压缩,合并1

我们将压缩结果覆盖原来的文件就可以了。

二,JS文件合并
如果您的JS文件很多,那么建议您进行合并处理。当然,如果您的js文件大小都超过几M,那么合并可能反而会影响速度,只是这种容量超过几M的js文件很少见,大多是几十kb左右。

如何合并呢,简单的方法就是安装插件,现在支持这个功能的wordpress插件比较多,例如Better WordPress Minify,它会自动压缩合并您网站中的JS和CSS文件,部落在wordpress的官方网站上看到,这个插件一直在更新,不像Minify这个插件,已经很长时间没有进行过更新了。其它的还有JS & CSS Optimizer,Scripts Gzip等,您可以根据自已的要求选择一款适合自已的。

对于网站外部加载的js,部落暂时还没有找到好的方法。可能利用插件是目前唯一比较保险的方法,而内部JS,我们则可以根据在其网站中的调用顺利,自已手工将其合并到一个文件中,例如部落网站中原来有8个js,如下图:

JS文件压缩,合并2

现在将其减少到只有3个了,有朋友可能要问,为什么不合并到一个js文件中,这是因为另外两个js文件会冲突,导致功能不正常,所以如此。

当然,如果用Minify压缩合并JS工具来处理,可能可以实现所有的js完美融合到一个js文件中,如果您有兴趣,可以找找Minify这方面的教程。

JS文件合并后,您可以使用一些工具来检测您的网站加载速度,效果还是很明显的,如下图:

JS文件压缩,合并3

这是一张来自谷歌开发中心的截图,JS文件合并后,查询次数由7变成2,请求的字节由2681缩小为783了。部落合并后,可以在百度页面优化建议中看到,由于合并JS减少了0.6秒左右的加载时间。

不知道如何手工合并,或者手工合并出现js文件不能正常使用的情况,那么您可以试下这个方法:
1.新建一个的all.js.php文件,加入以下内容

<?php
require_once('目录/wp-blog-header.php' ) ;
include ("/js/a.js" ) ;
include ("/b.js" ) ;
?>

放在您的当前主题下,用下面的代码来替换您之前的js代码:

<script xsrc="all.js.php" type="text/javascript"/>

三,JS延迟加载
关于延迟加载,部落之前介绍过两篇这样的文章,用代码实现wordpress文章中的图片延迟加载WordPress网页打开速度慢,轻松用代码实现站内联盟广告延迟加载您可以参考一下,道理基本上是一样的,JS延迟加载的代码如下:

<script language="JavaScript" src="" id="my"></script>
<script>
setTimeout("document.getElementById('my').src='include/php100.php'; ",2000);//延时2秒
</script>

上面代码中的2000代表2秒,您可以根据您的主机速度来进行调整。这个方法来源自网络,部落没有去验证,另外,现在大多数的外部js都可以用异步加载的方式,比如统计代码,广告联盟的代码等,通过异步加载能有效提升网站加载速度,这些以后部落会再作介绍。

四,JS最后加载
这里先要说明一下,大多数时候,我们的header.php中都会存在一些js文件,而这里面有一些不一定是在一开始就非得要加载的,我们可以手工将网站中的JS代码移到footer.php这个文件中实现最后加载。

小结
通过上面几个js处理,会让您的wordpress博客速度得到一定的提升,当然,如果想更快,那么最好的办法当然是换主机,不愿意的换的,没钱换的,也可以使用免费CDN来进行加速,例如部落前几天介绍的百度加速乐提供的免费CDN加速效果就相当不错。

使用wordpress合并JS的插件,大多数都能同时对JS文件进行压缩处理,JS延迟加载的话,会将网站中需要加载的一些div段先展示出来,速度是并无提升,只是我们会先看到网页中的实体部分,JS最后加载和延迟加载是同样的道理,但能给用户一个好的体验。

评论 35 条 评论内容很精采,有内幕,而且绝对有干货

  1. 小青年 2013年12月03日 11:34  @回复  Δ-49楼 回复

    楼上这个刚刚还在我那留了条LJ评论,网站的JS压缩和最后加载是能提升不少的速度


    • 管理员
      管理员 2013年12月03日 11:39  @回复  ∇地下1层 回复

      如果不能合并,起码将js异步加载,也可以提升速度!

  2. 社新社 2013年12月03日 12:04  @回复  Δ-48楼 回复

    嗯,合并了之后就减少了再次连接,是快不少的,尤其JS。

  3. PHP二次开发 2013年12月03日 12:59  @回复  Δ-47楼 回复

    网站的加载速度是很重要。

  4. Leniy 2013年12月03日 15:01  @回复  Δ-46楼 回复

    我的开启了minify,但是跟cdn有冲突


    • 管理员
      管理员 2013年12月03日 20:14  @回复  ∇地下1层 回复

      minify和cdn冲突,您用的七牛,要不换成加速乐试试看!

  5. Leniy 2013年12月03日 15:03  @回复  Δ-45楼 回复

    我的七牛cdn,11月份的GET次数超了,必须合并了

  6. YYBlog 2013年12月03日 20:15  @回复  Δ-44楼 回复

    话说很多人都说WP很臃肿…


    • 管理员
      管理员 2013年12月03日 20:19  @回复  ∇地下1层 回复

      是的,所以很多人放弃wordpress改用zbolg等,但wp是目前支持的主题和插件最多的开源程序,现在的运行效率也不错。主要还是自已优化!

  7. 张海华博客 2013年12月03日 20:39  @回复  Δ-43楼 回复

    不懂JS的路过呀


    • 管理员
      管理员 2013年12月03日 20:42  @回复  ∇地下1层 回复

      我也不是很懂,但将两个js文件移到一个文件中总是会的吧,这样就能完成合并操作。去试试吧,记得先备份!

  8. 海棠秋客 2013年12月04日 10:18  @回复  Δ-42楼 回复

    没用wordpress


    • 管理员
      管理员 2013年12月04日 10:44  @回复  ∇地下1层 回复

      您是用的zbolg吗?我看您的主题像wordpress程序啊!

  9. 叶蔚卿 2013年12月04日 11:01  @回复  Δ-41楼 回复

    这个也可以,很专业,收藏了好博客


    • 管理员
      管理员 2013年12月04日 11:47  @回复  ∇地下1层 回复

      抽个时间合并一下站内的js,对速度提升有很大的帮助!

  10. IT青年 2013年12月06日 11:43  @回复  Δ-40楼 回复

    很能折腾啊!


    • 管理员
      管理员 2013年12月06日 11:51  @回复  ∇地下1层 回复

      用wordpress做博客,折腾要占很大一部分内容。

  11. 祥磊部落 2013年12月08日 18:08  @回复  Δ-39楼 回复

    这个必须要优化的

  12. 正版软件爱分享 2013年12月10日 14:34  @回复  Δ-38楼 回复

    其实要有选择性的进行合并,不是都合并就好的。


    • 管理员
      管理员 2013年12月10日 14:39  @回复  ∇地下1层 回复

      是的,看JS文件的大小来操作。不过基本上通用的JS都不大,都可以合并它们。

      • 正版软件爱分享 2013年12月11日 21:44  @回复  ∇地下2层 回复

        和加载的顺序也有关系,像知更鸟主题合并js和css后反而会变慢。


        • 管理员
          管理员 2013年12月12日 08:03  @回复  ∇地下3层 回复

          我现在合并的js文件,基本都是能在最后加载的,一定要在header中加载的,另外合并就可以了!

  13. 艾特 2013年12月16日 20:32  @回复  Δ-37楼 回复

    我的网站模板的js文件好像也需要合并。


    • 管理员
      管理员 2013年12月16日 21:55  @回复  ∇地下1层 回复

      最好将能合并的全部合并一下,也可以使用插件!

  14. 百家网络博客 2014年01月10日 18:12  @回复  Δ-36楼 回复

    人生就是在debug

  15. 真人cs装备 2014年03月13日 16:20  @回复  Δ-35楼 回复

    Thank you! Can you speak chinese? Expect your reply!

  16. 望星湖畔 2014年11月25日 11:22  @回复  Δ-34楼 回复

    cPanel开启了Optimize Website – Compress all content,而且也使用了cloudflare,还需要安装 Better WordPress Minify类插件吗?谢谢!!


    • 管理员
      管理员 2014年11月25日 11:33  @回复  ∇地下1层 回复

      不好意思,您说的Optimize Website – Compress all content这些插件我都没用到过,也是用来合并js文件的吗?如果是,那就没必要安装了!

  17. 管理学书籍 2016年01月26日 00:56  @回复  Δ-33楼 回复

    其实现在正在研究在不同的页面调用不同的CSS,比如single页面,并不需要主题所有的CSS。


    • 管理员
      管理员 2016年01月26日 07:28  @回复  ∇地下1层 回复

      这样的话,会导至出现很多的CSS文件,反而不好吧.

      • 管理学书籍 2016年01月26日 11:26  @回复  ∇地下2层 回复

        为什么会导致出现多很多的CSS?SINGLE用独立的header,然后调用只有single需要用到的CSS和JS,比如网站用的一些revolution slider,他都是全站调用,实在太没必要了,速度不说,代码看起来也不简洁。

  18. 歪扑猫 2016年04月21日 11:25  @回复  Δ-32楼 回复

    确实不错的技术文,wp的臃肿总会需要到这些技术文。赞一个,这就去折腾!!!

  19. 我爱动感单车网 2016年07月12日 00:20  @回复  Δ-31楼 回复

    不会整这些,咱只好保持原样不动。

  20. 野人摊影视分享 2016年07月13日 13:21  @回复  Δ-30楼 回复

    他们都说合并在一起,请求一个js可以加快速度,但是我觉得网站现在速度挺快的,就没弄了


    • 管理员
      管理员 2016年07月13日 13:31  @回复  ∇地下1层 回复

      你主机会么配置?在不影响网站的情况下,能合并则合并.

给我留言