用户体验与可用性设计

页面重构不可忽略UED、WPO和SEO的工作

谭砚耘 — Fri, 27 Apr 2012 14:50:11 +0000

今天看了迅雷UED团队黄杠杠写的《页面重构做什么》，很不错的一篇文章，节选片段如下：

一般来说，接到一个新的需求，以简单的少页面需求为例，流程上可以简单分为几大阶段：

1. 查看设计稿，阅读需求文档、原型图；
2. 查看并分析设计稿，在脑中整理出粗略解决方案；
3. 切图、合并图片；
4. 书写HTML代码、CSS代码；
5. 检查浏览器兼容性；
6. 对比设计稿，检查还原度；
7. 开发联调修改，测试解bug，上线后再确认一遍页面无bug。

上面提到的5，对比浏览器兼容性，通常我们考虑IE Chrome FF三种浏览器。IE6在国内仍然有1/4市场，设计中需要加以考虑。在国外IE6用户则可以忽略不计。上面提到的6，对比设计稿，检查还原度，则经常被忽略。因为切图合并的过程中，可能会丢失重要的细节。

除了以上两点，页面重构的过程还应该考虑WPO和SEO的因素，当然需要和SEO、WPO专家配合工作。

要点包括：

1. WPO方面：使用css sprite技术，将常用的小图片合成到一幅大图中，减少图片请求次数。

2. WPO方面：将所有图片的主机名，定义为 img1.domain.com的形式，增加平行下载通道。

3. WPO方面：考虑CSS和JS的位置，CSS置入区，JS尽可能放到页面底部。

4. WPO方面：考虑对外部JS脚本异步加载。

5. SEO方面：对于页面重点文字，加

标签，并使用css美化。

6. SEO方面：页面底部每个页面都有的链接，做消噪音处理。

7. SEO方面：对图片和链接，设置alt或title标签，可以预先留空

8. UED方面：设置favicon.ico文件

9. UED方面：手机访问测试。

10. UED方面：多种分辨率下的测试。800*600的分辨率可以不考虑。

11. WPO方面：所有图片都需要做无损压缩，定义图片的width和height

如果上述SEO WPO和UED的工作，在页面重构中完成，后续改动和优化工作就会很省力了。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）版权所有。转载时必须以链接形式注明作者和原始出处

http://www.webusability.cn/html-page-construction-with-seo-wpo-ued-1567/

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

防范恶意点击与IP黑名单——大网站百度搜索推广的SEM精算（十四）

谭砚耘 — Thu, 19 Apr 2012 12:39:52 +0000

恶意点击，是所有搜索推广避免不了的事情。

非常幸运的是，经过央视多次的广告宣传，百度已经开始重视这个问题，并采取了一系列的改进措施。

包括在百度推广账户已经可以在醒目的位置查看到“搜索词报告”，并且可以设置“IP黑名单”。

不过无论是百度的各种报告，还是商桥，还是百度统计，都没有显示搜索用户的IP地址。而IP地址是判断用户是否恶意点击的最直接证据。如果广州某个竞争对手0.5小时搜索一次“广州整形医院”，一天点了你200元，也许百度判断为恶意点击并且过滤了，也许没有过滤，谁也不知道。而你看到这个关键词一天被点了20次，你只能看到地域是广东省，却判断不了是否同一个IP点击过来的。

IP地址的公开，是很多百度高级用户的共同心声，但百度的各种报告这么多年也不愿意提供，也是一个利字作怪。

那我们就没办法了么？这当然难不倒哥

只要你在网站安装另一个统计软件，比如cnzz，就可以看到IP地址。CNZZ还提供这样一个功能，可以看到某个IP在多长时间内通过什么关键词访问网站多少次，你可以拿着这张列表，找百度退款——当然流程是复杂的，过程是艰难的，申诉不成功的几率也是蛮大的。

得到IP地址，除了向百度申诉之外，还可以加入百度提供的IP黑名单。

呵呵，问题又来了。百度在每个账户只提供20个黑名单IP，加上推广计划的20个黑名单IP，总共只能排除40个黑名单IP。这似乎有些不够。不过想想，恶意点击你的账户的人，多数使用动态IP，你每次屏蔽，最多有效2、3天，对方IP就变了。

笔者的建议如下：

1. 屏蔽网上常用的代理服务IP地址，一般你的网站只是针对国内推广，你就搜索“国内免费代理服务器”，排在前三位的也是大多数人使用的，你抽查一下看看网站是否有这些IP的访问，如果有，一定是有人恶意点击。你就把这个IP相邻的国内IP都屏蔽了。有些推广账户，做了省份的地域限制，那么你只要输入广东省的IP，范围更小了。

2. 屏蔽竞争对手服务器IP。

很多竞争对手，除了自己办公室电脑，还会通过远程连接进入服务器，从服务器搜索你的广告来点击。你把最常见的竞争对手的服务器IP干掉。

3. 请专人每天查找可疑IP，添加进入列表

对于关键词上万的大账户，每年的推广费用不下百万，请一个员工每天定时收集一下IP，还是必要的。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/prevent-click-fraud-ip-filter-baidu-sem-for-big-website-promotion-1349/

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

调整网站着陆页——大网站百度搜索推广的SEM精算（十三）

谭砚耘 — Mon, 16 Apr 2012 13:45:19 +0000

有人问：网站不是早做好了么，有调整必要么？

——回答：绝对有必要。并且要经常调整，以配合搜索推广策略。

网站着陆页是神马？对于百度推广而言，就是在百度搜索，点击广告进入你网站的第一个页面。英文：landing page。

着陆页调整，有大量的关于可用性的文章可以参考，笔者在这里说说与百度推广相关的几个原则：

1. 不同的搜索词和搜索创意，对应不同的着陆页

这个很好理解，如：

搜索“整形美容”的，应该进入恬美医疗整形美容的页面

搜索“减肥瘦身”的，应该进入减肥疗程的页面

但有些情况往往被人忽略，下面是一些搜索词，以及对应的着陆页

恬美医疗电话多少 ———— 恬美医疗联系我们页面

恬美医疗信不信得过？ ———— 连接到恬美荣誉资质，或者专家团队页面

减肥疗程多少钱？ ———— 应该直接连接到减肥疗程的价格页面

……

2. 着陆页应该与广告创意相呼应

我的广告创意是：来恬美做整形，优惠20%

如果进入着陆页，看不到20%优惠的字眼，用户会觉得上当了，跳出率就会上升。

3. 着陆页应该有行动号召力

不少人将首页作为所有广告的着陆页。而首页承载的东西太多，往往无法预留足够的权重给号召力元素，如：

某个具体产品的特价
针对某类客户的促销活动
马上购买的折扣
大而有震撼力的促销图片广告

要想突出行动号召力元素，可以考虑不采用首页，而是采用某个特殊的中间页面，甚至是专门为百度搜索推广定制的页面，用来放具有震撼力、号召力的内容。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/howto-set-good-landing-page-baidu-sem-for-big-website-promotion-1347/

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

调整日预算、地域限制、否定关键词、推广时段——大网站百度搜索推广的SEM精算（十二）

谭砚耘 — Wed, 11 Apr 2012 22:41:51 +0000

调整广告计划日预算

日预算，就是每天花费多少钱的上限。百度账户有一个总的日预算，每个推广计划也可以单独设置日预算。当我们建立了推广目录树，就要为每个目录设置初始预算，参见《文章》。一般来说，黄金目录、补漏目录的预算会比其他目录大很多。而随着关键词位置和价格的调整，目录的预算也应该进行调整。

日预算一旦设定，在一段时间内不要轻易改变，除非有足够说服力的理由。比如突然发生大规模恶意点击时间，需要马上调低预算。累积了一段时间的经验，你会掌握在某个最合适的预算，从而长期固定下来。

调整广告计划地域限制

不同的产品适合不同的地域推广。这个调整很简单，我指说说两种特殊情况：

1. 百度“搜索意图定位”功能

还是举恬美医疗的例子，我原来设定了关键词“广州整形美容医院”，限定地区是广州地区。如果我开启了“搜索意图定位”功能，上海的某个用户，如果在百度搜索“广州整形美容医院”，也能看到我的广告。这对于旅游相关产业很有帮助。一个广州企业，在广州卫视上做广告，全国都能看到，那么通过“搜索意图定位”，上海的某个用户也能点击我的广告，说不定这个上海人下次旅游来广州，会顺便做一次美容呢。

2. 部分产品，可能会适合港台搜索用户。

一些港商台商，可能平时在大陆工作，定期返回港台。他们在大陆的习惯也会沿用，也就是他们可能在香港或者台湾使用百度。那么打开这两个地区，是值得评估的。

调整否定关键词

否定关键词是什么？就是如果用户的搜索词，包含了否定关键词，就不显示我的广告。

否定关键词还有另一个兄弟，叫“精确匹配否定词”。

恬美医疗做了短语匹配关键词“美容整形”，然后在推广单元做了否定词“技巧”“diy”，那么搜索“美容整形技巧”和“diy美容整形”的用户就看不到恬美的广告。如果恬美又加多了一个精确匹配否定词“美容整形到博爱”，那么搜索“美容整形到博爱”的人就看不到恬美的广告，而搜索“美容整形到博爱医院”的人则仍然能看到恬美的广告。

我怎么知道那些词应该是否定词呢？很简单，通过搜索词报告，可以使用百度统计或者百度推广账户的搜索词报告，按照点击率排序，可以看到哪些无用的搜索词，将规律总结出来添加到否定词内。

这里提一个小窍门，多个否定词，有时候可以用一个字来代替，比如无用的搜索词是：

diy整形美容
yatao整形美容
整形美容技巧
整形美容技术
整形美容技工学校

我们的否定词应该设置为：

diy
yatao
技巧
技术
技工学校

经过合并后，可以是：

调整推广时段

推广时段，看起来很简单，实际上要对你的产品和搜索用户行为摸的很透彻才行。

恬美医疗做整形美容的，搜索用户到底是在上班时间搜索呢？还是中午休息时间？还是晚饭后？还是干脆上下班车上通过手机搜索？这个需要长期的数据支持。

