7月 142011
 

原则1 减少HTTP请求数

构造请求、等待响应需要时间,因此请求数量越少越好。减少请求的总体思路就是合并资源,减少显示一个页面需要的文件数。

1. Image Map

通过设置<img>标签的usemap属性与使用<map>标签可以在一幅图片上切分出多个区域,指向不同的链接。比起使用多幅图片分别构造链接减少了请求数。

2. CSS Sprite(CSS贴图整合/贴图拼合/贴图定位)

通过设置元素的background-position样式做到。一般用于界面图标。典型的可以参考TinyMCE编辑器上方的那些小按钮。多个小图实质是从一个统一的大图通过不同的偏移量裁剪而来,这样加载界面上的众多按钮实际上只要请求一次(请求大图一次),从而减少HTTP请求数。 Continue reading »

4月 262011
 

网站的访问速度和性能对用户体验来说是非常重要的。如果你的网站访问非常的慢,你不仅会失去用户,而且更可怕的是你会失去潜在的客户。像Google这样的互联网巨头也会把网站访问速度作为排名的一个参数。因此当你需要优化网站速度时,你需要考虑方方面面,每个毫秒。这里对改进网站性能提出一些基础和普遍的建议。

1、如果可能的话,延迟加载一些内容

可以使用Ajax来按需加载部分内容。比如一个相册,可以在用户浏览页面时先出缩略图,当用户点击了,然后异步请求原图并展示,这样用户如果只需要看几张图片,就不需要等待所有图片都加载下来。这种开发模式叫做延迟加载。 Continue reading »

3月 052011
 

有不少不喜歡網頁上有 Flash(尤其是那些動畫),所以 Firefox 上也有一個很出名的 add-on Flashblock。我個人也不喜歡網頁用上 Flash,但也不至於原教旨般的逢 Flash 必反 – 只要用得其所便可。

在我的印象中,香港政府的網站常有濫用 Flash 的情況,隨便在 Google 找一下,也找到五個值得批評的例子。

第五位

區議會
http://www.districtcouncils.gov.hk/front.html

我十分反對 Flash Intro Page ,但現在幾乎每個政府網站都有,也只好接受 – 至少它們還有一個 skip button。不過我要特別針對區議會以前用的這個 Flash Intro,不止是因為它很醜,最重要是它在 Firefox 中不懂得 resize,畫面小到字也看不到(在 1024×768 下就是上圖的樣子),其實就算到了 IE,那段轉簡體中文的文字也不清楚。 Continue reading »

11月 102010
 

2010-11-09 来源:网易科技 专栏作者 李黎

佐丹奴网上商城的总经理侯彤最近问我,“V+的客户与众不同,他们很挑剔,写的评论也很长,你知道原因是什么?”

其实佐丹奴在V+的生意很不错,上个月的销售额129万,超过了淘宝商城的旗舰店。今年佐丹奴也陆续进了卓越亚马逊、京东商城、当当等B2C平台,目前V+和京东商城的销售额在所有平台来说最高。不过,侯彤发现,V+的消费者和其他平台都不一样。

为什么?

我在围脖上问大家,各种回答都有:

“V+主要是女人用户居多,女人就喜欢评论神马的~~”

“数据表明喜欢写评论的人网络购物频次更频繁。”

“客户群体所致,V+的客户群是网络一代!习惯短信习惯聊天习惯帖子的一代。”

“因为京东、淘宝、Amazon和当当都是在卖货,而V+是在卖品牌货。用户对V+的认知不一样。”

…… ……

是的,都很有道理。围脖就是好,给了佐丹奴那么多有用的答案!我也绞尽脑汁想了想,觉得大概是这个样子的:

目前V+没有做大力推广,50%左右的用户是从VANCL过来的。那么我们来看VANCL的顾客——VANCL有60%以上购买都是来自于互联网上的推广,也就是说,VANCL的用户以网民居多。目前VANCL仍然有相当部分的购买来自于客户端,比如迅雷、QQ等,他们属于深度网民,对互联网应用极为熟悉。

网民的特点是什么?叽歪,喜欢在网上絮絮叨叨和闷骚。特别是互联网深度网民,也许他(她)在生活中看上去沉静如水,在网上却是个话篓子。当然,就如围脖里的网友所说,VANCL以女性用户居多,其上千万的注册用户里,55%都是女性。 Continue reading »

11月 282008
 

实用性/方便浏览

1 . 网站导航

你的网站导航要易于使用。你要确保新访问者能够通过你的网站导航简单方便并且快速的找到他所要的内容。

