LinkedIn：用數(shù)據(jù)提高視頻性能

在LinkedIn，我們使用數(shù)據(jù)來改善會(huì)員在使用我們網(wǎng)站時(shí)的體驗(yàn)。在視頻團(tuán)隊(duì)中，我們看重的是能夠洞察我們的視頻需要多長時(shí)間加載、為什么某些視頻比其他視頻更受關(guān)注、以及我們的成員如何與網(wǎng)絡(luò)、iOS和Android上的視頻進(jìn)行交互的指標(biāo)。簡而言之，通過在LinkedIn上播放視頻時(shí)收集的各種數(shù)據(jù)點(diǎn)，可以極大地提高視頻性能。

技術(shù)用詞

這篇文章將提到以下術(shù)語，為了方便您，定義如下：

·iframe：一個(gè)可以在內(nèi)部呈現(xiàn)外部網(wǎng)頁內(nèi)容的元素。這在視頻中非常有用，因?yàn)樗试S我們直接在我們的網(wǎng)站內(nèi)呈現(xiàn)來自第三方（例如Youtube、Vimeo）域的視頻。

·視口：屏幕上可見的網(wǎng)站部分。

·DOM：將網(wǎng)頁表示為由許多內(nèi)容節(jié)點(diǎn)組成的樹。

在播放期間捕獲數(shù)據(jù)

我們的系統(tǒng)捕獲反應(yīng)視頻在播放過程中如何執(zhí)行的大量數(shù)據(jù)。我們發(fā)現(xiàn)通過關(guān)注以下數(shù)據(jù)點(diǎn)，我們已經(jīng)能夠顯著提高LinkedIn.com上的視頻性能：

·媒體初始化開始：當(dāng)播放器開始初始化時(shí)。

·對(duì)于通過iframe播放的視頻（例如第三方視頻），此指標(biāo)會(huì)標(biāo)記iframe首次在頁面上呈現(xiàn)的時(shí)間。

·對(duì)于直接在頁面上呈現(xiàn)的HTML5或本機(jī)視頻，此指標(biāo)會(huì)標(biāo)記視頻播放器發(fā)出loadstart事件的時(shí)間。

·媒體初始化結(jié)束：播放器初始化完成后。

·此度量標(biāo)準(zhǔn)實(shí)際上標(biāo)記了視頻發(fā)出loadeddata事件的時(shí)間。

·媒體緩沖開始：媒體在視頻播放之前首先開始緩沖。

·媒體緩沖結(jié)束：在視頻開始播放之前，媒體停止緩沖。

·開始時(shí)間（TTS）：播放器初始化和播放器準(zhǔn)備播放視頻之間的時(shí)間。

·注意：這是視頻在初始化和緩沖上花費(fèi)的時(shí)間總和。

·感知的開始時(shí)間（PTTS）：成員請(qǐng)求播放視頻和視頻實(shí)際開始播放之間的時(shí)間。

·媒體初始化時(shí)間：媒體初始化開始和媒體初始化結(jié)束事件之間的時(shí)間。

·媒體初始化率：一種數(shù)據(jù)點(diǎn)，用于確定進(jìn)入視口并在退出視口之前成功加載視頻的百分比。

·如果這個(gè)比率下降，則會(huì)告訴我們，我們的視頻可能需要很長時(shí)間才能加載。

稍后在本文中，我們將放大一些利用上述許多數(shù)據(jù)點(diǎn)的實(shí)驗(yàn)來改進(jìn)我們最重要的指標(biāo)之一，PTTS。

使用數(shù)據(jù)來讓我們的會(huì)員受益

現(xiàn)在我們已經(jīng)積累了大量富有洞察力的視頻播放數(shù)據(jù)，我們?nèi)绾问褂盟鼇砀纳莆覀儠?huì)員的體驗(yàn)?zāi)?？我們用兩種方法解決這個(gè)問題。

詳細(xì)的實(shí)時(shí)指標(biāo)報(bào)告

在LinkedIn，我們利用多種內(nèi)部工具和服務(wù)，使我們能夠?qū)崟r(shí)存儲(chǔ)數(shù)據(jù)并可視化這些數(shù)據(jù)的變化。其中一個(gè)特別有用的工具叫做InGraphs，它允許我們可視化在產(chǎn)品中收集的許多數(shù)據(jù)點(diǎn)。