这里有一个思路：我们在提交关键词的时候，都了解需要关注长尾关键词。而推广时段也存在长尾这一概念。在某些非黄金时间，医疗的竞争对手觉得份额小没搞头，不愿意投广告，这个时间也许就是你趁虚而入的好时机。

举个例子：也许很少有人在凌晨一点搜索整形美容的信息，但也许就有一些哀男怨女深夜对镜自怜，然后下决心砸个几万捯饬捯饬自己那张脸，而这些就是很好的潜在客户。

时段调整的频率：不需要天天做，一次设定完成，基本上1个月甚至更长时间都不需要调整。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/adjust-budget-location-limitation-negative-keyword-promotion-perio-baidu-sem-for-big-website-promotion-1341/

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

调整创意和创意链接——大网站百度搜索推广的SEM精算（十一）

谭砚耘 — Mon, 09 Apr 2012 23:43:14 +0000

创意很重要，这谁都知道，但并不是谁都重视，并花费大力气去想更好的创意。

根据笔者多年百度推广的经验，百度推广的创意，要做到如下几点：

1. 标题要清晰，包含目标词

创意一般分成三部分，以恬美医疗为例，下面就是一个创意，红色字是飘红部分：

创意标题 ———- 正规整形美容恬美医疗8折酬宾

创意首行 ———- 恬美整形美容 18年行业领先专业！ ^老客带新客双享9折1000元优惠

创意次行 ———- ，恬美医疗，18年扎根广州深圳整形美容行业，20人专家团队，5位韩国整形医师，3000用户选择。

上述^代表换行。

你的广告语，需要明确指出你的产品是什么。

创意标题包含“恬美”，除了让用户看到名字觉得安心外，还是一个广告展示的作用。即使用户不点击，也对恬美建立的印象。

2. 适当使用数字的力量

百度的搜索结果，绝大多数都是汉字。

使用数字，会有醒目的感觉。在上面的创意里，9折 18年 1000元，都使用了数字。

3. 飘红

飘红就是上面红色的部分。虽然飘红功能已经被推广者用烂了，但不加飘红的展现效果差，这也是公认的。

4. 适当的空格或连接符

如果每个汉字都黏在一起，用户在扫描广告的时候，不一定会有耐心看完。

所以使用必要的空格，或者短横岗作为连接符，在视觉上会感觉舒服，也容易阅读理解广告的内容。

另一种连接符就是逗号，请大家看看创意的次行，开头就是一个逗号。这是因为我们的创意可能会被百度整合成如下的格式：

正规整形美容恬美医疗8折酬宾

恬美整形美容 18年行业领先专业！老客带新客双享9折1000元优惠，恬美医疗，18年扎根广州深圳整形美容行业，20人专家团队，5位韩国整形医师，3000用户选择。

如果没有逗号，首行和次行就连接在一起分不出来了。

5. 结合热点

如果《大长今》正在热播，你可以接这股热潮，来一个应景的创意：

大长今我也要，整形美容来恬美

这样的创意是很醒目的，即使你的点击费用低排名比较靠后，点击率可不一定比第一位差。

比如流行“寂寞哥”的段子的时候，可以考虑做一段创意

不为哥为寂寞恬美整形美容

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/your-slogan-and-ad-link-baidu-sem-for-big-website-promotion-1345/

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

收集整理：IIS6下WordPress伪静态URL出错的解决方法

谭砚耘 — Sun, 08 Apr 2012 23:22:55 +0000

谭砚耘注：

在IIS6，因为没有URL Rewrite组件，所以伪静态URL会出错。

解决思路有两种：

1. 在404报错页面上做文章，实现301跳转。

2. 直接安装URL Rewrite组件。这是更好的方法。

下面这篇文章来自网络，做了一些文字的调整。

Windows2003 IIS6下实现伪静态的方法有很多，一种通过IIS的404处理机制来实现（缺陷是搜索结果页分页错误），这比ISAPI_ReWrite要方便，可是对搜索引擎的友好度可圈可点，暂不推荐；还有一种是通过服务器端安装伪静态组件实现，这种也是现在最常用的。当然，你如果是LINUX服务器，那就简单多了，直接使用Apache的Mode Rewrite和.htaccess配合即可。

为什么要使用伪静态？

1.最主要的就是通过伪静态来改变网站URL结构，增强网站对搜索引擎的友好度。对搜索引擎来说，静态的URL更受搜索引擎蜘蛛(Spider）的欢迎，也更方便Spider来抓取网页上的相关内容。

2.保证网站内容的实时更新，这样Spider来爬的时候，就不会错过你网站更多精彩的内容。另外，相对真静态来说，也省去频繁生成静态网页对硬盘的伤了。

3.极大方便了SEO，加强了网站信任度，对你网站的搜索排名来说，可谓功不可没。

很多朋友在研究SEO的时候，因为有些技术原因，伪静态却成了最大的门槛。下面我就分享一下我的WordPress伪静态的方法，帮你省点事，少些弯路，效果嘛，我的博客就是个很好的例子，包括困扰很多站长朋友的分页问题也完美解决。

WordPress伪静态Windows2003 IIS6下配置方法

1.下载WordPress URL Rewrite组件

发布页：http://www.binaryfortress.com/wordpress-url-rewrite

WordPress URL Rewrite主要功能与特色：完全无需人工干预，全自动重写URL，只需要在后台设置好固定链接（Permalinks）形式，就能直接使用，就像linux下用.htaccess一样。可以使用在一级目录和子目录，也可以排除不需要重写的目录。这个非常方便，对于某些目录不需要URL重写的就将其排除，不会造成无法访问。因为全自动，所以免去了在写重写规则时候遇到的规则重复造成部分目录和文件无法实现的情况。我想，很多站长都遇到过这种情况吧，当然我也有过，那个叫折腾来着。

2.安装WordPress URL Rewrite

把下载的压缩包解压到任何地方，只要保证WordPressURLRewrite.ini和WordPressURLRewrite32.dll（32位版本，64位版本对应为64.dll）在同一文件夹下就可以了。

然后打开WordPressURLRewrite.ini设置你的博客目录，以及需要排除的目录，这里就不详细说了，Readme.txt里有详细说明，有什么不清楚的地方可以给我留言。

接下来，在IIS中选择相应的站点，在ISAPI筛选器中加载WordPressURLRewrite32.dll就可以了，加载完不用重启IIS，可以停掉网站再启动。

注意：要给dll所在的目录加上IIS_WPG组的写入权限，否则无法加载对应dll文件。

如果你的文章、栏目、tag别名均是用的英文的话，那到这里就OK了，下面是针对特殊情况的解决办法。

3. 为了解决中文出错的问题，还需要安装ISAPI_Rewrite

网站根目录下新建立一个httpd.ini文件，用记事本或是emeditor打开，规则写在httpd.ini里，如下：

[ISAPI_Rewrite]
# 3600 = 1 hour
CacheClockRate 3600
RepeatLimit 32
RewriteRule /tag/[^/]+)/([^/]+)/?([0-9]+)?/ /index.php?tag=$1&paged=$3 [L]

以上文字，部分来自链接

谭砚耘注：上述工作完成后，部分中文还是会出现错误。

请结合之前的博文《WordPress中文乱码六种情况的解决方法》，设置完成后，就OK了。

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

谭砚耘（TOTHETOP至尚国际）

转载时必须以链接形式注明作者和原始出处

http://www.webusability.cn/howto-solve-wordpress-seo-friendly-url-failure-on-iis6-1539/

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

大型在线应用更快响应时间的实现方法——来自Google架构师 Jeff Dean

谭砚耘 — Thu, 05 Apr 2012 23:21:07 +0000

《大型在线应用更快响应时间的实现方法》下载链接 fast-reponse-time-large-fanout-online-service

谭砚耘注：这是Google工程师Jeff Dean在2012年3月的演讲稿，英文的，我对要点做了简单的翻译，时间短，不太准确，有问题欢迎指出。

在架构更快的网站系统的方方面面，都有阐述。特别适合多节点输出的在线系统。国外的facebook google 国内的baidu 腾讯等，都在此列。

这类在线系统，往往提供多点服务，如htm文档、博客、新闻、文件、图片、视频，如下图：

牵涉的服务器越多，延迟就可能越长，因为：

1. 服务器越多，某台服务器繁忙造成延迟的几率就大。

2. 同时连接多台服务器，本身就是一件耗时的事。

而为了改善延迟，传统的两种方法都不适用：

1. 压缩所有可能造成延迟的因素——对于大型多点系统来说，无法轻易更新和扩展。

2. 采用共用的系统环境——无法适应网络突变，服务激增等因素。

传统方法行不通，那么正确的方法是什么呢？PPT中提出了几条路：

一、标准的改善延迟的技巧

对请求的优先级排序
对网络服务优先级排序
将在头部发生阻塞的服务拆散
将耗时大户放到非繁忙时间运行

二、同步中断

不要随机运行后台的各种进程
要同步进程，避免在rush hour百上加斤

三、建立系统的容错能力和容可变能力

四、负载均衡

服务繁忙的服务器，将里面的服务转移到比较空闲的服务器中。

五、加速灾难恢复

某个服务器崩溃了，要迅速将崩溃前的服务平衡的分配到其他服务器内。

六、建立动态和静态镜像服务器

对于最常用的文件，放到多个静态镜像中去。

对于突发的某类请求（比如对google来说，农历春节期间，中文请求会增多），使用静态镜像服务器。

七、延缓容易诱发延迟的因素

八、优化请求过程中的可变因素

九、数据独立错误——没看懂，哪位帮忙看看，评论一下

十、金丝雀错误——开始没看懂，后经热心网友点拨，正确解释见下文

后补 by 谭砚耘 2012-4-6：根据热心网友的回复，在这里补充一下关于金丝雀试错法 Canary Request 是一种应对危险请求的方法。对于接受海量request的服务，可能会存在某些危险的request，直接导致上千台服务器发生故障，这种Death Request非常危险，Google是怎样防范呢？两个方法：

方法一：重新分析日志，找出危害服务进程的Request，标记为Death Request。但这是亡羊补牢，无法做到即时。

