案例分析：奧巴馬籌款網(wǎng)站的制作過程

Kyle Rush是一個(gè)網(wǎng)站工程師。

　　2011年6月，他加入BarackObama.com，負(fù)責(zé)設(shè)計(jì)2012美國(guó)大選的奧巴馬官網(wǎng)。

　　(圖為2011年6月的奧巴馬官網(wǎng))

　　除了宣傳，官網(wǎng)的主要目的就是籌款。

　　上一次大選，奧巴馬籌到了6.9億美元。這是一個(gè)很大的數(shù)字，但由于過去4年美國(guó)經(jīng)濟(jì)一直沒有起色，本次大選勢(shì)必要投入更多的資金，團(tuán)隊(duì)內(nèi)部估計(jì)資金需求將達(dá)到創(chuàng)紀(jì)錄的10億美元。

　　一個(gè)籌集10億美元的網(wǎng)站，歷史上從來沒有過。Kyle Rush不知道自己能否做到，但是他很清楚，如果籌不到錢，奧巴馬沒法贏得大選。

　　2.

　　2012年美國(guó)大選現(xiàn)在已經(jīng)結(jié)束了，奧巴馬有驚無險(xiǎn)地?fù)魯×肆_姆尼。他最終籌到了11億美元，成為歷史上籌款金額最高(也是花錢最多)的總統(tǒng)候選人。(排在第二位的就是羅姆尼，他也籌到了10億美元。)

　　這11億美元之中，線下籌集了4.1億，線上籌集了6.9億。單單BarackObama.com一個(gè)網(wǎng)站，就創(chuàng)造了2.5億美元的捐款。

　　在6個(gè)月的時(shí)間里，BarackObama.com共有

　　* 17,807,917個(gè)訪問者，81,548,259次頁面訪問

　　* 4,276,463次捐款

　　* 捐款轉(zhuǎn)化率24%(每四個(gè)訪問者，就有一人會(huì)捐款)

　　這樣輝煌的成績(jī)，是如何取得的?

　　3.

　　制作一個(gè)超大流量的、體驗(yàn)良好的、能夠說服人們捐款、并能安全快速處理這些捐款的網(wǎng)站、絕非易事。

　　最近，Kyle Rush寫了一篇文章，披露了許多內(nèi)幕，從技術(shù)角度總結(jié)了BarackObama.com的制作心得。下面，我們就來看看奧巴馬的技術(shù)團(tuán)隊(duì)是怎么做到的。

　　(圖為2012年5月的奧巴馬官網(wǎng))

　　網(wǎng)站的制作班子，從2011年下半開始組建，Kyle Rush是第一個(gè)加入的前端工程師，負(fù)責(zé)網(wǎng)頁的外觀和用戶體驗(yàn)。

　　一開始，網(wǎng)站放在團(tuán)隊(duì)自購的服務(wù)器上，運(yùn)行和捐款都還算平穩(wěn)。但是，隨著競(jìng)爭(zhēng)不斷加劇，局勢(shì)變得令人擔(dān)憂了。到了2012年5月，羅姆尼當(dāng)月的籌款金額第一次超過了奧巴馬。

　　競(jìng)選總部決定，網(wǎng)站必須改版，盡一切可能爭(zhēng)取捐款。于是，技術(shù)團(tuán)隊(duì)開始大規(guī)模的擴(kuò)充，全職的前端工程師從1個(gè)人擴(kuò)充到了14個(gè)人，其中6人專門負(fù)責(zé)制作籌款頁面。

　　4.

　　技術(shù)團(tuán)隊(duì)做出的第一個(gè)決定是，使用靜態(tài)網(wǎng)站生成器Jekyll，用靜態(tài)網(wǎng)頁取代動(dòng)態(tài)網(wǎng)頁，加快網(wǎng)頁打開速度。網(wǎng)站的打開應(yīng)該越快越好。有研究稱，打開速度每慢100毫秒，Amazon的銷售額就下降1%。

　　第二個(gè)決定是，將全部網(wǎng)頁放上CDN，使用的服務(wù)商是Akamai。它是世界最大的CDN供應(yīng)商，共部署了50000多臺(tái)服務(wù)器，美國(guó)各地都能獲得理想的訪問速度。奧巴馬芝加哥競(jìng)選總部，可以在20毫秒內(nèi)載入官網(wǎng)的HTML網(wǎng)頁。

　　第三個(gè)決定是，將捐款的后臺(tái)做成API調(diào)用。這是因?yàn)橛?3%的訪問者使用移動(dòng)設(shè)備，所以必須部署多個(gè)前端(Web端和移動(dòng)端)。使用API，可以讓不同前端以相同方式與后臺(tái)通信，彼此之間用JSON格式傳遞信息。

　　第四個(gè)決定是，后臺(tái)用PHP語言開發(fā)，放在Amazon的EC2平臺(tái)上。

　　第五個(gè)決定是，為了避免宕機(jī)，開發(fā)兩個(gè)后臺(tái)。一旦一個(gè)系統(tǒng)停止工作，立刻自動(dòng)切換到另一個(gè)。這點(diǎn)很重要，因?yàn)殄礄C(jī)不僅影響士氣，而且經(jīng)濟(jì)損失巨大。因?yàn)榫杩蠲糠昼姸荚谟咳?，最高記錄是一小時(shí)300萬美元，你不能讓它停下來。

　　5.

　　新網(wǎng)站初步完成后，使用webpagetest.org進(jìn)行測(cè)試，結(jié)果令人鼓舞。

　　原版頁面4秒鐘后還沒載入，新版只用1秒就可以看到。整個(gè)平臺(tái)的訪問速度上升了60%，捐款轉(zhuǎn)化率增加了14%。

　　接下來，就是微調(diào)頁面的各種細(xì)節(jié)，一共進(jìn)行了240次a/b測(cè)試，也就是說，至少迭代了240個(gè)版本。

　　調(diào)整后的頁面，視覺效果和用戶體驗(yàn)都有了巨大的提升(點(diǎn)擊看大圖)，捐款轉(zhuǎn)化率因此又提高了49%。。

　　隨著奧巴馬的當(dāng)選，BarackObama.com共進(jìn)行了1101次前端部署。

　　6.

　　事實(shí)證明，整個(gè)開發(fā)方案非常成功，順利完成籌款任務(wù)，沒有一分鐘宕機(jī)。

　　Kyle Rush感到有必要總結(jié)，留下記錄。除了上面的開發(fā)過程，他還提到前端團(tuán)隊(duì)使用的工具：版本控制Github ，a/b測(cè)試管理Optimizely，代碼編譯CodeKit。

　　Kyle Rush最后總結(jié)說：

　　“我百分之百肯定，這是我經(jīng)歷過的最好的開發(fā)環(huán)境。我們不斷調(diào)整，捐款轉(zhuǎn)化率的提高令人難以置信。整個(gè)團(tuán)隊(duì)感到無比滿足。但是，最高興的還是看到，2013年1月21日巴拉克·奧巴馬依然是美國(guó)總統(tǒng)!”

　　(完)