很多工具都可以生成瀑布图，给WPO工作带来很多便利。例如： 1. 在Firefox或Chrome下使用Firebug 2. 在Firefox或Chrome下使用谷歌推荐的Page Speed 3. 使用Gtmetrix网站生成瀑布图 4. 使用Webpagetest网站生成瀑布图 在使用瀑布图的时候，也不能迷信。如果你将上面四种工具生成的瀑布图对比一下，你就会发现，四种方法同一个网站同一时间的瀑布图，相差还蛮大。 因为不同的浏览器版本、测试环境、甚至测试工具，都会对瀑布图产生影响。 比如， Firebug和Page Speed是火狐和谷歌浏览器插件，你在什么浏览器下运行，就会得到相应浏览器对应的瀑布图。 Gtmetrix 的瀑布图结果应该是火狐或者谷歌，而不是IE的结果，这点从网站下方的合作方的图标可以看出来： 笔者在Gtmetrix测试结果页面，发现下面文字。 Test Server Region: Vancouver, Canada Using: Firefox 3.6.16, Page Speed 1.10.2, YSlow 2.1.0 说明测试地点在加拿大温哥华，浏览器是Firefox3.6 而Webpagetest可以提供不同浏览器下的瀑布图。更方便我们观察。下面是IE6 IE8 Firefox3.6 Chrome四种浏览器在webpagetest下的瀑布图。 下面我们用webpagetest举一个例子，可以看到在不同浏览器下，瀑布图会有很大的差异。 测试站点是凤凰网（www.ifeng.com），这个网站的页面组件不复杂，就一个外部JS脚本，其他的都是页面内引用的图片、样式等。 IE6 — 这是个马上被淘汰的浏览器，JS脚本阻塞非常明显。脚本执行过程中，其他的组件都无法进行。 IE8 — IE8 已经允许脚本和样式表并行下载，但似乎还不包括图片。在本例因为没有css脚本，所以不明显。（参见Steve相关文章） Firefox3.6 — Firefox已经比IE8表现更好了，脚本和图片已经可以并行下载了。 [...]
关于WPO监测：说说瀑布图
十二 11
对于不大的网站，WPO中重要的一部分就是图片优化。 把过大的图片压缩得更小一些，用Photoshop有点大才小用。有一个绿色软件 jpgCompress.exe，很小巧，但很好用。 特点如下： 1. 绿色软件 2. 可以批量操作 3. 支持按照比例压缩，直接拖动滚动条，就可以直观的看到压缩后的大小和图片效果。 4. 支持图片缩放 其实最大的特点还是小巧，一个不到1兆的文件，可以轻松满足压缩图片的各种要求。 下载地址：右键另存 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/a-useful-tools-for-wpo-jpg-compress-154/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
来自 http://www.stevesouders.com/blog/2011/11/17/add-your-site-custom-fonts/ HTTP Archive网址：http://www.httparchive.org/ 原文翻译 我们的目标是要爬完世界上最靠前的一百万个url（tyy注：应该是根据Alexe排名确定的）。这个月我们数量增加了一倍，从1.7万个增加到了3.5万个URL。虽然还差得远，但我们在持续进步。如果你的网站不在前100万，你想不想添加到 HTTP Archive呢？ 现在你可以添加你的网站到HTTP Archive。如果你的网站已经被收录，提交后会有信息提醒。如果没有被收录，我们会稍后派出蜘蛛爬行。我们会对提交的URL进行审核确保有效。每个网站只爬行一个页面。我们会尽量爬行主页面，而不是里面的内页。 如果长期关注Steve Souders的博客，会留意到HTTP Archive网站的持续变化。这个网站很有意思，可以让你看到世界网站的综合变化趋势。你也可以看到具体某个网站的首页变化情况，以及WPO的重要信息，比如下面是不同时期劳力士网站的页面打开时间状态： 下图：一个月前劳力士网站首页打开时间状态：耗时3.2秒 下图：3天前前劳力士网站首页打开时间状态：耗时2.5秒（有进步） 下图：一个月前劳力士网站首页瀑布图 http Archive提供不同时期网页WPO各项数据，除了提供汇总数据和趋势外，还可以对某个特定网站的数据进行跟踪观测。 目前你可以可以添加自己的网站到HTTP Archive数据库中，但如果你的网站在3.5万名以外，你暂时是看不到上述的分析图表的。 不过对研究WPO的人来说，这里已经提供了很多有用的东西供研究了。 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/you-can-add-website-in-httparchive-by-yourself-345/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
LightintheBox lightinthebox在SEO方面公认的国内翘楚，其robots.txt文件很长，只能截取一部分。屏蔽了部分缓存及用户隐私页面。屏蔽了几乎所有的国内的搜索引擎以及一些无用的比价网站的蜘蛛，同时用了Sitemap:URL 语句来强调网站地图。 Dealextreme Dealextreme屏蔽了国内的三大蜘蛛，搜搜、搜狗和有道，没有屏蔽百度。屏蔽了用户隐私文件及一部分功能性文件。 Newegg Newegg接纳所有蜘蛛，屏蔽了用户隐私文件，并且有Sitemap: URL 地图定义。 Amazon Amazon是所有B2C里面WPO和用户体验最好的。除了屏蔽部分隐私或干扰重点内容的目录外，还专门针对google蜘蛛进行了定义。最后同样有网站地图。 综合结论： 1. robots.txt文件能管理蜘蛛爬行规则，对于页面种类比较多的B2C网站意义重大。 2. 为了防止页面不可预知的安全性泄露问题（如google将用户信息放到搜索结果中），B2C网站通常将用户隐私有关的部分屏蔽。 3. 可以通过SEO屏蔽不重要页面，从而改善SEO的目录权重结构，弱化次要页面，取消可能高度重复的内容。 4. 通过sitemap能够定义网络地图的URL，虽然这并不是必要的，但对地图一定会起到强调的作用。相反的思路，如果你不想强调某个地图，也可以在robots.txt中删除地图URL。 5. 英文网站通常会屏蔽中国的蜘蛛，如baiduspider或sosospider 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/see-seo-wpo-thinking-via-4-b2c-website-robots-file-337/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
在《一小段js代码引发的网站可用性灾难–WPO优化反面实例》中，我们提到，“在线聊天”的JS代码下载如果出了状况，会影响到后续的页面组件加载，从而造成可用性巨大灾难。 new update 2012-1-9: 时代在发展，浏览器也在发展，JS阻塞仍然会发生，但情况已经得到改善。js下载阻塞已经有了好转，在firefox 3.6和google chrome 4.0以上版本，js代码可以和js代码、CSS样式单文件、图片并行下载；IE8下，js代码可以和js代码、CSS样式单并行下载，但无法和图片并行下载。不过JS脚本执行过程仍然会发生阻塞。但js执行阻塞仍然存在。 今天再来一个更形象的例子，而且更有代表性。 很多的网站都加载了Google Analytics（简称GA） 代码，不少外贸网站添加了Google Translate （简称GT）代码。还有一些注重社会化营销的，会添加Facebook或Twitter的JS代码。 如果GA或GT在某个时间突然被墙了，会给你的网站带来什么样的杯具呢？我们看看下面六幅视频截图（图片左边是正常打开网页，简称正常态；右边是被墙了之后的打开网页，简称墙态）。 0秒：正常态和墙态都一样，什么都没有 3.1秒：正常态的页面顶部和目录区已经载入；墙态只载入了顶部，因为GT被墙了，正在等待。 5.2秒：正常态已经基本加载完毕，呈现给用户的是可使用的网页；墙态还在等GT，等等等……等不到…… 7.3秒：正常态的各组件彻底加载完成；墙态还在等GT，等等等……等不到…… 25.7秒：正常态加载完，没变化；墙态终于等到了——GT超时信号，开始加载网页其他组件， 这个时候黄花菜可能都凉了。不过GT超时了，GA还没有超时，还要继续等待大约20秒。不过幸运的是，GA的代码放在页面底部，所以这个等待已经不影响用户使用了。 46.3秒：正常态加载完，没变化；墙态终于等到了——GA超时信号，苦难终于结束了。 幸运的是，好长一段时间GA和GT还都正常，但世事难料，谁知道哪天墙来了，那么对于你的网站而言就无疑是一个灾难了——用户需要25秒才能勉强打开一个首页。所以未雨绸缪，总是好的。 解决方法： 1. 将外部站点的JS代码放到页面底部。这样页面虽然没有加载完成，至少用户能看到大部分内容。 2. 如果无法做到第一点，用异步加载（或Ajax）来载入外部站点的JS代码。 3. 如果上述两点都做不到，那就经常保持警惕，随时留意“墙来了”马上取消JS。 另外，上述视频地址：http://www.webpagetest.org/video/view.php?id=111204_f99d8ca8263aeb4b652d1b7e53116b38fa14ae6b 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/wpo-experiment-what-happened-when-google-is-blocked-by-firewall-353/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
做过WPO前端优化的人都了解什么叫JS阻塞：就是当浏览器下载外部引用的javascript代码的时候，会停止其他组件的下载和渲染（或内容呈现）。原因可以参见网上这篇关于外部js阻塞的详细介绍 new update 2012-1-9: 时代在发展，浏览器也在发展，JS阻塞仍然会发生，但情况已经得到改善。js下载阻塞已经有了好转，在firefox 3.6和google chrome 4.0以上版本，js代码可以和js代码、CSS样式单文件、图片并行下载；IE8下，js代码可以和js代码、CSS样式单并行下载，但无法和图片并行下载。不过JS脚本执行过程仍然会发生阻塞。但js执行阻塞仍然存在。 在大多数外贸B2C网站中，都可以看到“即时聊天 Live Chat”工具这个工具方便网站访客直接和客服人员沟通，第一时间激发出用户需求。网上也有免费的livechat工具。最近笔者留意的一个网站发生了“livechat的JS阻塞引发的网站可用性灾难”，现在简略介绍一下具体情况。 下图是livechat所在的位置 下图是这个网站的瀑布图。红色框框的部分是livechat的js代码加载。 可以看到网站加载没多久，livechat代码开始启动，livechat还没有加载完成之前，其他的所有组件都必须排队等着，啥都不能干。这个过程大概持续了453毫秒 453毫秒虽然不快，但还可以忍受。但在三天前，提供livechat服务的第三方服务器出了故障，导致运行上述两个组件需要等待30秒甚至更长，这就造成了大麻烦。整个玩站只能载入导航栏上面的部分，下面都是一篇空白，因为所有的其他组件都被livechat阻塞了。 灾难发生当天的营业额只有平时的1/3，用户平均页面浏览量跌去70%。 解决方法： 1. 尝试将livechat的js代码转移到页面最下方，但无法成功，因为livechat构建时就需要在前边调用，否则页面出错。 2. 采用异步调用的方式载入外域JS组件。 3. 关闭livechat，一切恢复正常。 反思： 使用外部调用的插件，要小心。我们经常会用到Google Analytics 或者Google Translate代码，这些服务因为是Google提供服务的，出故障的机会很小，载入时间也很快。但如果是国内用户调用GA或GT代码，可能因为伟大的WALL的原因，导致服务不稳定，从而影响网站性能表现。 有些国内的网站使用的是TQ，服务器在北京，如果你的主要用户在南方，同样会遇到速度慢得问题。 至于一些小服务商提供的插件，就尽量别用啦。 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 及 创思集团 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/js-jamming-cause-web-usability-disaster-wpo-problem-241/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
看到一篇新闻：《2011年11月 Chrome全球市场份额跃居第二 首次超过火狐》，顺便瞅瞅监测中的一个外贸网站的数据。 BuyOnMe.com 网站现在（2011年11月底）的浏览器访问统计 BuyOnMe.com 网站现在（2010年11月底）的浏览器访问统计 笔者点评：Chrome增长快，对笔者不是什么新闻。笔者监测的B2C网站数据（针对的主要是欧美用户）已经看到谷歌浏览器的飞速增长。从B2C来看，Firefox占32%，比之前28%略有上升，而Chrome从一年前的17%提升到28%，主要都是抢了IE的份额。IE现在只剩下区区25%，而一年前则是41%。 BuyOnMe.com 网站现在（2011年11月底）IE用户版本分析 BuyOnMe.com 网站现在（2010年11月底）IE用户版本分析 IE用户中的IE6的比例，从一年前的20%直线下跌到2.2%。请注意，一年前是41%中的20%，而现在则是25%中的2.2%，也就是实际只有约0.5%的用户仍在使用IE6，而且我怀疑其中相当一部分还是来自于中国。 所以可以判断，对于外贸B2C网站来说，浏览器兼容性设计，基本可以忽略IE6了。不过，如果你是内贸网站，还是要考虑IE6的，因为目前全世界IE6占比最高的国度应该是中国，这要归功于遨游、360和搜狗浏览器的普及。 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 及 创思集团 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/compatible-for-which-browser-user-experience-design-web-usability-317/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
IT经理或项目经理可能都会遇到这个问题，某个特别优秀的程序员或者是项目中的主力程序员，太有性格了，经常和你发出不同的声音。尤其是写代码不牛（网上有很多类似争论，项目经理要不要会写代码）的项目经理，可能还会被明星欺负。 怎么解决这种困扰呢？ 首先，良好心态。 我很欣赏王蒙写的一篇短文《安详》，这篇短文是王蒙写给自己看的，但对每一个人都满适合。里面有一句说到：“安详属于强者，骄躁流露幼稚。安详属于智者，气急败坏显的可笑。安详属于信心，大吵大闹暴露了其实没有多少底气”。这句话说得很好。IT经理首先要具备的心态，就是安宁、平静、沉着有定。 有时候沟通就像登天一样难，但如果心态好，爬楼梯还是能看到美丽风景的。 如果你尊重你的程序员，如非得已，尽量不要采用冲锋式的开放方法。鼓励激情对于销售团队也许有用，但对于程序员，更多的应该Leading Quietly。当你见到明星程序员高声说话的时候，不要先入为主认为他在挑衅你的管理权威。回避正面冲突，然后单独思考一下几个问题： a. 他是在找茬还是在反应问题？ b. 我觉得不舒服，是否仅仅是因为他音调偏高？或是他当众表达相反观点？ c. 他是否代表了其他程序员的想法？其他人没有出声是否仅仅因为自己不是明星，不敢出声？ d. 我以前是否和他沟通的不足够？ 多数情况下，问了上述问题后，你会发现事情没有自己想得那么糟糕。抱着“安详”的心态，世界本身会发生改变。 第二，把不同的声音控制在例会中。 当面对质疑的声音的时候，多数人选择了辩论。用语言取胜，得到的结果经常不太理想，虽然短暂压制了反对声音，可能会给下一次反弹积压更大的能量。 所以，我们需要聆听，聆听不同的声音，或者说是给不同声音一个渲泄的出口。 我的建议是：让不同的声音在例会中充分表达，但仅限于此。 传统开发多数的例会，在检讨进度、需求分析、任务调整，也会让大家表达意见。表达意见的环节往往走过场，不同的看法往往在会上就马上被压制。而笔者是鼓励敏捷开发的，大多数需求分析、任务调整的工作，已经面对面和程序员沟通了。在敏捷开发的例会中，花费更多时间在反映问题，提出观点，通常是不同的声音。如果你只有一个明星程序员，这个时候发声的往往只有一个人。如果建立了这种允许不同观点的分为，更多的人愿意表达。而你会发现很多合理的反面意见，不仅仅是明星程序的想法，也是大多数程序员的想法。 大庭广众的反对声音会显得更加刺耳，而私下交流的反对声音会显得更加柔和。例会提供了一个公开发表反对声音的场合，让大家习惯在这个场合发言，而且提倡发言不针对个人。这提供了一个机会，让你可以在会议后思考，或者是与发言人单独沟通的机会。 这种例会很有效，关键在于例会的组织者需要有包容百川的心胸，同时领导力也是不可或缺的。大多数人认为合理的做法，不一定是正确的做法，或者不一定是最适合目前情况的做法。有领导力的IT经理或项目经理，在接纳不同声音的同时，也应该取得团队大多数人的理解，让大家明白为什么要走一条更艰难的路。坦诚的沟通，让每个程序员都明白公司的目标、团队的目标、你的目标，当然还有你的痛苦，都不妨在例会上分享。 这样，用强制或引导式的做法，将不同的声音限制在例会中，而不是日常工作沟通中。 第三，用目标控制。 敏捷开发有的时候被认为是目标散乱的，实际上并非如此。敏捷开发的最重要目标就是：满足用户多变的需求，说白了就是最大程度的让客户满意。这一目标，要时时刻刻灌输给自己的团队。做成一件事有n种方法，只有最大程度满足用户需求的那几种方法，才是考虑范围。 这样的原则如果让每个程序员都接纳，不太可能，但至少要让大部分人认同，从而变成团队的目标。 一个明星程序员，有的时候耍大牌，只要不触及“用户满意度”这条红线，都不是大问题。但如果他的任性行为会影响到项目的发展，进而给用户造成不利，那么就需要沟通（比如通过上面的例会模式），面谈等方式来解决。 第四，平衡的力量。 如果你发现明星程序员，是对人不对事的，是危害到项目发展的，而且你做出了努力无法改变的。那就要采取行动了： a. 减少明星程序员在项目中的重要性：包括缩减工作量，负责更少的模块开发 b. 尽量安排比较独立的项目，减少和其他人员的沟通 c. 招聘或内部培养同等能力的替代人员 d. 功能类似的两个模块，可以考虑两个人并行开发，鼓励一定程度的内部竞争和比较 在笔者的项目经历中，明星程序员更多是有性格的程序员，理解、包容和沟通，都能使绝大多数问题得到解决。 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 及 创思集团 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/it-manager-4th-agony-in-small-company-big-project-how-to-treat-star-programmer-246/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
在前面文章中有提到 《对照“BlueDavy的网站架构演变”说说外贸B2C网站实际应用》提到，比较大的China-Based 外贸B2C网站，一天的访客数量大约是10～100万。 有位iteye的朋友询问：10万是独立IP？ 否则光算pageview还是挺小的。 实际上，10万只是指普通访客的IP，没有包括各种搜索蜘蛛的访问，搜索蜘蛛的访问频率很高，往往是数倍、甚至数十倍于访客IP数。为什么？因为外贸B2C网站和其他网站有些不同，网站做了很多动态转静态的搜索优化。一个有3万产品的B2C，页面总数量可能达到100万，包括： 1. 产品页面3万个 2. 产品列表分页，10～20万个（分页规则可以按照产品名、产品价格、产品上架时间，分别升序降序排列，还可以按照每页显示产品的数量不同而变成不同的URL），总之都是为了搜索优化充页面。 3. 用户评论，5~10万 4. 论坛：1～10万 5. 站内搜索生成的URL：起码50万 ———————————————————— 合计：大约100万个页面，这还没有计算专门为了排名而做的SEO爆炸式增长页面。页面数量一多，蜘蛛来的就勤快，来的勤快了，就对服务器造成负担，而且还不小。 对于一些外贸B2C网站，可能会发现，做了WPO优化之后，开始的时候网页打开速度挺快，后来突然 ——服务器变慢了！（下面就是一个实际网站的例子） 看看谁在访问，如下图： 这是一个很有意思的现象。大家可以看看前面的例子：《WPO网站性能优化对搜索引擎蜘蛛行为的影响》提到，网页打开速度快了一倍，Google蜘蛛访问的页面数和页面容量，增加了7倍。 原来Google的蜘蛛一天只来3万次，也就是3秒钟一次，现在Google蜘蛛要达到21万次，也就是一秒钟接近3次。可能这个网站的真正用户只有5000人/天，但增加了Google蜘蛛的访问之后，就变成了21.5万次/日。如果再算上Bing的蜘蛛，Yahoo蜘蛛，Yandex蜘蛛以及各种比价网站的蜘蛛，访问数量可能达到50万次了。 这只是一个用户每天访问5000次的小网站，加上蜘蛛的访问就可能达到50万次。如果是一个用户每天访问10万次的网站，加上蜘蛛的访问，翻个5倍到10倍不出奇。这种现象出现在新闻网站、论坛网站的机会不大，但出现在B2C网站的机会很大。为什么？是因为B2C网站大多数做了很多SEO优化，网站的URL很多，一旦增加了新产品，每个URL显示的内容都会变化，蜘蛛都会当作页面已经更新，然后重新爬行一次。 那么该如何处理呢？实际上Google的蜘蛛是相对比较勤劳的，我们可以通过webmaster工具，来限制Google蜘蛛的爬行速度 我们可以看到上图的google蜘蛛爬行速度达到1.75个页面/秒，可以将之调低为0.5个页面/秒，相当于降速200%，后端性能会得到一些改善。爬行设置变更后，google每天大约拿4万个页面，也差不多了。 第二种解决方法是：在sitemap中，删掉可能消耗资源的地图。 sitemap不是提交的越多越好。如果太多了，google就分不清主次，让蜘蛛爬个遍。 一些不重要的页面，与其通过提交sitemap让google蜘蛛段时间内全都爬行，实际上对排名没有帮助，反而降低了重要页面（B2C网站中就是产品页）的权重。 所以坚决删掉不重要的sitemap，如下图： 第三种方法：屏蔽那些没用的蜘蛛 下面是某B2C电子商务网站robots.txt的屏蔽内容 如上图，屏蔽掉大量国内的蜘蛛包括百度。还可以考虑屏蔽掉一些国外不知名的小蜘蛛。 还有就是一些比价网站，经常有蜘蛛专门爬行B2C网站，如果你通过GA发现这些比价网站过来的访问ROI很低的话，干脆屏蔽了。 第四种解决方法：后端优化，参见 《对照“BlueDavy的网站架构演变”说说外贸B2C网站实际应用》 以及BlueDavy的原文。 以上是一点外贸B2C在蜘蛛量大增的一些性能优化总结，也应该算WPO的一方面。 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/another-wpo-problem-spider-crawling-cause-server-burden-297/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
SEO探讨: 合理增加网站静态页面数量的方法
十一 30
做过SEO的人都知道，一个网站的页面数量对于排名很重要。 通常静态页面多的网站，排名好一些。这容易理解，静态页面多通常意味着网站比较大。两个网站，一个有10000个静态页面，一个有10个静态页面，哪个网站是大站、哪个应该排前面，不言自明。 增加页面有很多不恰当的方法，比如： 1. 用采集程序+伪原创工具，从其他网站导入新闻或者文章 2. 用工具生成大量的关键词桥页面 上面的两种方式，黑帽迹象很明显，容易造成重复内容，或者关键词堆砌，对用户也是无意义的内容。 也有一些方法，属于灰色或白色，生成的页面对用户也有用，在这里结合案例做一下介绍： 例子一：翻译网站利用查询结果生成页面 翻译网 DICT.CN 页面地址：http://dict.cn/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96 用这种方法生成的页面几乎是无穷的，因为查询一次，就生成一个页面。而且这些生成的页面，对用户是有帮助的。 例子二：外贸网站利用产品关键词tags列表和tags搜索结果生成页面 外贸B2C网站 BuyOnMe 关键词tags列表：http://www.buyonme.com/find_hot.html tags搜索结果生成页面：http://www.buyonme.com/buy-what/A-003.html 对于Buyonme这样拥有8万以上产品的网站，产品关键词的tags，大约有120万个，也就贡献了120万个页面。 例子三：产品比价网站利用论坛增加页面 比价网站亿赐客论坛 这个网站是ZAC在《SEO实战密码》中提到的案例，对于论坛没有多说。我记得在书刚刚出版的时候看这个网站的百度收录情况，论坛的页面占了很大比重。当时的论坛里面的内容，似乎是直接从淘宝论坛直接拷贝进来的，还有很多淘宝的字眼在里面。这种照搬内容的方式，笔者是不赞同的。但如果亿赐客论坛的用户比较多而且活跃，用户的发言本身就是良好的内容。其实还有一个更好的例子 Dealextreme网站，论坛和用户评价是两个主栏目，里面有很多用户的使用感受以及对产品的讨论。 例子四：兰亭集势利用产品配对对比生成页面 产品配对页面 这样的产品对比页面，兰亭网站中每天会有几十到几百个。用户可能会觉得新奇，而且增加了有效的静态页面，而且这些页面还是处于每天更新状态的。这都是应用搜索引擎的良好例子。 例子五：产品网站利用目录和翻页生成页面 suntekstore的目录页面：http://www.suntekstore.com/category-361-b0-min0-max0-attr0-2-sort_order-ASC.html 上面的页面，实际上是产品列表页面的翻页页面。 这样的页面URL原本类似：www.suntekstore.com/cell-phone-cell-phones-c-16_42.html?page=2&disp_order=999 不仅如此，产品不同的排序方式，URL也有不同，那么又可以扩充几倍的页面。当然，这有一个前提，就是你的产品数量要足够多。 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/howto-seo-pages-explosive-growth-rapidly-143/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠 [...]
牛和他的壁画创作
十一 29
这是饭厅一片雪白的墙，我转过头在电脑上打字，回头已经看到他的壁画完成了。 于是拍照留念。顺便说一下，牛的艺术品的名字《七人山和开关》
SEO方法 – 去除B2C网站页面底部的链接噪音
十一 29
很多外贸B2C网站，页面底部有一大堆链接，包括 关于我们 联系我们 代理合作 … 注册 登录 购物车 付款 … 货运条款 退货原则 付款方式 批发合作 私隐保护 … 一般的B2C网站都有数万个产品页面，每个页面都含有上述链接，很容易让搜索引擎判断失误，把这些链接当成是重要链接。 BuyOnMe的底部 京东商城的底部 这里就有一个链接结构和权重分配的问题。解决思路都是一样的，就是降低或者取消这些链接的权重。 几种方法： 1. 用 nofollow 标签 诸如 <a href=”URL” rel=”nofollow” >不重要的链接</a>，起码google和百度都是认nofollow的。根据zac以前提到的，据研究：nofollow虽然不会给目标链接带来权重，但还是会占据原来页面的权重。就比如，页面原来有10个完全平级普通链接，链接总权重10分，每个链接分配1分；如果我们将其中一个链接添加Nofollow，那么剩下9个还是每个一分，添加nofollow的则一分都没有了。 当然上面的只是大家对搜索引擎的猜测。经常我们说SEO是伪技术，很多就是这个原因，所有的人都只是猜猜猜，因为百度和谷歌不是SEOer自己家开的小店，你永远不知道对方的规则什么时候调整。我相信既然nofollow被百度和谷歌所采用，肯定会对添加nofollow标签的内容加以区别。因为nofollow不像<,meta name=keywords>标签可以很容易被滥用。一个人在自己网站里面添加了nofollow，更多的是告诉搜索引擎：这个链接不重要，别重视它，不会误导搜索引擎，所以搜索引擎没有理由不尊重nofollow标签的含义。 2. 用js代码 实际上搜索引擎对JS代码的穿透力很强，除非你刻意将JS写得很复杂，否则Google和百度都是能找到的。 这就提供了一种又能避免普通链接分权重，又不用担心搜索引擎进不去的方法。 比如可以用 windows.open (“”) 或者其他js代码来打开一个窗口。Buyonme网站就是用这种模式+nofollow模式实现的。 3. 用iframe的方法 因为可能会引起蜘蛛爬行的混乱，以及在不同平台浏览器下的现实效果差异，所以不太推荐这种方法。 4. 用Ajax控制隐藏和显示 上面是 amazon.cn 亚马逊中国的例子。在每个产品下面，都有大量的用户评论和相关论坛话题，包含很多链接。这些内容，对搜索引擎来说，会分散产品页的主题，但对用户又不能不显示。所以amazon采用了很巧妙的方法，利用ajax技术，当下拉条移动到最下方的时候，才显示出来，否则就不显示。类似的例子，在京东商城中也见到了。 在笔者最常接触的外贸B2C网站（china-based）内，好像还没有印象见到这种做法，包括newegg。 [...]
外贸B2C可用性分析：四种购物车的展示方法
十一 29
Amazon 购买产品之前 购买产品之后 笔者观点：Amazon在可用性方面无疑是最优秀的。购物车明显，摆放位置合理。比较人性化的设计是，将购物的数量放在小车里，很直观。我曾经尝试采购10个产品和100个产品，购物小车的宽度会自动变换，这些细节都决定了amazon的成功（如果单纯以盈利速度判断，amazon和中国的外贸B2C比较，可能不算啥）。 Dealextreme 购买产品之前 购买产品之后 笔者观点：Dealextreme的购物车显示设计，让人不敢恭维。没有图标，而且放在一堆文字中间。会给用户造成困扰。我们常常见到优秀的网站在某些细节用户体验很糟糕，这就是一个例子。根据Steve Krug的《Don’t Make Me Think》的理论，用户来到网站不是在“看文字”，而是在“扫描”，如果购物车是一个重要的元素，就应该在让用户能够扫描到。目前的做法显然是做不到这一点。 LightintheBox 购买产品之前 购买产品之后 笔者观点：虽然不如Amazon那么完美，但中规中矩，没有什么问题。 SuntekStore 购买产品之前 购买产品之后 笔者观点：购物车显示本身没有什么问题，但问题出在点击 Add To Cart之后的页面反应——什么反应也没有！ 当用户来到产品页面，点击了 Add to Cart之后，除了显示“My Cart 1 item”之外，整个页面没有任何变化，我相信大多数用户都很难留意到0 item变成了1 item，所以用户会很迷惑，以为自己的点击是无效的，从而产生沮丧感。这是个可用性方面满严重的bug。 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/web-usability-how-to-show-shopping-cart-in-b2c-website-159/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
网店WPO基础工作：制定性能优化目标
十一 28
好了，对于性能优化的必要性，我想大家已经没有什么争议了。那还不动手？ ：）动手之前，我们先得做些准备工作，第一步就是：制定性能优化目标 按照Jakob Nielsen的理论，我们是否可以得出下面的性能优化目标？ 目标A 网店页面的访问和互动的等待时间，应该在0.1～1秒以内； 目标B 网店少数页面载入时间稍长，也必须控制在1～10秒以内; 目标C 网店尽量不要出现让访客等待10秒以上的页面或者互动 实际上，目标A很难做到。应该说目前绝大多数网店，都做不到这一点。最主要的原因是网络速度瓶颈！即使是像www.google.com或者www.yahoo.com www.facebook.com 这样的性能优化水平登峰造极的站点，当他们邂逅缓慢而且高墙林立的中国互联网之后，访客速度感受很差，有些网站甚至无法打开。有些Zen-Cart网店主，服务器选择在国外，主要客户也在国外，情况会好些，但实际网络环境千差万别，也很难保证大多数网页的打开时间在0.1～1秒内。还有一个影响ABC目标顺利实现的因素，就是浏览器因素。谷歌浏览器和IE8浏览器在部分脚本上的执行效率可以超越IE6内核浏览器10倍，这一点会影响到很多网店的表现。所以性能优化目标应该考虑到不同的浏览器版本。 基于以上考虑，我们重新调整上面的三个目标，如下： 修正后的目标A 网店页面大多数的访问和互动的等待时间，在1～4秒以内； 修正后的目标B 网店少数页面载入时间稍长，也必须控制在4～10秒以内 修正后的目标C 载入时间超过10秒的页面，在无法避免的情况下，需要改善浏览体验，降低访客烦躁度。 目标C的情形，在网店付款中经常遇到，比如用户完成购物流程，确认订单并且点击付款按钮后，网站会将用户导向到网上银行或PayPal网页，这一步可能会超越10秒。为了防止用户丧失耐心停止付款，我们通常会在这个页面添加一段诸如“请您耐心等待多几秒…”或者一个动画logo，让用户看着没有那么闷。 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 ） 版权所有。转载时必须以链接形式注明作者和原始出处 http://www.webusability.cn/basic-work-of-wpo-set-your-wpo-target-220/ 如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
激励与奖励，一直都是团队领导面对的大课题。而IT经理面对的是一群苦逼的程序员。网上调侃程序员的例子多不胜数，比如经典的《程序员和妓女》。 不少人印象中，程序员是蓬乱头发、因加班而睡眠不足的表情，还有不少人觉得程序员代表着高智商。实际上，除了程序员这一工种的智商水平和其他工种没有特别差异，在良好的规划下，程序员也完全可以规律的工作。甚至，良好的管理可以让程序员从“苦逼”变成“酷毙”。 IT经理应该本着尊重和换位思考的态度，来面对自己的开发团队： 1. 告诉你的程序员：他们在做着一项重要的工作！ 这一点很重要。我们通常会告诉程序员， 这个项目很紧急…… 这个功能很重要…… 必须在deadline之前完工…… 但却很少人告诉程序员， 这个项目对公司的意义…… 这个客户对公司很重要…… 他做的这一部分是整个项目的核心环节…… 给员工分配一项关键的任务，代表着你对员工的尊重，这是一条颠扑不破的真理，包括对待程序员。 我们经常错误的认为程序员是有自我实现的动力的，他们完成了一段代码，就会自然而然的获得满足。实际上这是不够的，他们不仅仅需要完成代码的编写，也期望公司能够告诉他们这段代码对公司的意义。 2. 把适合的工作交给适合的程序员，并且告诉他：你信任他。 信任感是每个人都需要的。不同的程序员能力有区别，有高低的区别，也有能力适用范围的区别。合理安排不同能力的人做适合的工作，并且肯定的告诉他，这项工作适合他，而且只有他能最棒的完成，这样的激励措施是很有效的。 举个例子，有个程序员在独立完成客户项目的时候，总是被其他部门的人投诉，说他干活毛糙而且态度不好。实际上大家没有发现他的重要优点，就是工作速度特别快，工作非常投入。这个程序员和别人沟通总是不畅顺，原因则是因为他讲话没技巧，嗓门大。 那么他的确不适合做一些需要马上提供成果给客户的项目，也不适合进行跨部门沟通。但一些内部应用工具，短小精悍的内部项目。工作调整后，他沟通的人减少了，但工作成果增加了。其他部门的同事获益于他的工作成果，夸他的人也多了。 3. 工作的时候，别总是走到程序员背后 如果一定订好了进度和计划，就不要习惯性的走到背后干扰你的程序员。尽管有的时候你是好意，走到背后也许只是说：“嗨，今天天气不错”。但这的确就是一种干扰。 有啥话，在计划会上说，在总结会上说，哪怕在会议上聊聊私生活活跃一下气氛，也是不坏的。 总之，不要为了展示你的魅力或你的权力，而去打扰一位忙碌的程序员。 4. 经常总结成果，经常说谢谢 在例会或总结会上，除了督促进度外，要花更多的时间来总结成果，并且对这段时间表现优异的人或事说“谢谢”。 绝大多数员工，都希望看到自己的努力带来了改变。程序员也希望看到自己的代码变成实实在在的效益或效果，尽管往往软件正常运作后都看不到程序员的影子。 IT经理要理解这种心理，要善于发现平凡代码中的闪光点： 我看到这个功能用了最新的技术，很棒…… 总经理查看了进度，对xxx的工作很满意…… 我们的客户看了演示版本，称赞了公司…… 销售人员用了改进的版本，业绩提升了10%…… 5. 给予合适的酬劳和令人舒适的工作环境 酬劳的问题和公司、市场有关，往往不是IT经理能决定的。但舒适的工作环境则是IT经理可以协助创造的，比如适当的弹性工作时间，在请假方面的人性化，电脑配置，适当的户外集体活动等等。 如果IT经理关注了上面5个问题，你会发现程序员在士气方面会得到不同程度的改善。那样，你的工作也就好做多了。 经理关注了上面5个问题，你会发现程序员在士气方面会得到不同程度的改善。那样，你的工作也就好做多了。 作者: 谭砚耘@用户体验与可用性设计-科研笔记 版权属于: 谭砚耘 （TOTHETOP至尚国际 ） [...]