方法二：采用金丝雀试错法（Canary Failure Request），将一些可能危险的request暂时放到一台机子上运行，如果正常，再放到1000台机子上运行。如果出错了，再给多几台机子来运行，这样就不会同时影响1000台服务器。

至于为什么叫金丝雀，笔者怀疑是误称。Canary是大西洋的一个岛屿，虽然在地理位置上说来，加纳利群岛实是非洲大陆的部分，它离西班牙最近的港口加底斯（Cadiz）也有近一千公里的海程，可是岛上的居民始终不承认他们是非洲的一部分，甚至史书上也说，加纳利群岛，是早已消失了的大西洋洲土地的几个露在海上的山尖（来自百度百科）。也就是说，Canary代表了三不管地区，和非洲大陆相隔很远，和欧洲也很远，被引申指那些孤立的、隔绝的事务。采用Canary Request，用某个孤立的服务器来试错。 Canary Request的说明链接

十一、Request Backup处理机制（用多服务器换性能）

提交一个请求，同时交给两台服务器处理，性能好的服务器先反馈，然后发送指令给另一台慢的服务器，终止对请求的response。

用了backup机制，除了改善延迟外（PPT的例子，提升50%以上），也更容易达到更高的服务保障率。

十二、容许“被玷污”的数据

有的时候为了达到99.9%的保障率，需要1000ms

而如果我们达到99%的保障率，只需要200ms

为了改善延迟，我们可能会选择后者

十三、硬件上面做文章

结合视频看的话，PPT的效果可能更好。

感谢tiantian1234在英语和专业技术上的不吝赐教，浪费了你接近一个小时晚上宝贵的时间啊……

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/from-google-jeff-dean-rapid-response-time-on-large-fanout-service-1521/

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

转发：结合新浪微博改版说说bigpipe中的页面构建优化

谭砚耘 — Tue, 03 Apr 2012 12:49:19 +0000

谭砚耘注：转发小秦的文章，写得很好。

与BigPipe有关的文章见：

百度百科关于bigpipe

limu关于bigpipe

facebook bigpipe介绍(要翻墙)

facebook bigpipe译文

题记：搞互联网的同学也许都知道一个数字——4秒，有研究表明，如果一个网站没有在4秒之内加载完成，用户就会感到焦躁不愉快，并离开这个网站（数据来自性能测试网站http://gtmetrix.com/）。网站的内容、SEO优化、用户体验？哪个更重要呢？在速度面前，也许这些都相对更次要。所以提高网页效率，是我们在新版微博的第一目标。从四个方面来浅谈我们新版微博的优化。

一、HTTP请求数的权衡

1、为什么要关心http请求？

当浏览器向Web服务器发出请求时，它向服务器传递了一个数据块，也就是请求信息。在用户打开一个页面的初初，包括等待时间、请求时间、建立响应时间、渲染时间……，都是消耗在前端的。比如下载图片、下载样式表、JavaScript脚本、flash等文件。大家应该都经历过那个“多图杀猫”的时代，加载那样一个网页会花费大量的时间。减少这些资源文件的请求数将是提高网页显示效率的重点。
假设用户家的网速是10Mbps，10Mbps=10/8=1.25MB/s，那么他打开一个网页时，如果网页文件小于1.25MB，理论上他可以在一秒之内打开网页。下载网页的快慢在显示速度上占了很大比重，所以，网页本身体积越小，浏览速度就会越快。这就需要产品、交互、设计，从最初就遵循尽量精简的原则。

现在，就揭开新版微博的面纱，看看微博3.0和新版微博的区别吧。

微博3.0截图

新版微博截图

微博3.0是大家熟悉的两栏结构，总宽为800px，有一级导航和二级导航、发布框、feed区、个人简介区。新版微博是现在最流行的三栏式布局，总宽950px，除以前的内容一个都不少之外，还整合出了左侧导航和右侧各种引导和公告。所以从理论上讲，虽然内容更丰富了，但新版微博着实比微博3.0的页面体积大了很多。

2、什么是bigpipe？

网上有个例子举得好：在饭馆点菜吃的时候，如果点了四个菜，厨师没有必要把四个菜一起炒好再上来。微博3.0就是这种把所有菜都炒好再上桌的网页加载模式。所以用户吃上菜的时候，已经是第5秒了。现在新版微博的bigpipe网页加载模式，是炒好一个菜先一个菜，用户可以先吃着，厨师再炒第二个菜。甚至可以几个菜并发同时炒。所以用户吃上第一口菜的时间可能是第1秒，比之前提前了很多。

bigpipe模式示意图

JS工程师把页面分割成若干个小块（pagelet），模块彼此独立，把html语言转变为JS语言，再把CSS通过style的方式加载进这段代码，而不需要用以往的头部link css地址的方式取样式。每个模块有自己对应的html、CSS、JS，一旦开始运行模块，就会寻找到对应的CSS，并显示对应innerHTML内容插入到对应的html元素中，同时渲染出本模块效果。比如执行到feed区域的 id=”pl_content_homeFeed”时，样式表只调用了feed.css。

3、为什么新版微博 CSS的HTTP请求数不降反增？

通过上面说的这种模式，css被全部link到头部，是为了给后台代码提供出pagelet所需要的样式列表。以前微博3.0头部只link了3个CSS，新版微博首页头部却需要link10多个css。虽然加载文件多了，新版微博CSS加载请求数反而高于v3，看似yslow降级了（这个数据已经不能说明任何问题了）。但实际上新版微博CSS没有像以往一样合并起来，而是用一个加载一个，CSS和JS被分配到不同流水线中，模块的加载变成并行的，先执行完的模块先显示出来。所以新版微博CSS渲染的总时间并不超过V3CSS渲染的总时间，速度反而快了很多，减少了视觉等待。

	请求数	总大小	加载时间
V3 CSS	3 个请求	76.3 KB	8.53s
V4 CSS	24个请求	50.2KB	6.08s

上面这张表格，来自yslow的分析。我们通过把页面切成细小模块写样式的做法，虽然请求数比以前大了8倍，但总大小上直降20K。

将多个CSS合并的做法固然可以减少请求，但对上亿用户的微博页面来说，完成合并也许会带来5%速度的提升。但是如果按bigpipe模式，即使http请求数提高了，但是整体的速度也许是之前的50%。

二、对CSS的优化处理

1、提取公用模块或公用元素，并反复调用

如果用户每次访问微博首页时，就重新下载读取CSS文件。这就会造成给服务器带来额外压力且用户重复读取耗时。新版微博的做法是，把模块分为全局级模块和页面级模块，首页是全站的核心，所有模块都是重要且重复性高的，所以首页的所以模块都是全局级模块。首页所需要的CSS被整理成一个pl列表反馈给工程师，等待处理。而一些非公共的css模块样式被单独写在属于本页面的文件里，这样就最大化的节省了文件大小及利用率。这么做还有一个好处，就是公共模块样式被调用过后，会在浏览器里留下缓存。调用最频繁的模块，反而样式被最快的加载进来。

举个简单的例子：

.clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}

.clearfix {display: inline-block;}

这是一段全局代码，基本上每个页面都会用到这个类，我们就没必要把这句写在每个网页的CSS里面，只把它提取到base.css里，并方便进行皮肤管理。

又比如，首页右侧栏有个“可能感兴趣的活动”类似的模块都是采用独立的div容器，这个段落的详细代码，如果写在公用CSS文件里，肯定就浪费了。

2、尽可能少的使用css images

能通过代码或字符实现的，就不用图片去解决。比如“可能感兴趣的人”展开气泡上下三角、返回顶部的箭头、“更多”后面的»符号等。既减小CSS图片请求，又不会面临若干套皮肤升级困难的问题，仅通过对CSS的color、backgroud等属性的控制，就可以换色了。

可以看看按这个做法之后明显的优势，下图来自yslow的statistics。微博3.0的css image总大小为970.1K，新版微博的css image总大小为693.9K，总量直降30%。

微博3.0 statistics

新版微博 statistics

3、尽量使用CSS3等新技术

在新版微博里，我们制定了使用CSS3的原则，即非图片类的元素效果图，如圆角、阴影、渐变、半透等效果，可以通过样式控制，而无需切图的元素，在得到设计师认可后，不用图片，只做样式控制。满足高级浏览器的视觉，ie系列不能显示的，有原则的放弃。不仅为速度助力，还在放弃低级浏览器的大方向前进一步。

4、鼠标滑上效果改用伪类实现

在逐步放弃ie6的事情上，新版微博已经尽最大的努力做了。为了保证各浏览器的完全兼容，微博3.0以前我们曾经放弃让CSS实现鼠标滑上效果，而由JS控制。随着ie6使用率的日益降低，新版微博又一大革新就是重新使用伪类，仅通过CSS就实现的浏览器原生效果，不仅计算速度比计算一个JS快得多，也终于放弃了低端的ie6。

举个评论页feed区的例子：

CSS代码如下：

每个单条feed在鼠标滑上时，都会显示举报和删除链接。这是交互设计出于对页面呈现内容的视觉舒适感所做的设计，我们通过对块元素直接写伪类，实现这个效果，不需要再通过JS了。ie6呢？就让它一直摆着去吧。

三、对dom结构的优化处理

1、bigpipe模式重构并优化垃圾代码

v2从v1来，v3从v2来，在v3不堪重负的时候，新版微博的代码优化誓在必行了。所以我们并没有沿用之前的结构和CSS，而是直接推翻v3，重构新版微博。和JS工程师一起搭建的bigpipe模式，把页面分成细小的块，每一个模块对应一个CSS。代码写到最优，结构和样式完全分离，并杜绝内联调用的方式。下图示意了我们用模块配页面的最终效果，模块可以被细分为如此程度。模块拆的细，复用性被提高。

2、尽量减少代码体积

由于代码行数越少体积就越小，所以我们这次想办法减少网页代码的行数。相同或类似的模块，说服设计师把视觉规范统一。我们只通过对CSS补丁，覆盖原样式，并不改变页面的dom结构，直接降低重复代码率。举个例子，“我的首页”和“我的profile页”，同样是有feed区域的，区别是但一个有头像，一个没有头像。只需要一套feed.css代码，然后在“我的profile页”独立的页面级CSS中，打个去掉头像的补丁即可。

