WPO基础:减少HTTP请求

减少HTML文档的组件数量,也因此减少了HTTP请求的数量,从而节约了载入网页的时间。《高性能网站建设指南》中介绍到四种方法:

  • 使用图片地图
  • 采用CSS Sprites
  • 采用内联图片
  • 合并CSS样式表和JS脚本

对于网店尤其是Zen-Cart网店来说,最后一种方法是很有效的。因为Zen-Cart为了模块化和易读性考虑,将样式表和脚本分的很细,本来一个CSS文件搞掂的,可能会被划分成10个文件,并且分布在不同目录中。减少http请求的最快的方法,就是合并脚本和样式表,可以显著节省页面打开时间。

 

以Zen-Cart 1.39版本为例,下面是<head>区常见的一段代码

<link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_boxes.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_css_buttons.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_main.css” />

 

<link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_tm.css” />

<link rel=”stylesheet” type=”text/css” media=”print” href=”includes/templates/theme_name/css/print_stylesheet.css” />

上述形式如 stylesheet*.css的6个文件,完全可以统一成一个 stylesheet.css 文件。这样就减少了5次http查询。

 

下面我们对BuyOnMe.com 做了一个合并CSS样式表文件的实验。

 

网站首页共有四个可合并的CSS文件,前三个出现在<head>区,最后一个出现在网页中

<link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/style_jscroller.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/stylesheet.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/stylesheet_css_buttons.css” />……

 

<link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/buyonme_categories.css” />

 

时间瀑布图显示需要204ms打开前面三个CSS文件,然后需要额外的96ms打开最后一个css文件。

 

图6-29:CSS合并前的时间瀑布

 

 

我们进入 includes/templates/zj_orange/css/ 目录,将三个CSS文件合并为一个文件stylesheet_all.css。

 

网站首页在合并后只有一个的CSS文件stylesheet_all.css

<link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/stylesheet_all.css” />

 

时间瀑布图显示打开stylesheet_all.css也只需要200ms,而这是四个CSS文件的合体。

图6-30:CSS合并后的时间瀑布

 

我做了十几次测试,节省的时间从90ms到500ms,不过大多数都维持在100ms左右。 : ) 似乎在性能上,只节省了100ms,性能提升的比率并不大。而实际上浏览器和网络环境千差万别。在某些情况下,打开4个http请求,也就意味着有4次机会遇到网络不稳定、浏览器发神经或者其他莫名其妙的延迟因素。所以合并CSS减少http请求,好处大于坏处。

 

作者: 谭砚耘@用户体验与可用性设计-科研笔记

版权属于: 谭砚耘 (TOTHETOP至尚国际 )

版权所有。转载时必须以链接形式注明作者和原始出处

http://www.webusability.cn/reduce-http-request-howto-wpo-1300/

如果你希望与作者交流,请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠

 

 

你可能感兴趣的:(性能优化,http请求,WPO,wpo基础)