我们知道网站的访问速度和很多因素相关,但是今天这里只是优化我们能力范围内的首页文件加载数量与大小。

如果首页文件很大,肯定加载慢。还有一个因素就是首页如果加载很多css和js文件,因为在加载过程中会建立很多次连接从而降低访问首页的速度。

下面是我博客默认情况下的加载css和js文件的数量

请求数截图

文件数

从图上可以看到加载了4个css文件和5个js文件。大小分别为54.2kb和45.5kb。

下面我们的主要工具出场:minify

这个程序是纯php编写的开源程序,用来将我们网站的css和js文件进行整合与压缩。这样我们就可以通过整合css与js文件并压缩大小从而提高首页加载速度。

首先将minify下载,我这里采用的是minify_2.1.3版本。将下载后的min目录放到网站的根目录。
接着我们改造我们的程序,让css与js文件通过minify程序合并压缩。

我是自己写了一个类,我起名为merge.php用来调用minify整合。下面是类代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
/**
* JS和CSS文件合并类
*
* @copyright (c) xinlogs.com All Rights Reserved
* $Id: merge.php 2011-11-16 09:54:58Z xinlogs.com$
*/
class Merge {
//定义两个数组用来存储全部css和js文件的位置
static private $css_list=array();
static private $js_list=array();
static private $js_code=array();
//定义addCssFile方法,用来添加css文件到数组
static function addCssFile($addFilePath) {
array_push(self::$css_list,$addFilePath);
}
//定义getCssList方法,用来返回css文件字符串
static function getCssList(){
return implode(",",self::$css_list);
}
//定义addJsFile方法,用来添加js文件到数组
static function addJsFile($addFilePath) {
array_push(self::$js_list,$addFilePath);
}
//定义getJsList用来返回js文件字符串
static function getJsList(){
return implode(",",self::$js_list);
}
//加入js代码
static function addJsCode($addJsCode)
{
array_push(self::$js_code,$addJsCode);
}
static function includejscode(){
return implode(" ",self::$js_code);
}
//用来返回加入CSS代码的语句
static function includecss() {
$css="<link href=".BLOG_URL."min/?f=".Merge::getCssList()." rel=\"stylesheet\" type=\"text/css\" />";
return $css;
}
//用来返回插件js代码的语句
static function includejs() {
$js="<script src=".BLOG_URL."min/?f=".Merge::getJsList()." type=\"text/javascript\"></script>";
return $js;
}
}

将merge.php放到网站include/lib目录下,emlog就会自动加载这个类了。

接着我们修改我们的模板与插件,让所有css与js文件通过Merge这个类来处理。

一般css与js文件都是在模板的header.php文件内加载的,这里以默认模板为例说明

我们打开header.php文件,然后修改css文件加载的语句。将原来加载css的语句,采用Merge::addcssfile方法代替

Merge::addCssFile("content/templates/default/main.css");

最后在doAction后面统一输出我们合并后的css文件。

1
2
<?php doAction('index_head'); ?>
<?php echo Merge::includecss();?>

我们再来处理js文件,我是将模板的js文件调整到了fooder.php里加载,下面以这个footer.php为例说明
首先将加载js文件的语句,替换为Merge::addJsFile方法

1
<?php Merge::addJsFile("include/lib/js/common_tpl.js");?>

然后在doAction后面再统一调用合并后的js文件

1
2
3
4
5
<?php doAction('index_footer'); ?>
<?php echo Merge::includejs();?>
<?php echo Merge::includejscode();?>

以上只是针对模板的修改,我的这个博客还采用了高亮代码的插件,这个插件会调用一些js与css文件。所以下面我还修改这个插件的代码,使它也通过merge类来合并输出css与js。

这个插件主要修改drp_highlighter.php文件,在drp_highlighter_index_head方法里加入css的引入

1
2
3
4
5
function drp_highlighter_index_head() {
Merge::addCssFile("content/plugins/drp_highlighter/css/editor.css");
}

在drp_highlighter_index_footer方法里加入对js文件与代码的引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function drp_highlighter_index_footer(){
include(EMLOG_ROOT.'/content/plugins/drp_highlighter/config.php');
Merge::addJsFile("content/plugins/drp_highlighter/js/jquery.js");
Merge::addJsFile("content/plugins/drp_highlighter/js/jquery.highlighter.src.js");
$jscode="
<script type='text/javascript'>
$(document).ready(function(){
var option={
dir:'".BLOG_URL."content/plugins/drp_highlighter/js/syntaxhighlighter/',
name:'code',
showControls:true,
skin:'".constant('highlighter')."'
};
$.SyntaxHighlighter(option);
});
</script>";
Merge::addJsCode($jscode);
}

最后在文件最后面找到注册action的代码,和上面方法名修改对应上。

1
2
3
4
5
6
7
addAction('adm_sidebar_ext', 'drp_highlighter_adm_sidebar');
addAction('index_head','drp_highlighter_index_head');
addAction('index_footer', 'drp_highlighter_index_footer');
addAction('adm_writelog_head','drp_highlighter_adm_head');

下面是我整合css与js代码后的效果

整合后效果1

css文件降低为3个,其中有两个为新浪微博的代码,这个不好整合了。。。

整合后效果2

js文件数降低为3个,其中一个是微博的,一个是百度统计的。我们自己的代码已经整合到一个请求里调用了。