3、首页中杜绝Table布局和iframe

杜绝首页中出现Table布局。因为传统的table布局，是把内容全部加载完成后，才渲染样式，延迟效果严重。而iframe页面框架，是非语义的，即使为空也会有较大资源消耗，还会阻止页面的onload。

四、对图片的优化处理

1、图片的存储格式

我们改变了v3的做法，把icon类小图片或背景类图片，由以前的gif存储尽可能多的转为png8的存储，这是个减小图片体积的好办法。Png8有gif的所有特点，但是相比gif，png8的优势是alpha透明和更优的压缩。png24全透明的图片，只给支持的浏览器使用，ie6在不影响视觉的前提下，改为gif呈现。我们还会利用的图片优化工具处理图片，保证效果但却降低文件大小。下图是主键类页面的images文件夹示意图，除必须独立的icon外，png类型的图片比重大得多。这在之前的V3并没有做到。

2、css sprites

在图片的拼合方面，我们是持之以恒这么做的。在v3里，我们把所有首页和profile页里出现的背景类图片都拼合到一张大图上，新版微博比之前高明在，我们把放置文件夹细分。假设我们把公用型放入common，页面类放入index，换肤类放入skin。把sprites拆分的更细，尽可能在加载首页时，减少图片请求数。

3、大图片、小图片

对于大背景图，我们的做法是不分割成小区块儿的。首先的因为，原本一个图片的请求数会变成多个。另外，大约80%以上调用图片所消耗的时间，是用来检索缓存和确定链接是否有效的阻塞时间。也就是说，如果把一个大图片，切成若干小图片，虽然解决了图片的加载时间，却花费了更多的阻塞时间。

4、在已知宽高的图片标签内，直接指定宽高。

Feed区域里头像需求是50*50的，所以后台直接吐出这个尺寸的图片。在已知宽高的情况的，我们在img标签中直接指定了height和width参数。因为如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，首页有多少条feed就有多少个头像，浏览器需要不断地调整计算。当浏览器知道了height和width参数后，即使图片暂时无法显示，页面上也会预留空位，继续加载后面的内容。

新版上线后，不少公测用户的反馈速度变快了，微博浏览起来更顺畅了。这不是我们页面重构组的功劳，是整个微博团队，或者说是bigpipe思想的功劳。但“速度快了”这句话本身，就是对我们团队工作最好的褒奖，对我们参与开发的团队成员的最好的鼓励。抓住产品改版的机会，就是自己对优化的研究和经验的积累落实到细节的机会。虽然还任重道远。原文链接

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

谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/bigpipe-web-performance-optimization-of-weibo-1501/

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

调整关键词位置——大网站百度搜索推广的SEM精算（十）

谭砚耘 — Sun, 01 Apr 2012 23:33:50 +0000

经过目录树搭建、添加关键词、添加创意（见《茁壮但不肥胖的目录树》《如何管理10000个关键词》），搜索推广就正式展开了。

我们回忆一下，我们的目录树结构是怎样的：

目录树主干，包括：

为了更好的管理超过10000个关键词的百度账号，我们需要建立平行的六大辅助枝干：

上面标注红色的四个目录，就是日常维护百度账号经常需要调整的目录。

黄金目录

一般放置最热门、竞争最大、点击价格最高的关键词。不过有的时候，推广者认为的黄金词可能并不能真正促成转化，甚至某些黄金词其实是危险词。

拿比较热门的一个美容词“瘦身减肥”做例子。这个词排在百度首页首位的价格，不会低于 5元/次点击。用这个词搜索的人，98%是为了找“瘦身减肥”技巧，2%是为了找减肥医院。

访客行为模拟：98%用户在百度上搜索到了恬美医疗的推广广告，点击进去看不到自己想要的减肥技巧，就会直接离开。只有2%的用户才觉得网站有用，继续浏览。反映在流量统计数据上，搜索词“瘦身减肥”过来的访问，转化率会很低，而跳出率（我来我吐我走！）会很高。

有人可能会说：生意难做，为了这2%的潜在用户，98%的钱只能浪费了。实际浪费的钱，可能不止2%。假设1000个客户搜索“瘦身减肥”来到恬美医疗，每次点击5元，那么推广成本5000元。其中980个客户，本来要找减肥技巧的，看到页面不对，978个人跑掉了，还剩2个人发现你的网站挺有用，还是收藏了起来。这里估算2个人收藏，已经是很乐观的估计了。因为对于这种搜索相关性不强的页面，千分之一的关注率已经是较高了。

1000个访客中，还有20个，真实目的是为了搜索“瘦身减肥医院”或者“瘦身减肥机构”的，是真实的潜在客户，加上之前搜减肥技巧漏出来的2个，总共22个潜在访问。

这22潜在访问，按照2%的长效转化率，大约0.44个客户会拿起电话联络恬美医疗。（这里补充一句：减肥疗程一般是2000~3000元，用户消费前会比较谨慎。一个潜在用户，肯拿起电话，往往是经过多次搜索，找到好几家医院，比较价格后才联络恬美医疗的。前文提到2%的转化率，我们把后面的搜索效果都累加到第一次上。2%是一个非常乐观的数字，因为对于关键词相关度较高的搜索，转化率能达到1%已经不错了。）

一般3个客户来电话，就能拿下一个。那么0.44个客户来电话，会成交0.15单。减肥课程，每订单按照3000元考虑，也就是说成交了450元。450元还有运营成本（不含推广费用）50%考虑，还剩下225元利润。这225元利润，远远填不满推广费用5000元的大窟窿。

只是举一个例子，所有的数字都需要验证，不过上面的估计八九不离十。不相信？你可以搜索一下“瘦身减肥”，就会发现排在百度左侧，基本看不到什么推广广告。只有右侧显示广告，那也是因为关键词被百度广泛或短语匹配了才显示的。这么热门的关键词，相信肯定有人做过，然后发现烧钱速度高的惊人，而基本没什么转化，所以知难而退了。

所以，一些黄金关键词只是看上去很美，实际上很危险。对于这类词，如果一开始设置不小心放进了黄金词目录，也没关系。因为黄金词目录每天都要看看。看什么？看烧钱速度和转化次数。如果某个关键词烧钱速度太快，而又没有什么转化的话，那么不用等很长时间，有一天的数据就能做出判断，果断的将这个词从黄金目录转移到危险目录。在危险目录中，

将该词降低价格
限制地区
设置精确匹配
然后考虑将危险目录的推广计划的总金额做限制

危险目录

危险目录放那些烧钱速度很快，转化率又不高的关键词。

除了黄金目录过来的一些词，还有一些其他目录的关键词也很危险。

举一个例子：北大医院是深圳的一家比较大的医院，绝大多数搜索“北大医院”的人，并不是为了找这家医院，而是为了搜索公交车站名。如果你对“北大医院”做了短语匹配，可能搜索“香蜜湖到北大医院坐什么车”“北大医院有车去梅林关么”这类的用户也会点击你的广告。

另一个例子：大多数搜索“网页制作”的人，不一定在找网页制作公司，而是为了找“网页制作技术”“网页制作教程”“网页制作方法”。

假设我有10000个关键词，怎样判断某个词是危险的呢？很容易，通过以下指标：

点击率
转化率
搜索词

通过点击率，我们可以找到被点击次数最多的50个推广关键词。

然后结合转化率看看哪些关键词转化率最低，找出最低的10个词。

然后进入百度推广账户，查看搜索词报告，这里会告诉你，用户在百度搜索了那些词，然后点击了你的哪个关键词广告。这里插一句：在百度统计中，也有搜索词报告，但没有推广账户的方便，因为百度统计的报告无法显示出这个搜索词对应点击了哪个关键词广告。但百度统计的好处是，可以显示即时结果，而百度推广账户只能显示24小时之前的搜索词（截止2012年2月18日都是如此）。

如果你在搜索词报告中，发现了“北大医院”这个关键词是通过“香蜜湖到北大医院坐什么车”点击过来的，就说明这个关键词有危险，可以放到危险词目录，继续观察。

进入危险词的目录，有两条出路：

1. 如果危险词真的很危险，而且没有带来转化，就直接删除。

2. 如果危险词通过设定否定关键词、限制流量、推广时段、修改匹配模式等方法，能够提升转化率的话，那么就可以脱险上岸，重回正常模式。

实验目录

实验目录就是为了做实验用的。一些拿不准主意的危险词或黄金词，也可以先放到实验目录中。

为了作调整，我们会频繁的调整这个目录的关键词价格、创意、地区显示、推广时段。

通过比较，找到最合适的配置方法，然后转移到黄金目录或危险目录中。

补漏目录

这个目录的调整方法类似黄金目录，不再赘述。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/adjust-ranking-of-keywords-baidu-sem-for-big-website-promotion-1333/

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

日常维护综述——大网站百度搜索推广的SEM精算（九）

谭砚耘 — Wed, 28 Mar 2012 23:27:46 +0000

在之前写的系列博客《大网站百度搜索推广的SEM精算》，讲了八件事：

1. 百度新凤巢的新功能

2. 如何建立百度账号并初始化

3. 根据关键词类型建立目录树

4. 如何建立10000个关键词

5. 建立转化率目标监控机制

6. 根据转化率调整百度账号

7. 设定网盟推广

8. 推广需要注意的其他问题

其中第6点，属于百度SEM推广的日常维护部分。实际上百度SEM推广的日常维护，包括了很多方面，之前因为篇幅有限，无法详细阐明，所以另开一片文章。

百度SEM推广在完成了账号目录树和关键词设定后，就进入了日常维护阶段，具体包括那几方面呢？

1. 调整重点关键词位置

2. 调整推广计划预算

3. 调整推广地域限制

4. 调整否定关键词

5. 调整推广时段

6. 调整创意和创意链接

7. 调整网站着陆页

8. 调整IP黑名单及防范恶意点击

上述的工作，

1~5的作用是锁定更有价值的搜索用户。这项工作每天都要花费时间做。

6、7的作用是为了提升搜索可用性和网站可用性。这部分工作是阶段性的，一次调整可以生效一段时间。

