我最佳化YouTube視頻播放頁面的故事

來源:互聯網
上載者:User

 

三年前,當我還在YouTube做一名web程式員時,有一位資深的工程師發了一通牢騷,說播放視頻的頁面體積太大。這個頁面體積已經膨脹到了高達 1.2MB,包含有數十次的請求。這個工程師公開的宣稱說,“如果他們Quake能在100KB的體積下複製出我們的頁面,我們沒有理由達不到這個體 積!”因為我同意他的觀點,並且我正在找新的任務,於是就決定接受這個挑戰,讓YouTube的視頻播放頁面的體積減到100KB以下。那天晚上從舊金山 回家的火車上,我編寫了一個基本的原型。我決定限制頁面上的功能數,只保留一個標題,一個視頻播放器,五個相關視頻,一個分享按鈕,一個插旗工具和十條評 論——是通過AJAX載入的。我把這個任務命名為“羽毛”。

即使這樣一個有限的功能,頁面的體積仍然達到250KB。我深入代碼查看,發現我們的最佳化工具(比如閉包編譯工具)無法清理這個頁面上實際沒有使用 的代碼(也許不該責備這些工具,這種情況下任何工具都做不到)。想進一步減少代碼,唯一的方法就是手工最佳化CSS,JavaScript和圖片。經過辛苦 的三天努力,我已經把頁面做到了相當的精瘦,但仍然沒有低於100KB。因為我剛剛寫完了一個HTML5視頻播放器,我決定用它來替換體積笨重的 Flash播放器。砰!98KB,只有14個請求。對這個版面設定了一些基本監視後,我們對一小部分人開放了這個頁面。

經過了一周資料的收集,資料有了,但它們卻讓我困惑。羽毛版下的頁面的總體平均延遲時間實際上是增加的。我減少了總的頁面體積,減少了頁面請求的次數,但資料顯示在載入羽毛視頻播放頁卻花了更長的時間。這是不可能的事情。深入挖掘資料,經過在瀏覽器上的反覆實驗,沒有任何結果。我基本上要放棄這個版本了,我的信仰幾乎被完全擊潰,正在此時,一個同事發現了其中的奧秘:地理因素

當我們標註了資料的地理資訊,把所有資訊按地區劃分進行對比,我們看到了地區,比如東南亞,南美,非洲,甚至西伯利亞等地在流量上呈現的不對稱增加。進一步調查揭示,在這些地區,羽毛版的頁面的平均載入時間超過2分鐘!這意味著,一個普通的視頻,大概1兆左右,會需要20分鐘來載入!人們為了等待這個頁面就如此痛苦,更別提視頻了。可縱觀這些地區,他們之前根本無法觀看YouTube,因為等了很久也看不到什麼。而在羽毛版下,儘管要等2分鐘才能看到視頻的第一幀,但不管怎樣,事實上是可以看到了。在過去的一周裡,羽毛版在這個地區很受歡迎,所以我們的資料被他們弄的完全不平均了。大量以前不能觀看YouTube的人現在突然可以了。

通過開發羽毛,我學到了一個關於世界其它地方網路狀況的很有價值的認識。我們很多人有幸能生活在一個有高速寬頻地方,但實際上仍然有很大的地區不是這樣。通過讓用戶端的代碼變少變輕,你就能完全開啟一個新的市場。

[本文英文原文連結:Page Weight Matters ]



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。