Broncho网站访问速度优化

前些时候,据网友反应,Broncho论坛访问很慢,开始觉得服务器在美国,慢是正常的,加上其他事情多,也没在意。昨晚在宿舍打开了 bbs.broncho.cn,超过了30秒还没显示,不耐烦。听说eoe android 的网站也搬到了美国,对比测试一下,eoe访问速度比broncho快多了,于是今天计划优化一下。网站流量比较小,就一台主机,没计划做cache,更谈不上CDN了,于是只好做一些小局部优化。

优化原则,当然是Yahoo的 Best Practices for Speeding Up Your Web Site
Yahoo的做法甚至是有些“变态”了,我还发现有其他更变态的优化 :(
首先,用雅虎的YSlow工具测试一下,看看瓶颈在哪,才好下手。YSlow是一个Firefox插件,这个插件依赖于Firebug插件,web开发人员对后一个大家应该很熟悉了。

1. 服务器端apache使用mod_deflate压缩页面

我们服务器是fedora 8,自带的apache也早装有mod_deflate,在http.conf配置文件添加以下内容即可。

<IfModule mod_deflate.c>
	DeflateCompressionLevel 7
	AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-httpd-php
	AddOutputFilter DEFLATE css js
</IfModule>

在http://www.whatsmyip.org/http_compression/页面测试,结果如下:

http://bbs.broncho.cn is gzipped

Original Size: 73.51 KB
Gzipped Size: 16.64 KB
Data Savings: 77.36%

效果非常明显。还有一个网站http://www.port80software.com/products/httpzip/compresscheck 它的作用是检测你的网站是否被压缩,以及压缩比率等。 用firefox与chrome分别打开broncho论坛,firefox显得有点慢,chrome哇啦哇啦的页面就显示了,chrome不愧号称速度是最快的浏览器。

2. 配置 Apache Etag
用Apache的mod_expires 模块来设置。

<IfModule mod_expires.c>
        <filesmatch "\.(jpg|gif|png|css|js)$">
                ExpiresActive on
                ExpiresDefault "access plus 2 month"
        </filesmatch>
</IfModule>

加上这个后,broncho.cn首页的Grade由C升到B,Overall performance score由79变为88!,好吉利的数字,我喜欢!

3. 合并压缩 css,javascript文件
在broncho首页,有两个css
<link href="/css/broncho_v1.css" rel="stylesheet" type="text/css" />

<link href="/css/inlay.css" rel="stylesheet" type="text/css" />
于是把他们合并在一起,以减少 http 请求次数。

有一个css在线压缩工具:
http://www.cssdrive.com/index.php/main/csscompressor

压缩后,可以选择把注释去掉,大概是这样:
html{background:#ccc; font-size:13px; margin:0}
body{margin:0; font-family:Arial; color:#333; background:url(/images/android2-bg.gif) center repeat-y}
div.body-wide{background:#fff; width:100%}

就是每个标签的属性,都写在同一行上,有的公司就要求这样。我还是坚持这样的风格:

/* $Id: broncho_v1.css 215 2010-02-01 09:06:21Z deli $ */

html {
	background:#ccc;
	font-size:13px;
	margin:0;
}
body {
	margin:0;
	font-family:Arial;
	color:#333;
	background:url(/images/android2-bg.gif) center repeat-y;
}
div.body-wide {
	background:#fff;
	width:100%;
}

主要考虑维护修改方便,不好之处就是每修改一次,都得重新压缩一次。JavaScript用YUI Compressor压缩。

4. 减小 html页面
用tab键进行代码缩进,以节约代码大小,这个可能比较变态。
用2个空格缩进的index.html:
[deli@athena html]$ ll index.html
-rw-rw-r–. 1 deli deli 5816 2010-06-22 10:40 index.html

替换为tab之后的index.html:
[deli@athena html]$ ll index.html
-rw-rw-r–. 1 deli deli 5342 2010-06-22 11:08 index.html
index.html文件本身就比较小,大约减少0.5K这样,效果不是很显著。

5. phpbb论坛优化
broncho论坛采用 phpbb,前段时间对w3c鬼迷心窍,为了使得firefox右下角 Html Validator大红叉去掉,把一些插件的@import 全部写到了overall_header.html,这样首页都要把这些css,js全部加载,装七七八八的插件都堆在overall_header.html,自然会变慢。作为折衷考虑,只好把这些js,css放在真正需要的页面。

phpbb本身确实没什么大的优化了,模板解析,sql查询,都放在cache里,如果可以优化的话,phpbb的开发人员早就把这个问题搞定。记得之前做过CDN,服务器内存都是4G以上,以空间换时间,把很多文件映射的内存中,所以也试试用tmpfs来存放phpbb的 cache,php session。

#phpbb cache:
mkdir /dev/shm/cache
chmod 1777 /dev/shm/cache/
mount --bind /dev/shm/cache/ /var/www/html/forum/cache/

#php session:
mkdir /dev/shm/session
chmod 1777 /dev/shm/session/
mount --bin /dev/shm/session/ /var/lib/php/session/ 

6. 其他杂项
* img使用 width 和 height 属性来定义图像尺寸,以便图像被更快地显示。
* 网址后加斜杠

参考:
1.《如何提高网站访问速度 从30秒到3秒的改变》,不知道作者是谁,大家可以搜索一下。
2. oasisfeng phpBB论坛优化拾零
3. Apache Cache Last-Modified、Expires和Etag相关工作原理

If you enjoyed this post, make sure you subscribe to my RSS feed!

Leave a Reply

Your email address will not be published. Required fields are marked *