8的作用是为了防止恶意点击。这部分工作也是每天都要做。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/brief-how-to-baidu-sem-everyday-maintenance-1330/

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

WPO工具：表格化的WPO检测工具

谭砚耘 — Sun, 25 Mar 2012 23:10:42 +0000

之前的文章《网站性能优化WPO的8个资源》中提到好几个WPO工具站，包括GTMetrix和Webpagetest。

上面两个工具虽好，但如果想获取网页组件信息，还需要使用Firebug或者YSlow。而且要出WPO优化报告，还得自己排版编辑一大堆东西。

又提供优化策略建议，又有网页基本信息，又提供像模像样的WPO优化报告，有没有这样的工具呢？答案是——yes！

http://www.websiteoptimization.com/services/analyze/

上面的工具，挺好，满足了两方面需要。我以 www.buyonme.com 网站为例，报告分三部分：

第一部分，网页基本数据，如下图：

第二部分，每个网页组件的具体性能表现

第三部分：整体优化建议

上述三部分内容，已经是一份完整的优化报告了。当然，你得做一些汉化的工作才行 : )

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/wpo-tools-table-format-wpo-testing-tool-470/

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

最后的1米，WPO和UED ——大网站百度搜索推广的SEM精算（八）

谭砚耘 — Thu, 22 Mar 2012 13:51:12 +0000

用户搜索关键词，用户看到你的广告，用户点击广告，用户即将进入你的网站。这就是百度推广的最后一段距离，这段距离可能是一米也可能是十万八千里，我们需要关注WPO和UED。

百度官方空间上，有一个转化漏斗图说明了很多：

很多人可能会惊奇的发现：点击量竟然不定于访问量。

也就是说，搜索用户点击你的广告，却无法进入你的网站，也许是超时，也许是用户没有耐心所以关闭了浏览器，都是造成这种情况的原因。解决方案是什么呢？——WPO

关于WPO，笔者在之前的博客中已经说了很多，可以参阅：

所有网站都需要WPO（网站性能优化）

WPO网站性能优化的基本概念

WPO 网站性能优化，多快才算快？

WPO网站性能优化对搜索引擎蜘蛛行为的影响

网店WPO基础工作：制定性能优化目标

网站性能优化WPO的8个资源

而转化漏斗的倒数第二层，就是UED——用户体验设计的范畴了。

网站的用户体验设计，也就是网站的可用性设计，又是一门大学问，没有办法在这里一一表述。可以参见笔者下面的文章：

关注负面情绪——通过可用性测试探寻用户真实需求

某网站30分钟DIY可用性测试及简易UED建议

外贸B2C可用性分析：四种购物车的展示方法

搜索框的可用性设计：几家英文B2C网站的对比

外贸型B2C网站可用性测试的8个建议

网站可用性：10家外贸B2C网站的新用户注册页面的分析

最后再对百度统计说多两句，百度统计是一款很符合中国国情的统计系统，抄袭了google analytics的优点，结合中国人的使用习惯，进行了适当的简化和发扬。缺点也很明显：

1. 可拓展性不够好——也许是没有开放所有的高级功能

2. 没有提供多种维度组合。比如笔者想观察某个关键词在某个时间段的转化率高低，并同时查看消耗的费用，就无法做到。而这一点在google可以轻松完成。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/wpo-ued-web-usability-design-baidu-sem-for-big-website-promotion-1223/

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

WPO基础：再说瀑布图

谭砚耘 — Tue, 20 Mar 2012 01:52:46 +0000

在之前的文章《关于WPO监测：说说瀑布图》，我们讨论了生成瀑布图的工具，今天我们从WPO基础的角度来说说瀑布图，以及我们能从瀑布图中看到什么。

大家介绍一下“时间瀑布图”。

访客打开你的网页要花时间，时间将分别耗费在请求服务器数据、读取脚本、读取样式表、图片、文本、载入外部资源、查找DNS以及杂七杂八的各种因素上。我们用“时间瀑布图”来告诉大家打开一个网页需要经过哪些步骤，哪些步骤花费了多少毫秒。有道是“时光如流水”，因为瀑布图的图形是时间，样子呈阶梯下降状，所以被称作时间瀑布。