除了InGraphs提供的圖表之外，我們還提供服務(wù)，以便在任何核心指標(biāo)低于預(yù)設(shè)閾值時(shí)通知相關(guān)團(tuán)隊(duì)。如果我們發(fā)現(xiàn)某個(gè)產(chǎn)品中的會(huì)員體驗(yàn)出現(xiàn)退化，這些工具可以使我們立即采取行動(dòng)。

功能的持續(xù)A/B測試

我們不斷嘗試新功能，并對(duì)現(xiàn)有功能進(jìn)行調(diào)整，其首要目標(biāo)是為我們的會(huì)員提供最佳體驗(yàn)。我們將指標(biāo)與InGraphs等報(bào)告工具結(jié)合使用，可以清晰地描繪出一個(gè)給定的實(shí)驗(yàn)如何影響整個(gè)網(wǎng)站的用戶互動(dòng)。

例如，想象一個(gè)虛構(gòu)的實(shí)驗(yàn)，在這個(gè)實(shí)驗(yàn)中，我們測試了僅顯示每個(gè)成員的Feed中前30個(gè)帖子的視頻內(nèi)容的效果。最初看起來似乎是成功的，因?yàn)槲覀兊臅?huì)員觀看的視頻數(shù)量增加了。但是，在仔細(xì)研究InGraphs之后，我們注意到我們的會(huì)員共享的帖子數(shù)量下降了。通過對(duì)這種相關(guān)性的理解和對(duì)這兩種影響的考慮，實(shí)驗(yàn)將會(huì)因?yàn)閷?duì)會(huì)員體驗(yàn)的負(fù)面影響而終止

確保我們的數(shù)據(jù)準(zhǔn)確無誤

數(shù)據(jù)的有用程度取決于它的準(zhǔn)確性。如果我們不能相信我們存儲(chǔ)的數(shù)據(jù)是準(zhǔn)確的，那么就沒有基礎(chǔ)來測試我們創(chuàng)建的各種實(shí)驗(yàn)。除了上面提到的數(shù)據(jù)監(jiān)控服務(wù)之外，我們還大量使用自動(dòng)（單元，集成和驗(yàn)收）測試來確保給定功能正常工作。正如您所想象的，在開發(fā)新功能的過程中，以LinkedIn的規(guī)模手工測試所有現(xiàn)有功能是不可伸縮的。相反，測試用于單獨(dú)運(yùn)行的現(xiàn)有功能，并保證通過各種交互，功能能夠按預(yù)期地執(zhí)行。例如，我們可以編寫一個(gè)測試，它斷言單擊視頻的播放按鈕會(huì)導(dǎo)致視頻開始播放，并捕獲有關(guān)視頻加載性能的數(shù)據(jù)。因此，自動(dòng)化測試使我們的工程師能夠保證在創(chuàng)建功能后很長時(shí)間內(nèi)，其功能發(fā)出的指標(biāo)是準(zhǔn)確的。除了自動(dòng)化測試之外，LinkedIn工程師還有一些方便使用的工具，以便于驗(yàn)證給定功能發(fā)出的指標(biāo)。

使用數(shù)據(jù)獲取視頻性能

由于視頻資源的自然大小，視頻性能需要一種獨(dú)特的方法：我們需要一種方法來下載足夠的視頻，以便它立即開始播放，同時(shí)還確保我們不會(huì)減慢在頁面上呈現(xiàn)元素的速度。

案例研究：感知開始時(shí)間（PTTS）

在LinkedIn，我們測量感知加載時(shí)間，以了解我們的會(huì)員等待視頻播放的時(shí)間。我們用來深入了解視頻加載時(shí)間的主要指標(biāo)是感知啟動(dòng)時(shí)間（PTTS）。PTTS測量瀏覽器下載視頻所需的時(shí)間，以及視頻在播放前緩沖的時(shí)間。

