1.
Kyle Rush是一个网站工程师。
2011年6月，他加入BarackObama.com，负责设计2012美国大选的奥巴马官网。
（图为2011年6月的奥巴马官网）
除了宣传，官网的主要目的就是筹款。
上一次大选，奥巴马筹到了6.9亿美元。这是一个很大的数字，但由于过去4年美国经济一直没有起色，本次大选势必要投入更多的资金，团队内部估计资金需求将达到创纪录的10亿美元。
一个筹集10亿美元的网站，历史上从来没有过。Kyle Rush不知道自己能否做到，但是他很清楚，如果筹不到钱，奥巴马没法赢得大选。
2.
2012年美国大选现在已经结束了，奥巴马有惊无险地击败了罗姆尼。他最终筹到了11亿美元，成为历史上筹款金额最高（也是花钱最多）的总统候选人。（排在第二位的就是罗姆尼，他也筹到了10亿美元。）
这11亿美元之中，线下筹集了4.1亿，线上筹集了6.9亿。单单BarackObama.com一个网站，就创造了2.5亿美元的捐款。
在6个月的时间里，BarackObama.com共有
* 17,807,917个访问者，81,548,259次页面访问
* 4,276,463次捐款
* 捐款转化率24%（每四个访问者，就有一人会捐款）
这样辉煌的成绩，是如何取得的？
3.
制作一个超大流量的、体验良好的、能够说服人们捐款、并能安全快速处理这些捐款的网站、绝非易事。
最近，Kyle Rush写了一篇文章，披露了许多内幕，从技术角度总结了BarackObama.com的制作心得。下面，我们就来看看奥巴马的技术团队是怎么做到的。
（图为2012年5月的奥巴马官网）
网站的制作班子，从2011年下半开始组建，Kyle Rush是第一个加入的前端工程师，负责网页的外观和用户体验。
一开始，网站放在团队自购的服务器上，运行和捐款都还算平稳。但是，随着竞争不断加剧，局势变得令人担忧了。到了2012年5月，罗姆尼当月的筹款金额第一次超过了奥巴马。
竞选总部决定，网站必须改版，尽一切可能争取捐款。于是，技术团队开始大规模的扩充，全职的前端工程师从1个人扩充到了14个人，其中6人专门负责制作筹款页面。
4.
技术团队做出的第一个决定是，使用静态网站生成器Jekyll，用静态网页取代动态网页，加快网页打开速度。网站的打开应该越快越好。有研究称，打开速度每慢100毫秒，Amazon的销售额就下降1%。
第二个决定是，将全部网页放上CDN，使用的服务商是Akamai。它是世界最大的CDN供应商，共部署了50000多台服务器，美国各地都能获得理想的访问速度。奥巴马芝加哥竞选总部，可以在20毫秒内载入官网的HTML网页。
第三个决定是，将捐款的后台做成API调用。这是因为有23%的访问者使用移动设备，所以必须部署多个前端（Web端和移动端）。使用API，可以让不同前端以相同方式与后台通信，彼此之间用JSON格式传递信息。
第四个决定是，后台用PHP语言开发，放在Amazon的EC2平台上。
第五个决定是，为了避免宕机，开发两个后台。一旦一个系统停止工作，立刻自动切换到另一个。这点很重要，因为宕机不仅影响士气，而且经济损失巨大。因为捐款每分钟都在涌入，最高记录是一小时300万美元，你不能让它停下来。
5.
新网站初步完成后，使用webpagetest.org进行测试，结果令人鼓舞。
原版页面4秒钟后还没载入，新版只用1秒就可以看到。整个平台的访问速度上升了60%，捐款转化率增加了14%。
接下来，就是微调页面的各种细节，一共进行了240次a/b测试，也就是说，至少迭代了240个版本。
调整后的页面，视觉效果和用户体验都有了巨大的提升（点击看大图），捐款转化率因此又提高了49%。。
随着奥巴马的当选，BarackObama.com共进行了1101次前端部署。
6.
事实证明，整个开发方案非常成功，顺利完成筹款任务，没有一分钟宕机。
Kyle Rush感到有必要总结，留下记录。除了上面的开发过程，他还提到前端团队使用的工具：版本控制Github ，a/b测试管理Optimizely，代码编译CodeKit。
Kyle Rush最后总结说：
"我百分之百肯定，这是我经历过的最好的开发环境。我们不断调整，捐款转化率的提高令人难以置信。整个团队感到无比满足。但是，最高兴的还是看到，2013年1月21日巴拉克·奥巴马依然是美国总统！"
（完）
Raly 说：
有一点疑问，捐款转化率的提升，完全是由于前端的改进和用户体验的增强而实现的吗？
2012年12月14日 16:52 | # | 引用
HBBZ 说：
震撼。想到了当年抗战时期打通印缅公路，筹款对于一项事业来说就是打通构思和实现之间的道路。按比例来看，有意愿有能力支持原创者的网志读者是很可观的，可是创作者和读者之间的联系被诸多因素给挡得死死的，例如：
1、支付宝的最低2元手续费和Paypal的“5%+$0.05”手续费。
2、操作过程的用户体验恶劣；
3、对公益募捐的提倡和支持不够；等等
前两个瓶颈使用比特币支付可以很好地解决，例如，比特币交易的手续费不到0.5元，支付和收款操作过程非常便利，这段时间在下正在研究第三个问题。
2012年12月14日 16:55 | # | 引用
Henry 说：
能公布捐款明细吗？
难道这些捐款是1美元/人这样捐的吗，也许就是几个财阀在捐款吧，没啥流量拥挤的。
考虑到手持设备等的访问，界面做的挺简洁的，这似乎是趋势
2012年12月14日 17:14 | # | 引用
Hungyuhei 说：
『版本控制用 Github』这个说法不对啊，应该是版本控制用Git ，代码托管用 Github
2012年12月14日 19:09 | # | 引用
autoxbc 说：
可以去搜索一下 a/b 测试，足够说明问题。
420万个人选民捐款金额较小，他们的捐款在奥巴马筹款总额中所占比例超过55% http://news.xinhuanet.com/world/2012-11/07/c_123922186.htm 吹毛求疵没意义，而且原文也没有歧义。2012年12月14日 21:13 | # | 引用
邓安良 说：
这是不是意味着我们这些程序员也开始影响世界格局了！
2012年12月14日 21:19 | # | 引用
Bruce You 说：
非常好的经验分享，有很多实用的东西，谢谢一峰
2012年12月14日 22:26 | # | 引用
奔放的胸毛。 说：
点了一下页面上的广告，以表支持。
2012年12月14日 23:58 | # | 引用
firefly 说：
我也点了，支持一下！
2012年12月15日 13:13 | # | 引用
YangZX 说：
2012年12月15日 20:42 | # | 引用
嘉佑 说：
罗姆尼也有这样的人啊，要不然他不会筹到 10 亿美金，所以奥巴马取胜并不是因为他多筹款了 1 亿美金。
2012年12月15日 22:05 | # | 引用
Homeway 说：
自己开发API，怎么开发呢？ 文中的“API调用”，是？
2012年12月15日 23:45 | # | 引用
15640138121沈阳 说：
阮一峰你什么意思删我留言
2012年12月16日 00:11 | # | 引用
Sutra 说：
有个什么微支付的概念。
2012年12月16日 09:02 | # | 引用
冰块 说：
这文章挺好的，谢谢。
刚才试着支付一块钱支持这个文章，不过对我这样极少使用支付宝的人来说，挺折磨的，还要插证书。
2012年12月16日 09:37 | # | 引用
五折 说：
我突然想起12306
这么大的流量，这么严肃的气息
然后我又想起usa点gov和gov点cn给人的感觉
2012年12月16日 12:46 | # | 引用
abc 说：
看到上面有几条留言，感觉像看到了一个曾经的自己：找不到重点。
2012年12月17日 02:18 | # | 引用
Ivan 说：
我还以为是分析捐钱的动机
2012年12月17日 14:43 | # | 引用
冯大宝 说：
我觉得只列出奥巴马的网站，然后说做的多好，然后就说是因为网站改版，而多筹了多少钱，可能不太有说服力。
如果能同时列出罗姆尼和奥巴马两个人的网站，然后比较后发现奥巴马的网站确实比罗姆尼的好，那才有说服力。
比如用pagespeed 或者就用文章里说的 webpagetest.org，把两个网站的速度等各方面性能做个比较，应该很有意思。
还有，作者Kyle Rush是很厉害，但网站改进，另一个更大的原因可能是人员的增加。多少投入才能有多少产出。
这应该给老板们看一下，网站要改进的话，人员必不可少。引用原文“全职的前端工程师从1个人扩充到了14个人，其中6人专门负责制作筹款页面”
2012年12月18日 15:09 | # | 引用
virusswb 说：
首先感谢作者分享这么好的案例，更感谢原作者分享这么好的案例。
其次想说一下，有几个脑残的回复，作者不要在意，有些人的逻辑有问题，说话颠三倒四的，不关心主题，尽关心一些毛！
不好意思，发了一些牢骚！
2012年12月20日 09:15 | # | 引用
海纳百川 说：
写的很好，支持你的文章。
2012年12月20日 14:45 | # | 引用
甄码农 说：
CDN,PHP,JSON API小版本部署。如果再详细一点就好了
2012年12月20日 16:48 | # | 引用
甄码农 说：
还有静态化
2012年12月20日 16:50 | # | 引用
AllenChang 说：
静态化，分布式，JSON，PHP，现在网站不都是这样吗，没有吸引人的地方
2012年12月21日 14:45 | # | 引用
熊猫家族 说：
还是的需要静态化，
2012年12月23日 11:27 | # | 引用
PHP乐知博客 说：
不完全是吧，主要还是有忠实的用户，奥巴马的支持者，再加上好的性能和体验，所以转化率的是就有保障了。
2012年12月30日 17:06 | # | 引用
asparagus 说：
支持阮兄~~10元笑纳~~
2013年1月14日 22:49 | # | 引用
weblol 说：
第二遍看了，非常好的经验分享，特别对于我这样没有过大项目经验的人。
2013年1月23日 11:42 | # | 引用
lijsh 说：
更正一下吧，原文提到的捐款转化率是提升了49%的，比14%可给力多了
2013年8月20日 16:45 | # | 引用
bsspirit 说：
非常震撼的文章，是前端体验的经验，非常值得思考！！
可惜了，看到太晚了！不过，非常受用！
2013年8月25日 11:03 | # | 引用
yanpsycho 说：
一开始是14%, 后来提升了14%，就是14% x (100% + 14%) = 15.96%,
之后再提升了49%，就是 15.96 x (100% + 49%) = 23.7804%。
不是提升到49%。
2013年11月10日 15:52 | # | 引用
Max 说：
后台为啥用PHP呢？这点我不明白。
2013年12月23日 12:28 | # | 引用
maxium 说：
奥巴马看来喜欢当总统多过让米国人民享受医疗服务。
参看obamacare网站的烂样子。
当然一个用来收钱，一个用来换钱，花的心思不一样很正常了。
2014年2月26日 03:32 | # | 引用
dennyzhang 说：
好意思的故事，请教你是如何理清这个故事脉络的呢？
2014年6月 5日 09:39 | # | 引用
jlx 说：
* 17,807,917个访问者，81,548,259次页面访问
* 4,276,463次捐款
* 捐款转化率24%（每四个访问者，就有一人会捐款）
2.5亿 4276463次捐款，平均每次58美元。美国人做慈善也是这样，每人一点，不像我们是财阀在做。
2015年5月22日 13:25 | # | 引用
饼干 说：
这么点页面访问也有脸说，还没上亿
2016年9月23日 17:02 | # | 引用
duangyi 说：
我点了一下广告，以表支持。但是我只是点进去没有去听课程，这转化率是不是又降了。哈哈...
2017年6月 3日 23:48 | # | 引用