首页 分享博客 usability 你的网站压缩了吗?
09月 07
周二
 

欢迎订阅大白电子报

大白网站有效性电子报
大白高清视频电子报
大白视频营销电子报


Receive HTML?

你的网站压缩了吗?
周日, 2009年 01月 18日 02:29

Tags: 网站优化 | 网站压缩 | 网站提速 | 网页压缩

一个网站的速度(载入,站内页面切换),是其用户决定在该网站是否停留的一个重要因素。很多客户喜欢让人眼花缭乱的Flash动画,绝大多数情况下Flash动画恰恰是一个速度杀手,而且也对网站的SEO没有任何正面影响;现在还有越来越多的网站,为了其设计的美观和功能的繁琐,加载了大量JS,而且CSS的代码也越来越长。这些大块头的JS和CSS文件,动辄几十k,甚至上百k,漂亮的页面和复杂的功能是牺牲网站的速度得来的。今天我们要谈的不是如何去压缩一个Flash动画或者图片,而主要是介绍一个PHP动态网站的全站php,css,js文件压缩的方法。像Joomla或者Wordpress这样的CMS搭建的网站,也可以用这个方法进行全站压缩。

网页压缩是一项由 WEB 服务器和浏览器之间共同遵守的协议,也就是说 WEB 服务器和浏览器都必须支持该技术,所幸的是现在流行的浏览器都是支持的,包括 IE、FireFox、Safari、Opera 等;服务器有 Apache 和 IIS 等。双方的协商过程如下:

  1. 首先浏览器请求某个 URL 地址,并在请求的头 (head) 中设置属性 accept-encoding 值为 gzip, deflate,表明浏览器支持 gzip 和 deflate 这两种压缩方式(事实上 deflate 也是使用 gzip 压缩协议,下面我们会介绍二者之间的区别);
  2. WEB 服务器接收到请求后判断浏览器是否支持压缩,如果支持就传送压缩后的响应内容,否则传送不经过压缩的内容;
  3. 浏览器获取响应内容后,判断内容是否被压缩,如果是则解压缩,然后显示响应页面的内容。

在实际的应用中我们发现压缩的比率往往在 3 到 10 倍,也就是本来 50k 大小的页面,采用压缩后实际传输的内容大小只有 5 至 15k 大小,这可以大大节省服务器的网络带宽,同时如果应用程序的响应足够快时,网站的速度瓶颈就转到了网络的传输速度上,因此内容压缩后就可以大大的提升页面 的浏览速度。 那么我们今天介绍的方法,就是利用gzip对网站进行压缩。那么前提条件是:

  1. 您的服务器 PHP 4.3.0 或者更高版本。
  2. Apache的mod_rewrite最好开启。

我们会用到SmartOptimizer,这是由一位叫Ali Farhadi的伊朗年轻人写得程序,您可以从他的网站http://farhadi.ir/works/smartoptimizer下载最新版本的SmartOptimizer,目前最新版是1.7beta。您也可以在这里直接下载。有了这个程序,我们就可以开始极为简单的网站压缩步骤了:

  1. 解压缩SmartOptimizer 1.7beta压缩包
  2. 上传smartoptimizer到您网站的根目录
  3. 修改您网站根目录下htaccess文件,在"RewriteEngine On"这一行后面,添加如下代码:
<IfModule mod_expires.c>
   <FilesMatch "\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt)$">
      ExpiresActive On
      ExpiresDefault "access plus 10 years"
   </FilesMatch>
</IfModule>
<IfModule mod_rewrite.c>
   RewriteEngine On
   
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule ^(.*\.(js|css))$ smartoptimizer/?$1
   
   <IfModule mod_expires.c>
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteRule ^(.*\.(js|css|html?|xml|txt))$ smartoptimizer/?$1
   </IfModule>

   <IfModule !mod_expires.c>
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteRule ^(.*\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt))$ smartoptimizer/?$1
   </IfModule>
</IfModule>
<FilesMatch "\.(gif|jpg|jpeg|png|swf|css|js|html?|xml|txt)$">
   FileETag none
</FilesMatch>

smartoptimizer/config.php文件里面还有更多设置,不过一般情况下用默认设置就可以了。您若感兴趣更多设置,可以看看作者网站,上面解释的很清楚。

使用这种方法,通过对你网站的JS和CSS文件压缩,可以是网站速度提高80%甚至更多。如果你有大量的JS、CSS文件,还可以有效减少每个月的带宽流量使用。最重要的是,这样优化之后的网站,可以让用户有更好的浏览感受,速度快了,自然就有往下深入浏览的可能。

点阅次数: 1282

引用本文(0)

引用本文的超连结

回应人次 (0)

订阅此回复的RSS

撰写回应

小一点 | 大一点
security image
请输入可以显示的字符

busy
 

收藏到您喜欢的网摘

添加到del.icio.us 添加到新浪ViVi Add to Google添加到百度搜藏 添加到POCO网摘 添加到天天网摘365Key 添加到和讯网摘 添加到天极网摘 添加到黑米书签 添加到QQ书签 添加到雅虎收藏 添加到奇客发现 diigo it 添加到饭否 添加到飞豆订阅 添加到抓虾收藏 添加到鲜果订阅 digg it 貼到funP 添加到有道阅读 Live Favorites 添加到Newsvine 打印本页 用Email发送本页 在Facebook上分享 添加到 Digbuzz 我挖网 Mark in Ma.gnolia Add this page to Mister Wong Stumble it

联系大白

电话: 010 - 5968 4761

传真: 010 - 8775 7113

Email: hd@byword.hk

Skype: info.byword

MSN: byword@live.com

香港

香港九龙弥敦道610,荷李活商业中心8层,813室

北京

北京市崇文区广渠门外忠实里南街甲6号远洋德邑A座2204室

新加坡

16 Jalan Kilang Timor, #02-06 Redhill Forum, Singapore 159308

其他人在看什么?

首页 分享博客 usability 你的网站压缩了吗?