wordpress主题优化之js,css压缩合并

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

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

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

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

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

对于网站外部加载的js,部落暂时还没有找到好的方法。可能利用插件是目前唯一比较保险的方法,而内部JS,我们则可以根据在其网站中的调用顺利,自已手工将其合并到一个文件中,为什么不合并到一个js文件中,这是因为另外两个js文件会冲突,导致功能不正常,所以如此。

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

不知道如何手工合并,或者手工合并出现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最后加载和延迟加载是同样的道理,但能给用户一个好的体验。

  标签: , , ,

  声明: 本站html5资讯教程均分享互联网转载请注明出处,本文固定地址:http://www.wpoff.com/wordpress-js-css.html