讓我們看一下上面的圖表，它提供了一些特定會(huì)員等待加載視頻的經(jīng)驗(yàn)。一旦視頻進(jìn)入視口，視頻初始化需要2,700ms，然后在視頻開始播放之前再進(jìn)行3,300ms的視頻緩沖。在這種情況下，PTTS大約是6,000毫秒。我們現(xiàn)在可以使用此指標(biāo)以及其他的數(shù)百萬個(gè)數(shù)據(jù)點(diǎn)，作為加速視頻加載實(shí)驗(yàn)的基本指南。讓我們看一下我們運(yùn)行的幾個(gè)實(shí)驗(yàn)。

急切加載DOM中的所有視頻

在LinkedIn，我們已經(jīng)嘗試了預(yù)先加載視頻的和延遲加載視頻。預(yù)先加載視頻是在視頻進(jìn)入DOM后立即開始下載視頻。這與延遲加載不同，通過該加載，視頻在進(jìn)入視口之前不會(huì)下載。預(yù)先加載允許視頻在進(jìn)入視口之前在后臺(tái)加載。這提供了很好的用戶體驗(yàn)，因?yàn)橐曨l一進(jìn)入視口就會(huì)開始播放，幾乎沒有緩沖。乍一看，這個(gè)實(shí)驗(yàn)是成功的，因?yàn)樗鼫p少了PTTS，意味著視頻開始播放的時(shí)間更短了。然而，當(dāng)我們仔細(xì)研究指標(biāo)時(shí)，我們發(fā)現(xiàn)了一些有趣的結(jié)果。雖然帶寬較強(qiáng)的會(huì)員確實(shí)享受PTTS的減少，但帶寬較弱的那些媒體初始化速率降低，媒體初始化時(shí)間增加。想象一下，例如，一名會(huì)員在乘坐地鐵時(shí)在他或她的手機(jī)上滾動(dòng)LinkedIn Feed。鑒于地鐵的互聯(lián)網(wǎng)連接較弱，會(huì)員在加載內(nèi)容方面已經(jīng)面臨滯后，更不用說視頻資產(chǎn)了。在急切加載的情況下，我們不僅在視口中下載內(nèi)容，我們還嘗試在幕后加載視頻。正如您想象的那樣，這會(huì)對(duì)成員相對(duì)較弱的連接施加過大的負(fù)載，從而可能導(dǎo)致沒有任何Feed的帖子加載。這種現(xiàn)象解釋了前面提到的媒體初始化率下降和媒體初始化時(shí)間增加，這也是我們下一次實(shí)驗(yàn)的動(dòng)機(jī)。

排隊(duì)視頻加載

排隊(duì)加載是一種加載策略，在這種策略中，視頻被添加到加載隊(duì)列中，并一次加載一個(gè)，而不是一次加載DOM中的所有視頻（如預(yù)先加載的情況）。排隊(duì)加載旨在結(jié)合預(yù)先加載（減少的PTTS）和延遲加載（對(duì)于網(wǎng)絡(luò)帶寬較少的成員更容易訪問）的好處。它通過在視口外部加載視頻來完成此操作，但只有在視口中的視頻成功加載后才能這樣做。對(duì)于排隊(duì)加載，我們觀察到PTTS略有增加，可能是因?yàn)橐暱谕獠考虞d的視頻較少，但媒體初始化率增加，而網(wǎng)絡(luò)連接較弱的成員的媒體初始化時(shí)間減少。

結(jié)論

由于視頻資源的大尺寸以及對(duì)其快速加載而不會(huì)對(duì)網(wǎng)站其他部分的速度造成負(fù)面影響的期望，使得視頻性能成為一個(gè)固有的難以解決的問題。為了進(jìn)一步使問題復(fù)雜化，我們還必須在運(yùn)行與性能相關(guān)的實(shí)驗(yàn)之前，考慮網(wǎng)絡(luò)速度和瀏覽器功能方面的差異，以及成員使用站點(diǎn)的不同方式。通過正確使用數(shù)據(jù)，我們可以快速查明并迭代性能下降，同時(shí)確保在此過程中不會(huì)出現(xiàn)性能退化。

致謝

我要感謝Shane Afsar和Kris Teehan在撰寫這篇文章時(shí)給予的幫助，以及Kevin O'Connell和LinkedIn工程博客團(tuán)隊(duì)在編輯這篇文章時(shí)提供的幫助。向紐約的視頻團(tuán)隊(duì)致敬，他們不懈地致力于提高視頻性能和整體視頻體驗(yàn)。