2 . 搜索框

如果你没有一个搜索框,我建议你最好加一个上去,导航有时是不够用的。加一个搜索可能要很久,但如果像我一样在网站上加入 google 搜索框这种第三方搜索框却是很快的。

3 . 点击这里

把你网站上所有的 “点击这里” 都改掉,访问者不会通过点击 “点击这里”来了解里面的内容,最好用 下载的盈利/亏损图 或 每个月的文章归档 等代替 “点击这里”。

4 . Title & Alt Attributes

如果你还没有使用它,最好现在就使用,并把它加入导航页等一切页面。这里还有一篇详细说明:Proper Use of ALT and TITLE Attributes 。 Continue reading »

9月 142008
 

Firefox下调试Div/ CSS网页的三大插件

Firefox 是什么就不用说了,地球上的站长都知道,他的浏览器市场占有率仅次于IE,尤其被各大小站长所喜爱。除了大家都熟知的标签显示,定制外观等许多功能外,被站长们喜欢的还有以下两个重要原因,一是Firefox是完全符合W3C标准的,而IE却自成体系,搞自己的一套,导致很多网页只能在IE 下浏览,可怜的站长们为了保证所有用户的正常浏览,不得不在开发时,在IE、Firefox中频繁切换,以求兼容;另一个原因是Firefox提供了大量的各种免费功能插件给用户,用户可以方便获得众多附加功能。

Firefox的插件实在是太多了,今天,我们只讲一下在进行网站的DIV/CSS设计与调试中所使用到的几个插件。 Continue reading »

6月 252008
 

  前言

  ”我的工资卡是交通银行的,但我经常在我家楼下的工商银行提款机上取款;
  我是上海人,我用普通话可以和广州的同学进行交流;
  今天水龙头坏了,我去水暖商店买了一个新的换上;
  我去法国旅游,通知我法国的朋友在北京时间15:30分来接我。”

  生活中每天都发生类似的事情,这样的事情似乎再正常不过的了,并没有什么特别之处。但是,你有没有想过:

  为什么所有银行卡的大小都是一样的尺寸?
  为什么我用普通话就能和广州同学交流?
  为什么买来的新水龙头的螺口正好与老的水管能接上?
  为什么法国朋友不会接错时间?

  对于日常的很多事情,我们并没有注意到这背后都有着一个隐藏的“因素”在起作用,这个因素就是:标准。

  有了“银行卡的标准”,你就不用担心不同银行的卡大小不一样,所有提款机的入卡口都一样;
  有了“普通话标准”,全国人民可以方便的进行语言交流;
  有了“螺口的工业标准”,你买个6分的水龙头就绝对可以可6分的水管接上;
  有了“格林威治标准时间”,全世界的人们都不会接错班机时间。

  生活中各行各业都有着自己相应的标准与规范,标准可以方便交流、促进协作、提高效率。

  对于IT行业,设备的多样性与信息的多样性更加需要标准来保证它们之间的沟通与协作。我们可能在手机、打印机、数码相机之间交数据;我们可能在网站、邮件和办公软件之间传递信息;我们可能要在未来新设备(例如机顶盒、信息家电)中应用现有资源。如果没有统一的标准,那么现在所有的信息都是孤立的、不可分享、不可重用的;我们需要浪费大量的人力物力重新为新设备建立数据;我们需要为每一次的多系统应用做专门的开发。

  好在我们已经找到了解决的方案,这就是—XML。

  XML简单说就是一种“有规定格式的文档”,只要我们的设备或系统产生的数据都遵守这种格式,就可以实现互相的数据交换、分享与协作。

  自从1998年国际万维网组织(W3C.org)推出XML 1.0规范以来,已经有大量的XML标准在我们的生活中应用,例如我们用手机订阅的天气预报、股票行情,这些数据都是从相应的系统获得然后通过XML格式转换发送给你的;我们通过QQ或者MSN上发送消息到不在线的朋友手机上,这其中的信息也是通过XML转换实现的;还有更多的商业应用,例如公司内部的 CRM、ERP、内容管理系统之间的数据交互、整合与共享都应用了XML。 Continue reading »

6月 192008
 

  互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃。其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题。加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化。这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧。

  一、优化图片

  几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。

  即使在现在,网络带宽有了很多的提高,56K猫逐渐淡出,优化图片以加快网页速度还是很有必要的。

  优化图片包括减少图片数、降低图像质量、使用恰当的格式。 Continue reading »