图6-25：奔驰汽车中文官网首页“时间瀑布图” [引用信息源： http://www.webpagetest.org ]

图6-25要旋转90度来看 :-），通过瀑布图，我们可以了解到奔驰汽车首页打开的过程是：

1）首先定位 http://www.mercedes-benz.com.cn

2）然后获取一个html文本

3）然后是css样式表

4）然后是js脚本

5）然后是一大堆css，JS文件、图片

6）（中间省略若干行）

7）接近尾声，经过了一个fls.doubleclick.net的长长的时间条

8）再是一堆图片和一部分js脚本，完全打开首页

我们还能从瀑布图中得到如下信息

a 打开的文件种类包括：.html / .js / .css / .jpg / .png / .gif

b 网页请求的域名数量：mercedes-benz.com.cn， fls.doubleclick.net， daimlerag.122.2o7.net

c 打开网页最耗时操作：

http://fls.doubleclick.net/activityi;src=2586546;type=benzc763;cat=-uvtv906;ord=1;num=4263835435058.474?

这个操作耗时3.1秒，造成这个耗时操作的原因，可能是因为fls.doubleclick.net网络连接不稳定造成的，因为不同时间段访问，这个操作耗费的时间不同。那么这个耗时操作的影响是什么呢？应该从瀑布图上看出来，奔驰首页上部和下部的背景图是排在这个操作后面的，而上下两幅背景图对于网页美观程度还是有一定影响的。也就是说这个网络不稳定因素会影响到部分访客的浏览感受，是一个需要解决的问题。

不同的“时间瀑布图”代表的意义不一样。我们看看PayPal中文首页（http://www.paypal.com/c2）的瀑布图，很明显页面很简单，载入的元素也很少。但在载入第一项的时候，却耗费了2.6秒之多。造成这个问题的原因是什么呢？应该和网络慢有关。很可能PayPal中文网页的服务器放在海外。

图6-26：PayPal中文首页“时间瀑布图” [生成工具： http://www.webpagetest.org ]

PayPal很多年以前已在华展开业务，在香港和上海都有办公室，为什么会吝惜改善当地的服务器和带宽资源呢？如果是基于安全性考虑所以PayPal将所有服务器都放在海外，那么可以将登录后的信息放到海外，而登录前的中文首页可以通过技术手段使用中国地区的网络资源，从而改善访客浏览感受。

上面的两个例子，让大家对瀑布图有一个直观的认识，也提醒我们：瀑布图可以帮你发现网页的很多问题。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/wpo-basic-what-is-waterfall-timeline-graphic-1296/

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

WPO基础：减少HTTP请求

谭砚耘 — Fri, 16 Mar 2012 01:52:49 +0000

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

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

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

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

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

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

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

……

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

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

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

网站首页在合并后只有一个的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 别忘了修改小老鼠

巧做网盟推广——大网站百度搜索推广的SEM精算（七）

谭砚耘 — Thu, 15 Mar 2012 01:57:41 +0000

笔者注：自己这篇文章写得有点简单了。

网盟推广是一个大题目，单是“搜索词定向”“回头客定向”“主题词定向”，每个都可以展开一篇详细的文章。

这个系列原来的定位是关键词广告，而非网盟广告。以后做文字补充吧。

网盟就是百度与50万家网站合作的联盟，对你来说有几个作用：

让你的广告在百度以外显示
让你的广告用文字、图片、动画的方式来展示
单次点击价格低
通常没有竞争对手的网站干扰

网盟的缺点也很明显

点击质量没有搜索用户高
更加难防范恶意点击（你很难相信网盟站点不作恶）

还是用恬美医疗的例子。

集团名称：恬美医疗

集团简介：是一家广东省知名整形美容连锁机构，业务以医学美容为主

官方网站：www.tmbeauty.cc 恬美医疗总站，主要产品服务站

如果做网盟推广，需要考虑哪些问题：

一、网盟推广的目的

恬美医疗通过网盟推广，提升了品牌的曝光率。

网盟有用，但问题是这么做值不值呢？

如果品牌对恬美医疗不重要，那么我们就将关注点放回到增加点击率上来，请看下一点。

二、网盟推广采用哪种形式

网盟推广有四种形式：

网站定向：针对目标人群活动网站。按照行业、网站类别/名称、网站评级/流量等投放。
主题词定向：把握目标人群浏览内容。指定相关关键词，进行广泛匹配，系统基于关键词寻找相关网页投放。
人群定向：如果网民搜索过关键词或来过你网站，将会在网盟上再次展现推广信息，加深品牌印象。
地域定向：抓住目标人群活动地区，指定省、市进行投放。

如果不考虑品牌曝光的因素，对恬美医疗最有利的是“人群定向”。

人群定向只对一类人展示广告，就是那些曾经搜索过“整形美容”等关键词的用户，或者是曾经访问过 tmbeauty.cc 网站的用户。只有这些用户来到百度的联盟站点，才会看到恬美的图片广告。

而一次点击大约0.5元起价，并不算贵。因为很少恶意点击，所以不妨将价格提升一些，以增加点击数量。

三、网盟推广的资金分配

不考虑品牌曝光的因素，网盟推广费用在50~500元/天是合适的。

相对于百度搜索动辄每天数千元，简直就是毛毛雨了。

而事实上，如果设置了人群定向，每天的消耗经常在50元以下，甚至只有几元。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/howto-wangmeng-marketing-strategy-baidu-sem-for-big-website-promotion-1220/

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

转发：一个淘宝网店的用户体验诊断书

谭砚耘 — Tue, 13 Mar 2012 07:43:51 +0000

作为店主的大家，会不会有投入大笔资金去做推广，却没抽出一小部分投入到设计上呢？那么也许你还没有意识到设计的重要性。设计也能提升转化率？答案是肯定的，当然，合理的方法很重要，让我们一起来看看今天的案例。

店铺基本情况：

店铺名称：*********（绝不AD） 店铺等级：五钻

店铺求诊方向： 店铺的产品SKU很多，分类比较复杂，整体转化率很低。设计方面应该怎么优化才能提升转化率？

诊断结果：从店铺总体来看，产品的图片拍摄很不错，比较有吸引力，通过客户留言也可以分析出产品本身是具有较强竞争力的。但是由于店铺定位不清晰，导致整体分类结构混乱，用户体验较差。另一方面，品牌的感觉很弱，很难有让用户动心和留恋的地方，同时店铺内的促销活动和服务保障几乎看不到，不能激起用户的购买欲。

首先，让我们一起来了解一下店铺目前的转化率：

可以看到，店铺的转化率远远低于行业水平。

再来看看店铺的流量：

店铺的流量基本上是高于行业平均水平的。

也就是说，店铺通过大量推广提高了访问量，但是由于转化率低下，最终的效果是比较差的，而且店铺较差的用户体验甚至会给用户留下不好的印象，从而影响了以后的销售。

下面我们从三个方面看一下店铺设计方面存在的问题。

一、品牌形象

“乐我”作为一个品牌，就应该具有符合用户定位的品牌特性，这样才能在用户心中留下较深的印象，而且会让用户觉得更专业、更放心。

症状一：品牌logo没有经过设计

品牌的logo作为品牌最具影响力的元素，是最应该精心设计的，通常，一个好的店铺logo需满足以下几个要求：

1.形式美观

2.具有独特性、唯一性

3.符合产品及用户定位

4.突出产品及品牌的特点

但是“乐我”目前的logo只是最简单的文字组合，基本上不满足上面任何一个要求。

症状二：品牌没有符合用户定位的整体视觉设计

整体视觉决定了品牌的风格定位，好的整体视觉具有以下几点好处：

1.让用户赏心悦目，保持舒畅的浏览心情

2.加深用户对品牌的印象

3.让受众用户感觉到归属感，觉得这就是他要找的地方

那么整体视觉又应该符合什么样的标准呢？

1.整体干净清爽，不要让用户的眼睛感受到压力

我们看店铺首页的设计，没有明显的板块划分、两侧的浮动窗干扰视线:

2.配色符合产品及品牌定位，比如受众是少女，可以采用粉红色基调等

3.装饰元素（如纹理、图案等）符合产品及品牌定位，比如受众是少女，那么就可以采用手写风格等

“乐我”目前整体采用的是SDK模版，没有针对受众做特殊设计。

二、用户体验

作为店主的大家，可曾站在用户的角度去浏览过我们的店铺？可曾发现我们的店铺内存在各种各样的浏览障碍？网页作为一个信息的载体，不光是给人看的，更是给人用的，所以体验尤为重要。下面，让我们从用户角度出发，来看看店铺存在的问题。

首先让我们来模拟一下用户操作流程：

上图是一般用户在淘宝购买商品的主要操作流程，可以看到，首页和产品页是用户进入店铺的两个主要入口页面。我们首先来看看首页设计存在的体验问题：

用户进入首页过后的操作主要是搜索产品、查看分类和点击推荐产品，但是目前店铺首页在这三块都存在显著问题，因此很多用户选择离开。

症状三：搜索窗口不够突出

可以看到，搜索框上方是比较显眼的导航，下方是更显眼的焦点图，所以搜索框在中间位置就特别不突出，用户较难找到，体验不好。

症状四：分类混乱无条理

当一个店铺里面的商品品类较多时，用户一定会先选择正确的品类，再通过相关的属性进行筛选。但是我们看目前的店铺导航：

首先最重要的位置不能看到品类分类，其次，虽然其他位置有体现品类分类，但是很不显眼，不在用户方便操作的区域：

症状五：推荐产品不清晰、不符合逻辑

在一个店铺的推荐产品里面，热销和新品是最重要的，其次是重要品类的推荐，但我们看目前店铺首页的推荐：

1.有热销推荐的区域，但是板块太小，不能引起注意，而且TAB标签的设计让商品不能直观地展现给用户。

2.无新品推荐的区域

3.有重要品类的推荐，但是标题栏不显眼

症状六：重点信息不突出

店铺目前所有的文字信息都是采用同等的字号和颜色，没有将重要的信息加以突出，没有层次，不利于用户进行信息筛选：

由于以上几个原因，用户在首页浏览的时候会感到很混乱，毫无逻辑。

我们再来看看产品页的体验问题：

用户进入产品页以后通常会进行以下几个操作：

1.浏览产品信息、购买产品

2.点击推荐商品、关联商品

3.浏览左侧分类，进入店铺其他页面

如果以上三点都存在体验问题，那么用户也可能选择离开。

症状七：产品信息没经过设计，不易于信息浏览

目前店铺产品页的信息都采用大段的文字表现，而我们知道，用户通常更愿意浏览图片，而非文字。所以当用户进入产品页看到大段文字时，购买欲会陡降。

症状八：产品页上方无关联产品

当店铺转化率较低时，我们应该在产品页上方放上推荐活动、产品和关联产品，这样的话即使用户对该产品无兴趣，也能有其他选择，从而降低跳出率。

症状九：产品页左侧分类层次不明显

店铺左侧分类的一级和二级区分不明显，不便于信息筛选。

通过以上八点症状分析出，店铺目前的用户体验存在很大的问题，这是导致转化率低下的重要原因之一。

三、用户购买欲

上图是美国刘易斯提出的AIDAS模型，讲的是用户购买产品的五个步骤，从第二步和第三步可以看出购买欲对于用户完成购买的重要性。下面我们一起来看看“乐我”在激起用户购买欲方面存在的问题。

症状十：店铺优惠信息不突出

优惠信息对于用户的购买是至关重要的，因为这关系到用户最直接的利益。

店铺目前基本上看不到任何的优惠信息，是没有吗？不是的，我们看上图，里面有“满88元包邮”的优惠信息，但是太小，等于没有。优惠信息是最能够激起用户购买欲的，应该体现在最显著的位置。

症状十一：店铺购买保障不突出

用户除了关心优惠信息，还很关心店铺能提供的购买保障，比如是否包退换、是否正品等等。

店铺目前将这些信息放在了页面的最底部，用户基本上看不到，也等于没有。这些保障信息跟优惠信息一样，是能够增强用户购买信心和购买欲的信息，应该重点体现。

症状十二：产品重点不突出

之前已经提及产品页里面信息的表现问题，这些信息还存在另一个问题，就是重点不突出，虽然目前产品的图片很漂亮，很有吸引力，但是还有其他的重点信息也需要着重体现，比如：

以上就是“乐我”店铺在品牌形象、用户体验和用户购买欲三个方面存在的12个显著问题，除了这些问题之外，店铺内还存在很多其他的问题，这里就不一一列举，这些所有的问题，都是影响转化率的重要因素，需要进行优化和修改的。

那么我们在设计店铺的时候，应该采用怎样的流程呢？大家可以借鉴《用户体验的要素》一书中提到的五个层面：

1．战略层：定位企业的商业目标和用户需求

2．范围层：定义需要呈现的信息范畴，来满足“我们想要的”和“用户想要的”

3．结构层：为店铺创建概念结构、交互模型

4．框架层：信息设计、导航设计、界面原型设计

5．表现层：视觉设计

通过这五个层面的整理，我们心中就会有一个比较清晰的设计流程，最终的设计效果也会符合我们的最初定位。设计优化好我们的店铺以后，“内功”就算修炼了一大部分了，之后再进行店铺推广，就能放大效果，从而达到提升销售的最终目的。

原文地址

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

谭砚耘（TOTHETOP至尚国际）

http://www.webusability.cn/ued-report-for-a-store-in-taobao-1310/

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

围绕转化率调整百度账户——大网站百度搜索推广的SEM精算（六）

谭砚耘 — Mon, 05 Mar 2012 13:42:16 +0000

Conversion Rate 转化率是一个好东西，可以告诉你哪些推广是有效的，哪些推广是无效的（点击很少，转化很少），哪些推广是有害的（点击很多，没有转化），从而指引我们正确调整百度账户。

那我们就来说说调整百度账户吧。还是用恬美医疗的例子。

集团名称：恬美医疗

集团简介：是一家广东省知名整形美容连锁机构，业务以医学美容为主

官方网站：www.tmbeauty.cc 恬美医疗总站，主要产品服务站

百度的账户调整包括三个层面，从宏观到微观：

百度账号基本设置调整，可以参照前文《大站SEM之百度搜索推广（二）：账号设置》

百度目录树上某个目录的设置和调整：包括目录的推广地区，推广时段，否定关键词，排除IP等

关键词价格调整：对某个关键词价格的变更。

一、百度账号基本设置调整

调整的工作是：修改推广总金额、修改推广地域、IP排除等。

这种调整涉及整个账户，别每天一次怎么勤快怎么来。

第一次设置需要规划，以后的调整也需要步骤。

尤其是对于一些季节性销售的产品，不能只看着眼前数据的扰动，就打乱已有的步调。

二、目录树上某个目录的调整

调整的工作是：修改目录推广金额、修改目录推广地域、目录否定关键词、目录IP排除等。

回忆一下《大站SEM之百度搜索推广（三）：搭建茁壮的目录树》提到，目录树上大概有11类目录，包括

目标型目录

目标复合型目录

信息型目录

事务型目录

事务复合型目录

黄金目录

补漏目录

竞品目录

长尾目录

实验目录

危险目录/风险监控目录

哪些目录值得我们时时关注并经常调整呢？很明显：

第一位：黄金目录

第二位：危险目录

第三位：事务型事务复合型目录

第四位：实验目录

第五位：补漏目录

以上排位绝对分先后，先后的依据就是消耗金钱的速度和价格的高低。

黄金目录是最贵的，点击量最大的，所以放在第一位。

危险目录可能造成大的损失，需要时时关注。

事务型和事务复合型查询占了40%以上的用户搜索，消耗费用自然也是巨大的。

实验目录是为了寻找新路子，需要经常关注。

补漏目录也是相对点击费用较高的目录。

对于以上目录，我们需要观察转化率变化趋势，从而对目录设置进行调整。

基本原则是，高转化率的目录可以投入更多一些，时间段更宽一些，地域更广一些。低转化率的目录可以投入少一些，限制时间段到黄金时间，限制地域到重点区域。

三、关键词价格调整

由于新凤巢革命性的采用了跨层级架构，所以我们可以很方便的调整关键词价格。

等等、等等，有人会说：你有10000个关键词，再怎么样省力也得改个七荤八素吧。

实际上，关键词价格调整的工作很简单，因为我们会结合转化率一起考虑。

下面说说怎么做，当你的百度统计运行了一段时间，就会累积大量的数据：

第一步在关键词标签下，按照点击率排序，找出点击量最大的100个关键词

第二步查看转化率，并作出调整

对于转化率超低的关键词，可以考虑将“短语”匹配修改为[精确]匹配，或者修改目标网页，总之要尝试一些方法，看看转化率有没有改善，否则干脆降价或删除该关键词了事。对于转化率较高的关键词，则可以适当调高价格，提升排名。

所以你看到了，10000个关键词，实际上只需要跟踪最关键的100个，并没有多大困难。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

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

http://www.webusability.cn/adjust-baidu-account-via-conversion-rate-baidu-sem-for-big-website-promotion-1211/

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

转化不是浮云——大网站百度搜索推广的SEM精算（五）

谭砚耘 — Thu, 01 Mar 2012 14:51:51 +0000

大站在做百度推广时，需要设定可追溯来源的转化目标（Goals），从而对百度推广账号做出合理改进。

有人可能问：啥叫转化目标啊？这里扫扫盲：

做百度推广，用户点击广告来我们网站，目的肯定不仅仅希望用户说“我靠，这网站帅呆了”。我们希望用户被转化成客户，具体体现在：

拿起电话call我们的销售热线

在网上直接购买

把我们的网站收藏

填写订单或试用表格

下载我们的软件

对网站形成美好的感觉

……

以上，就是不同形式的转化目标。

具体到我们的例子：

集团名称：恬美医疗

集团简介：是一家广东省知名整形美容连锁机构，业务以医学美容为主

官方网站：www.tmbeauty.cc 恬美医疗总站，主要产品服务站

比较明显的转化目标是：

第一种：用户通过首页在线沟通和我们联络

第二种：用户拨打24小时热线和我们联络

第三种：用户通过网站反馈系统提交了个人信息给我们

第四种：用户收藏恬美医疗的网站

第五种：用户直接转账给我们——这是最好的情况

还有两种转化，可能没那么明显，但也不可忽视：

第六种：用户访问网站超过了5个页面

第七种：用户访问网站时间超过10分钟

第八种：用户进入了联系我们页面。

第六第七种情况，说明用户网站有了密切长期的接触，对我们的产品感兴趣。

第八种则意味着用户希望查看我们的联系方式，希望和我们接触，也是有效转化。

我们有了以上8种转化，那么大家看看，以上8种转化，哪些可以量化并比较容易的观测其来源呢？

第一种：一般在线沟通工具都可以监控到搜索关键词，来源可追溯

第二、四、五：均无法追溯来源。

第三种：可追溯来源，前提是安装了百度统计代码在网页中。每次订单成功提交，百度统计代码就会记录。

第六、七、八：安装百度统计代码，可以追溯来源。

我们看看百度统计中的效果：

上图红色框显示了三种转化方式：

提交订单，进入联系我们页面——属于事件跟踪

时长目标——访问时间超过10分钟，计一次转化

访问页数目标——访问5个页面以上，计一次转化

上图蓝色框第一列是转化次数，第二列是转化率。

上述的转化目标的局限性主要体现在：

1. 访问时长是不准确的转化目标。因为用户一进入恬美医疗的网站，马上关闭浏览器，百度统计无法判断这种情况。所以这种转化值虚高。(备注by谭砚耘2012-5-12 这一点百度统计自称已经找到解决方案，能够统计出用户离开最后一个页面的时点)

2. 一部分用户访问了“联系我们”页面，会计算转化一次。然后看多两个其他页面，又会计算为一次转化。最后这个用户提交了订单，会第三次计算转化。也就是说转化重复计算了。

3. 访问时间长，不一定代表用户粘性高，也许是网站无法迅速满足用户需求，用户反复查找的原因。同理，访问页面多，也可能是网站导航或可用性差，使用户无法一下子到达目的地造成的。

有了以上局限性，我们仍然可以继续使用，毕竟瑕不掩瑜，通过时长、页面数、和指定页面，我们可以比较百度关键词的转化率高低，从而有的放矢的调整不同关键词推广价格。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

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

http://www.webusability.cn/proper-goals-baidu-sem-for-big-website-promotion-1206/

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

怎样用流量分析工具逼近转化率真相

谭砚耘 — Tue, 28 Feb 2012 07:30:00 +0000

以网络销售为主的B2C网站，最关心转化率（CR）和投资回报率(ROI)。善用在线统计数据，使用谷歌或百度提供的流量分析系统提供的自定义工具，可以得出相对精确的转化率，从而估算投资回报率，评估营销活动的效果。这是较基础的访问分析，里面的举例与真实B2C网站关心的问题还是有出入的，但可以以此说明以下几个重要的自定义工具：

Custom Reports 用户自定义报告

Cusom Segments 用户自定义数据细分（可能翻译不准）

Metric Dimension Setting 设定指标和维度

DIY Filter 自定义过滤器

使用上面四组自定义工具，可以细化流量数据，尽量解决你期望的CR或ROI数据。

用一个实例来说明：

网站访问数量（visits）统计

这是一个基本数据，局限性是太笼统，只能看到网站访问量在逐渐增加而已

我们希望看到新访问的占比。

初次访问量

我们希望了解初次进入网站的访问的数量，因为这个数量直接和外部推广或者网站的口碑有关。

于是，我们进入Custom Reports，在Filters里面建立维度Visitor Type 正则匹配new，然后点击保存。如下图

然后看到了初次访问量的数据，如下图。和之前的统计图没什么区别，除了列表的维度少了returning cusotmers这一行。

初次访问，来自美国，着陆页（登陆页）是首页

同理，进入Custom Reports，在Filters里面建立维度Visitor Type 正则匹配United States，维度Landing Page匹配/，然后点击保存。如下图

得到如下数据报告。可以看到下图蓝色框的数字是1528，比总的初次访客136589小了很多。美国的新客户还是蛮少的，这说明了什么呢？是不是我们的网站对巴西、俄罗斯、欧洲客户吸引力更强，还是网站在美国的力度不够？

初次访问，来自美国，着陆页是首页、访客浏览超过3页

条件增加了一项“访客里浏览超过3页”，为什么要增加这一项？举个例子，某个用户搜索“ipad”，来到了某B2C电商iPad配件销售网站 www.webusability.cn。用户的搜索行为大致分成三类：第一，要买iPad而不是配件，不是俺们客户；第二，要搜索iPad的软件，不是俺们客户；第三，要购买iPad配件。我们关心第三类，这是潜在客户。

第三类客户进了网站，也有两种行为：a，看网站很丑，或者在着陆页看不到iPad配件，或者不太信任这个站点，访问了1个或2个页面就跑了；b，看网站还行，于是开始点击导航或者搜索。这里的a类和b类客户，都是电商数据分析所关心的。a类典型指标是跳出率和回访率，b类典型指标就是访客粘度，包括了访问页面数、访问时长、站内搜索次数。

所以，我们增加了“访客浏览超过3页”，就定位了那些对网站有兴趣的第三类中得b类客户的大部分。这部分客户搜索意识明确，对网站的产品也有一定兴趣，是机会较大的潜在买家，这个人群很有分析价值。

好，那我们怎么定位“方可超过3页”这个指标呢？——通过Custom Segment，见下图

上面定义了一个“数据细分”，名字叫 Active-PageOver3。判断指标Page Depth的数值大于3。

然后到报告页面，选择左上角的“Advanced Segment”，选择刚刚自定义的指标。如下图

然后就看到了“访问页数大于3”的统计，如下图。可以看到蓝色框的数字变成了789，比1528又少了一半。也就是说大约一半的用户，访问页面的次数是1次、2次和3次，这部分用户为什么会走呢？

初次访问，来自美国，着陆页是首页、页面数超过3 的转化率

之前看到的数据都是访问数量，而我们更关心转化率，也就是下订单或交钱的人占访问量的比例。

先在Custom Reports的Metrics添加一个转化率指标：

然后看看报告，如下图。蓝色框的部分看到，转化率是14.83%，似乎还挺高的，:) 转化率和你设定的目标有关，和用户类型也有关，我们前面设定的用户群是访问超过3个页面的美国用户，对比其他类型的用户，这个转化率的确较高。

不过上面的时间折线图，还是显示的访问量，我想直接看转化率的时间折线图，怎么办呢？很简单，点击图形上方的转化率模块，就能看到了。为了更好的看到转化率趋势，我们又点击了右上角的Group，将时间单位设置为week，得到下图：

通过上述的步骤，运用google提供的自定义报告、自定义数据细分、自定义维度指标、自定义过滤器，我们就可以将原来比较模糊的转化率相对准确的定位，还原转化率真相，为营销提供支持。当然实际操作的过程更加复杂，数据扰动带来的影响也更加大。欢迎交流。

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

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

http://www.webusability.cn/how-to-discover-truth-of-cr-roi-by-flow-rate-analytics-tools-1370/

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

10000关键词，淡定or蛋疼？——大网站百度搜索推广的SEM精算（四）

谭砚耘 — Sun, 26 Feb 2012 17:45:55 +0000

理论上，百度关键词可以无限添加，而且是免费的。但如果你的账号有10000个关键词，则带来三方面苦恼：

苦恼一：不知道哪里找那么多关键词。

苦恼二：添加关键词不要钱，但关键词一多，被点击的几率就大，推广费用也会随之上升。

苦恼三：关键词如果达到10000的时候，管理维护这些关键词就变成了灾难。

蛋痛还是淡定——要具体分析。

苦恼一，很容易解决，百度推广的web界面和百度助手都提供了关键词推荐工具，可以很方便的找出一大堆有用、无用或有害的关键词，数量不是问题。

苦恼二，如果通过适当的转化率和投资回报率分析，可以将低效关键词的费用大大压缩。如何通过百度统计分析转化率和投资回报率，参见《转化不是浮云——大网站百度搜索推广的SEM精算（五）》。

苦恼三，也是大多数大站遇到的。在关键词的海洋中，我们茫然无措，不知道从何下手。现在笔者说说自己的经验：

为了以后举例方便，我们继续使用以下虚拟的例子：

集团名称：恬美医疗

集团简介：是一家广东省知名整形美容连锁机构，业务以医学美容为主

官方网站：www.tmbeauty.cc 恬美医疗总站，主要产品服务站

上一篇文章《大站SEM之百度搜索推广（三）：搭建茁壮的目录树》提到，我们首先要建立目录树主干，包括：

目标型目录

目标复合型目录

信息型目录

事务型目录

事务复合型目录

为了更好的管理关键词，还需要建立平行的六大辅助枝干：

黄金目录

补漏目录

竞品目录

长尾目录

实验目录

危险目录/风险监控目录

上述11个目录，共同构成了茁壮的目录树。而这颗目录树，总共长着10000片树叶，也就是关键词了。

如何管好10000个关键词，要重点说说六大辅助枝干：

一、黄金目录

关键词数量：30个以内

特点：点击最多、价格最高、竞争最大的词放在该目录内

技巧：全部使用[精确]匹配，避免很多无效与恶意点击

黄金代表“贵”和“重”，黄金目录也同样。对恬美医疗而言，这样的黄金关键词不超过20个，而且绝大多数都是事务型搜索词，如：

丰胸手术

胸部整形

隆鼻

双眼皮

垫下巴

激光嫩肤

美白

嫩肤

祛斑

抽脂

这些词，是所有竞争对手都重点投广告并重点关注排名的。同样也是恶意点击的高发区。

非常痛苦的是，这部分黄金关键词也是用户最常输入的搜索词，是获得用户的有效途径。

这些词，一般一次点击费用都在10元以上，有的会超过20元。

从转化率而言，这部分词都有适中的转化率，不高也不低，但从推广的投入来看，一定是最大的。

一般来说，一个账号20~40%的费用，都会消耗在黄金关键词上。

这个目录的所有关键词，建议采用[精确]匹配模式，可以避免很多无效以及恶意点击。不过有人会问，如果采用精确匹配，岂不是也会过滤很多有效点击？这就是下一节要说的——

二、补漏目录

关键词数量：30个以内

特点：关键词语黄金关键词相同，价格比黄金词低

技巧：全部使用“短语”匹配

补漏目录是伴随黄金词一起出现的。当用户想做抽脂减肥手术时，通常最多情况，会在百度搜索

“抽脂”——这是一个黄金词

不过也有很多人会搜索

“抽脂手术” ——补漏词的短语匹配功能可以捕捉到这个搜索

“抽脂安全么”——补漏词的短语匹配功能可以捕捉到这个搜索

“抽脂医院”——补漏词的短语匹配功能可以捕捉到这个搜索

补漏目录，采用和黄金目录完全一样的关键词，唯一不同的是采用短语匹配模式。

三、竞品目录

关键词数量：100个以内

特点：包含竞争对手品牌或特有服务的关键词

技巧：全部使用“短语”匹配

竞品目录，包含了竞争对手的品牌或者独有产品对应的关键词。

比如恬美医疗的竞争对手包括鹏爱整形医院，博爱医院，线下广告多，名气比恬美医疗大。所以会有很多搜索用户直接搜索：

博爱整形

鹏爱减肥

博爱眼科

博爱瘦身

上述搜索词属于目标性以及目标复合型，恬美医疗可以建立竞品目录，存放这类关键词。并在创意上做文章，比如当用户搜索“博爱整形”，看到恬美的广告创意：

博爱整形? 我更信任选恬美
韩国整形团队，10年本地化服务
本月前20位用户尊享5折优惠
www.tmbeauty.cc

这叫什么？这叫截胡！不过这种方法要慎用，除非你有足够打动人心的优惠或折扣，或者你在某方面服务的确优胜，否则效果不咋地。因为用户搜索“博爱整形”时，已经初步选定了博爱，你想横刀夺爱，必须有足够的说服力，否则这类关键词的转化率不会很高。

四、长尾目录

关键词数量：10000个，甚至更多，分成上百个目录

特点：各种各样的长尾词、生僻词。可以设置较低的价格。

技巧：全部使用“短语”匹配

长尾目录，顾名思义，就是放长尾关键词的目录。

有些关键词，可能1年才会有人搜索一次，你的绝大多数竞争对手都不会用这种词，你则可以用很低的价格把搜索客户吸引过来。

举个例子，关键词“整形医院广州最大是哪家啊”，这样的关键词简直是匪夷所思，不过还真有人搜索。

长尾目录不仅仅是一个目录，对于10000个关键词的目录，9000个都属于长尾词。你的目录的样子可能是：

长尾目录1

长尾目录2

长尾目录3

……

长尾目录90

长尾目录，因为数量太多，不需要时时关注。有需要的时候，通过目录树查看一下最多点击、转化率最高或最低的词。

长尾词中比较好的，可以转移到主干目录中。长尾词中转化率奇低但很烧钱的，就直接删除，或者改低价格。

五、实验目录

关键词数量：20个~50个

特点：稀奇古怪的想法，都可以在这里做实验。不成功就推倒重来。

技巧：各种匹配方式都可以尝试

实验目录，就是为了做实验，各种稀奇古怪的想法都可以往里放。举个例子，有些用户可能会搜索拼音：

jianfei 对应减肥

chouzhi 对应抽脂

lianbuzhengxing 对应脸部整形

完全可以做做实验，看看效果如何。如果有效的话，这部分关键词可以归入主干关键词。

还有一种，就是明显的错字，比如把“抽脂手术”写成“抽纸手术”，中国这么大，各种搜索词都可能出现。而且有些错误率发生还蛮高的。比如：邮箱登录经常写成邮箱登陆，这已经成为习惯了。

六、危险目录/风险监控目录

关键词数量：20个~50个

特点：稀奇古怪的想法，都可以在这里做实验。不成功就推倒重来。

技巧：各种匹配方式都可以尝试

有一些词，可能是危险词。比如“减肥”，你只要一放上去，1小时内就会被点走1000元，一天数万元就不见了。

有的用户好多天都没有发觉，直到一周后发现账户没钱了，才去找百度晦气，当然不会讨回公道了。

所以，当我们添加一些可能消耗大量金钱的热门关键词时，为了避免上述损失，可以先放到危险目录中。通过限制危险目录的投放金额，从而达到约束风险的目的。

百度有一个类似的功能，叫“监控文件夹”。不过这个监控文件夹无法限制投放金额，只是容易隔离观察而已。

善用以上目录，我们可以有重点的区分管理10000个关键词了。但在实操中，会遇到一个问题，你开始并不知道哪些关键词是黄金词，哪些是危险词，怎样根据关键词创造的价值来调整关键词价格呢？请看《转化不是浮云——大网站百度搜索推广的SEM精算（五）》

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

版权属于: 谭砚耘（TOTHETOP至尚国际）

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

http://www.webusability.cn/running-10000-keywords-baidu-sem-for-big-website-promotion-1201/

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

用户体验与可用性设计

页面重构不可忽略UED、WPO和SEO的工作

防范恶意点击与IP黑名单——大网站百度搜索推广的SEM精算（十四）

调整网站着陆页——大网站百度搜索推广的SEM精算（十三）

1. 不同的搜索词和搜索创意，对应不同的着陆页

2. 着陆页应该与广告创意相呼应

3. 着陆页应该有行动号召力

调整日预算、地域限制、否定关键词、推广时段——大网站百度搜索推广的SEM精算（十二）

调整广告计划日预算

调整广告计划地域限制

调整否定关键词

调整推广时段

调整创意和创意链接——大网站百度搜索推广的SEM精算（十一）

正规整形美容 恬美医疗8折酬宾

大长今 我也要，整形美容来恬美

不为哥为寂寞 恬美整形美容

收集整理：IIS6下WordPress伪静态URL出错的解决方法

大型在线应用更快响应时间的实现方法——来自Google架构师 Jeff Dean

一、标准的改善延迟的技巧

二、同步中断

三、建立系统的容错能力和容可变能力

四、负载均衡

五、加速灾难恢复

六、建立动态和静态镜像服务器

七、延缓容易诱发延迟的因素

八、优化请求过程中的可变因素

九、数据独立错误——没看懂，哪位帮忙看看，评论一下

十、金丝雀错误——开始没看懂，后经热心网友点拨，正确解释见下文

十一、Request Backup处理机制（用多服务器换性能）

十二、容许“被玷污”的数据

十三、硬件上面做文章

转发：结合新浪微博改版 说说bigpipe中的页面构建优化

调整关键词位置——大网站百度搜索推广的SEM精算（十）

黄金目录

危险目录

实验目录

补漏目录

日常维护综述——大网站百度搜索推广的SEM精算（九）

WPO工具：表格化的WPO检测工具

第一部分，网页基本数据，如下图：

第二部分，每个网页组件的具体性能表现

最后的1米，WPO和UED ——大网站百度搜索推广的SEM精算（八）

WPO基础：再说瀑布图

WPO基础：减少HTTP请求

巧做网盟推广——大网站百度搜索推广的SEM精算（七）

转发：一个淘宝网店的用户体验诊断书

围绕转化率调整百度账户——大网站百度搜索推广的SEM精算（六）

转化不是浮云——大网站百度搜索推广的SEM精算（五）

怎样用流量分析工具逼近转化率真相

网站访问数量（visits）统计

初次访问量

初次访问，来自美国，着陆页（登陆页）是首页

初次访问，来自美国，着陆页是首页、访客浏览超过3页

初次访问，来自美国，着陆页是首页、页面数超过3 的转化率

10000关键词，淡定or蛋疼？——大网站百度搜索推广的SEM精算（四）

一、黄金目录

二、补漏目录

三、竞品目录

四、长尾目录

五、实验目录

六、危险目录/风险监控目录

正规整形美容恬美医疗8折酬宾

大长今我也要，整形美容来恬美

不为哥为寂寞恬美整形美容

转发：结合新浪微博改版说说bigpipe中的页面构建优化