Kyle Rush是一個網(wǎng)站工程師。
2011年6月,他加入BarackObama.com,負(fù)責(zé)設(shè)計2012美國大選的奧巴馬官網(wǎng)。
(圖為2011年6月的奧巴馬官網(wǎng))
除了宣傳,官網(wǎng)的主要目的就是籌款。
上一次大選,奧巴馬籌到了6.9億美元。這是一個很大的數(shù)字,但由于過去4年美國經(jīng)濟(jì)一直沒有起色,本次大選勢必要投入更多的資金,團(tuán)隊(duì)內(nèi)部估計資金需求將達(dá)到創(chuàng)紀(jì)錄的10億美元。
一個籌集10億美元的網(wǎng)站,歷史上從來沒有過。Kyle Rush不知道自己能否做到,但是他很清楚,如果籌不到錢,奧巴馬沒法贏得大選。
2.
2012年美國大選現(xiàn)在已經(jīng)結(jié)束了,奧巴馬有驚無險地?fù)魯×肆_姆尼。他最終籌到了11億美元,成為歷史上籌款金額最高(也是花錢最多)的總統(tǒng)候選人。(排在第二位的就是羅姆尼,他也籌到了10億美元。)
這11億美元之中,線下籌集了4.1億,線上籌集了6.9億。單單BarackObama.com一個網(wǎng)站,就創(chuàng)造了2.5億美元的捐款。
在6個月的時間里,BarackObama.com共有
* 17,807,917個訪問者,81,548,259次頁面訪問
* 4,276,463次捐款
* 捐款轉(zhuǎn)化率24%(每四個訪問者,就有一人會捐款)
這樣輝煌的成績,是如何取得的?
3.
制作一個超大流量的、體驗(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是第一個加入的前端工程師,負(fù)責(zé)網(wǎng)頁的外觀和用戶體驗(yàn)。
一開始,網(wǎng)站放在團(tuán)隊(duì)自購的服務(wù)器上,運(yùn)行和捐款都還算平穩(wěn)。但是,隨著競爭不斷加劇,局勢變得令人擔(dān)憂了。到了2012年5月,羅姆尼當(dāng)月的籌款金額第一次超過了奧巴馬。
競選總部決定,網(wǎng)站必須改版,盡一切可能爭取捐款。于是,技術(shù)團(tuán)隊(duì)開始大規(guī)模的擴(kuò)充,全職的前端工程師從1個人擴(kuò)充到了14個人,其中6人專門負(fù)責(zé)制作籌款頁面。
4.
技術(shù)團(tuán)隊(duì)做出的第一個決定是,使用靜態(tài)網(wǎng)站生成器Jekyll,用靜態(tài)網(wǎng)頁取代動態(tài)網(wǎng)頁,加快網(wǎng)頁打開速度。網(wǎng)站的打開應(yīng)該越快越好。有研究稱,打開速度每慢100毫秒,Amazon的銷售額就下降1%。
第二個決定是,將全部網(wǎng)頁放上CDN,使用的服務(wù)商是Akamai。它是世界最大的CDN供應(yīng)商,共部署了50000多臺服務(wù)器,美國各地都能獲得理想的訪問速度。奧巴馬芝加哥競選總部,可以在20毫秒內(nèi)載入官網(wǎng)的HTML網(wǎng)頁。
第三個決定是,將捐款的后臺做成API調(diào)用。這是因?yàn)橛?3%的訪問者使用移動設(shè)備,所以必須部署多個前端(Web端和移動端)。使用API,可以讓不同前端以相同方式與后臺通信,彼此之間用JSON格式傳遞信息。
第四個決定是,后臺用PHP語言開發(fā),放在Amazon的EC2平臺上。
第五個決定是,為了避免宕機(jī),開發(fā)兩個后臺。一旦一個系統(tǒng)停止工作,立刻自動切換到另一個。這點(diǎn)很重要,因?yàn)殄礄C(jī)不僅影響士氣,而且經(jīng)濟(jì)損失巨大。因?yàn)榫杩蠲糠昼姸荚谟咳?,最高記錄是一小時300萬美元,你不能讓它停下來。
5.
新網(wǎng)站初步完成后,使用webpagetest.org進(jìn)行測試,結(jié)果令人鼓舞。
原版頁面4秒鐘后還沒載入,新版只用1秒就可以看到。整個平臺的訪問速度上升了60%,捐款轉(zhuǎn)化率增加了14%。
接下來,就是微調(diào)頁面的各種細(xì)節(jié),一共進(jìn)行了240次a/b測試,也就是說,至少迭代了240個版本。
調(diào)整后的頁面,視覺效果和用戶體驗(yàn)都有了巨大的提升(點(diǎn)擊看大圖),捐款轉(zhuǎn)化率因此又提高了49%。。
隨著奧巴馬的當(dāng)選,BarackObama.com共進(jìn)行了1101次前端部署。
6.
事實(shí)證明,整個開發(fā)方案非常成功,順利完成籌款任務(wù),沒有一分鐘宕機(jī)。
Kyle Rush感到有必要總結(jié),留下記錄。除了上面的開發(fā)過程,他還提到前端團(tuán)隊(duì)使用的工具:版本控制Github ,a/b測試管理Optimizely,代碼編譯CodeKit。
Kyle Rush最后總結(jié)說:
“我百分之百肯定,這是我經(jīng)歷過的最好的開發(fā)環(huán)境。我們不斷調(diào)整,捐款轉(zhuǎn)化率的提高令人難以置信。整個團(tuán)隊(duì)感到無比滿足。但是,最高興的還是看到,2013年1月21日巴拉克·奧巴馬依然是美國總統(tǒng)!”
(完)
本文地址:http://likemindfilms.com/news/zczx1264.html