奧巴馬籌款網站的製作過程

阮一峰發表於2012-12-14

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日巴拉克·奧巴馬依然是美國總統!"

(完)

相關文章