首页 > Linux, Web开发, 挨踢(IT) > WordPress优化小记

WordPress优化小记

2013年3月11日 发表评论 阅读评论 929 人阅读    

  昨晚(2013年3月8日)无意间发现“‘地瓜哥’博客网”使用的SyntaxHighlighter插件所引用的JavaScript文件竟然没有压缩。这对于追求网站加载的我来说,是不能容忍的!早在“高性能网站的十四条黄金法则”中,D瓜哥就已经介绍了提高网站加载速度的指导方法。正好周末无事,干脆就把“‘地瓜哥’博客网”优化一下。著小文一篇以记之!

压缩JavaScipt和CSS

  JavaScript压缩代码的重要性不言而喻,如今的压缩工具也有不少,例如YUI Compressor,Google Closure Compiler,以及现在比较红火的UglifyJS。UglifyJS的出名是由于它代替Closure Compiler成为jQuery项目的压缩工具。由于jQuery如此出名的JavaScript库都使用UglifyJS进行压缩,想必UglifyJS有其自己的独到之处。所以,今天,D瓜哥就使用UglifyJS来压缩一下SyntaxHighlighter中的JavaScript文件。

  想要UglifyJS,则必须安装NodeJS。目前NodeJS也支持Windows系统,但是在安装UglifyJS时,报错了。所以,还是劝大家在Linux下整吧。

  在Linux系统中,NodeJS的安装很简单,网上也有很多介绍,这里就不再赘述。但是在安装UglifyJS时遇到了一些问题,这里简单说一下UglifyJS的安装吧。

  现在UglifyJS已经升级到2,D瓜哥就直接拿第二版来解说。安装完NodeJS后,就可以安装UglifyJS了,很简单,使用如下指令即可:

npm install uglify-js -g

  但是,这时会有一个权限问题;使用sudo后,又报“找不到命令npm”。这时,需要把NodeJS的路径加入到PATH环境变量中。在每个Linux用户的跟目录下,有个.profile是修改用户相关的环境变量的地方;而在/etc/.profile文件中,是负责维护整个系统的环境变量。由于,每个系统的情况不太一样,这里就不给出修改方式了。

  经过上面的安装后,使用uglifgyjs压缩JavaSctipt文件时,还可能出现找不到uglifyjs命令的情况,请修改环境变量,把uglifyjs的路径加入到环境变量中去。这里假设NodeJS的目录是$NodeJS_Home,则uglifyjs的路径为:$NodeJS_Home/node_modules/uglify-js/bin。

  最后,终于可以使用uglifyjs压缩Javascript文件了。 指令如下:

# 压缩文件
uglifyjs "$fileName" -o "$output_fileName"
# 还可以在最后加上参数-c、-m,提高压缩强度。

  但是,使用几次之后,可能会发现有点不方便,是因为SyntaxHighlighter下JavaScript文件太多了。如何能刚方便的压缩呢?对于这种重复性的工作,我们可以将其交给Linux Shell来完成。Shell代码如下:

#!/bin/bash
# 压缩当前目录下的JavaScript文件
# D瓜哥 http://www.diguage.com/
# 2013年3月9日   开发
# 2013年3月11日  简化

path=`pwd`

mkdir min    # 存放一般压缩
mkdir min2   # 存放高强度压缩

for fileName in `ls *.js` 
do
   # 一般压缩
   uglifyjs "$fileName" -o "$path/min/$fileName"
   
   # 高强度压缩,会使用变量替换等比较激进的压缩方便。
   uglifyjs "$fileName" -o "$path/min2/$fileName" -cm
done

echo "OK"

  由于D瓜哥好长时间不写Shell脚本了,所以这个脚本还不是尽善尽美,需要把这个脚本保存成文件,名字如cmprs.sh,然后将其分别放到SyntaxHighlighter/syntaxhighlighter2/scripts/和SyntaxHighlighter/syntaxhighlighter3/scripts/下各一份,然后运行如下命令,完成压缩:

# 使用脚本压缩文件
sh cmprs.sh

  今天(2013年3月11日)又想到把SyntaxHighlighter的JavaScript代码压缩了。CSS文件是否需要压缩呢?打开一看,注释超多,必须压缩!但是,UglifyJS就爱莫能助了,只能使用YUI Compressor压缩。我的MyEclipse中安装了相关插件,然后一个文件文件压缩,在本机测试后,没有发现问题就直接上传到服务器上了。一切运行正常。

  D瓜哥把压缩好的文件放到了新浪微盘上,需要的话,请自行下载:猛击这里下载

去掉JavaScript的版本号

  既然已经开始SyntaxHighlighter动手改正了,那就来得更彻底一点,在浏览器中查看网友的源代码,D瓜哥发现每个和SyntaxHighlighter相关的JavaScript文件路径后面都有一个版本声明!这对于开发环境来说,也许是个好事,可以防止缓存带来不必要的干扰。但是,对于部署到网页服务器上的,修改的机会很少,没必要加上版本声明;而且,版本声明还有可能影响到缓存,得不偿失!D瓜哥忍你好久了,这次也把你修理掉!

  由于在路径后面添加的版本参数是这样的:“ver=2.1.364”。所以,先进入到SyntaxHighlighter目插件的录下,使用如下指令(D瓜哥在自己电脑上安装了Cygwin;否则在Windows上不能使用),找到添加版本声明的地方:

# 查找含ver的行数
grep 'ver' *.php
# 在Cygwin下运行该指令,结果竟然不现实行号!

  运行结果如下:

$this->agshver  = '2.1.364';
$this->agshver  = '3.0.83c';
wp_register_script( 'syntaxhighlighter-core',             plugins_url('syntaxhighlighter/' . $this->shfolder . '/scripts/shCore.js'),            array(),                         $this->agshver );
……
# 对结果格式做了稍微的调整。

  从运行的结果显示,在syntaxhighlighter.php文件(只有这么一个php文件)中有几十行(目测)还有wp_register_script()函数调用中,最后函数和版本号有关。D瓜哥在“使用Microsoft Ajax Content Delivery Network(CDN)优化WordPress加载速度”中就介绍过,把设置版本号的参数传成null就成功去掉*.js链接后面的版本号参数。由于,这些wp_register_script()函数调用中,最后的参数都是一个变量。结果中也显示了这个变量的赋值情况,所以,只要找到这个变量的赋值语句,然后将其赋值成null即可一劳永逸。打开syntaxhighlighter.php搜索“$this->agshver = ’2.1.364′;”,然后在113行,将其代码修改、保存成如下:

		// Dynamically set folder and version names for SynaxHighlighter
		if ( 2 == $this->settings['shversion'] ) {
			$this->shfolder = 'syntaxhighlighter2';
			$this->agshver  = '2.1.364';
		} else {
			$this->shfolder = 'syntaxhighlighter3';
			$this->agshver  = '3.0.83c';
		}

  这时可以检测一下工作效果,打开浏览器,找一个有代码高亮的文章打开,查看一下网页源代码,看看原来的版本是不是消失了?!

去掉All in One SEO Pack的作者声明

  在上一步的查看网页源代码中,有木有发现如下代码:

<!-- All in One SEO Pack 1.6.15.3 by Michael Torbert of Semper Fi Web Design[326,453] -->
<meta name="description" content="《Agile Web Development with Rails》抄书笔记(02):Rails之初体验" />
<meta name="keywords" content="ruby,rails,动态语言,命令,目录结构,java,web" />
<link rel="canonical" href="http://www.diguage.com/archives/105.html" />
<!-- /all in one seo pack -->

  这第一行和最后一行干毛啊?如此多余的代码,也应该去掉!

  这个就很简单了,根据输出显示,这是由All in One SEO插件生成的。进入这个插件的目录下,打开aioseop.class.php,在里面搜索“Michael”,然后就显示到如下内容:

echo "\n<!-- All in One SEO Pack $this->version by Michael Torbert of Semper Fi Web Design";
if ($this->ob_start_detected) {
	echo "ob_start_detected ";
}
echo "[$this->title_start,$this->title_end] ";
echo "-->\n";

  直接把第一行(D瓜哥目前修改的是1.6.15.3版的,在代码中应该是258行)注释掉,刷新页面,多出了个“[326,453] –>”。这是怎么回事?很纳闷!

  后来又仔细找了一下代码,发现就在紧接着刚刚注释掉的代码就是输出那段奇怪字符的地方,直接将代码注释掉。世界又平静了!

  另外,还有结束的那段代码,在aioseop.class.php文件的401行,直接注释掉即可。

去掉WP-PostViews的生成说明字符

  网页源代码中,还有WP-PostViews的生成说明信息,进入到该插件的目录下,打开wp-postviews.php文件,搜索“Generated”,将其中的两行代码注释掉即可。

去掉WP-PageNavi的CSS版本号

  “‘地瓜哥’博客网”还使用了WP-PageNavi,D瓜哥还注意到这个插件相关的CSS,还有版声明,这个也必须去掉。打开core.php,在最后几行代码中,有如下一行代码:

wp_enqueue_style( 'wp-pagenavi', $css_file, false, '2.70' );

  将最后的参数改成null即可。

添加存档

  经过多次测试,加上了“文章存档页面”。这应该是最大的改动了!经过这几天(从2013年3月9日到2013年3月11日)的试用,感觉非常好!博客本来就是存放自己有用资料的地方,加上这个存档页面,就不需要一页一页去翻了,找某篇文章真的很方便!推荐试用一下。

附录

  另外,D瓜哥在改造过程中,还发现一个小疑问。网页源代码中,竟然还有如下两行代码:

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.diguage.com/blog/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.diguage.com/blog/wp-includes/wlwmanifest.xml" /> 

  因为以前的“地瓜哥”被插过,所以D瓜哥就很警觉。然后用Google百度了一下,才了解了这方面的知识。加个附录说明一下。

wlwmanifest及RSD介绍

  这两行标记都是针对Blog的离线编辑器开放接口所使用的。RSD是一个广义的接口,wlwmanifest是针对微软Live Writer编辑器的。有了这两个接口,在使用离线编辑器撰写博客的时候,就可以直接在软件中选择分类,标签等等内容了。如果不需要离线编辑,认为开放的两个接口不够安全,那么可以 在主题中functions.php中添加如下两行代码禁用掉RSD和wlwmanifest:

remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'rsd_link');

  注意,关于关闭的代码,D瓜哥没有试验。特此说明。

 

参考资料

  1. YUI Compressor官网
  2. Google Closure Compiler
  3. UglifyJS
  4. WordPress wlwmanifest RSD的简单介绍


作 者: D瓜哥,https://www.diguage.com/
原文链接:https://wordpress.diguage.com/archives/108.html
版权声明:非特殊声明均为本站原创作品,转载时请注明作者和原文链接。

  1. 醉月轩
    2013年3月21日12:55 | #1

    在windows下也可以使用UglifyJS,建议 D瓜哥,看看 grunt 结合UglifyJS 的使用。

  1. 本文目前尚无任何 trackbacks 和 pingbacks.