客戶端加載耗時優(yōu)化方案(上)
編輯導語:我們經(jīng)常能碰到客戶端加載耗時的情況,那么應該如何優(yōu)化解決這種問題,提升用戶體驗感呢?本文作者總結了刷新加載loading的三個階段,在本篇文章中,主要是針對第一階段,為我們闡述了優(yōu)化方案。
任何一件事情的發(fā)生可能背后有很多種原因,要解決好一個問題,都要明確造成這個問題的原因是什么,然后針對這些原因進行優(yōu)化。
在刷新加載loading的過程,經(jīng)歷了三個階段:
- 客戶端觸發(fā)頂部刷新;
- 服務器收到請求后準備要下發(fā)的數(shù)據(jù);
- 客戶端收到服務器數(shù)據(jù)進行展示。
本文針對第一階段:“客戶端觸發(fā)頂部刷新”聊一聊怎么減少耗時問題(下一篇文章會針對另外兩個階段闡述優(yōu)化方案)。
01
交互層面:使用占位策略緩解用戶焦慮
app某個界面一直空白,或者界面一直在轉loading,在這樣的過程中,用戶任何信息都獲取不到,會讓用戶產(chǎn)生等待焦慮。
1)動畫策略
動畫策略是一個比較常用的策略,比如可以使用新穎的加載動畫來代替老式的loading菊花樣式,用戶在看動畫的過程中加載就已經(jīng)結束了,以此降低用戶預期的等待時長。
但新穎的動畫不一定適用所有App,不恰當?shù)氖褂眯路f的加載動畫甚至會加重某些用戶的等待焦慮,造成用戶流失。所以當你決定要采用動畫策略時,不妨采用A/B Test的方式進行測試,看看新動畫是否真的有降低等待焦慮的作用。
2)歷史內(nèi)容策略
歷史內(nèi)容占位是目前主流App最常用的策略,除了用戶首次登陸App沒有歷史信息外,其余每次登陸都會先使用歷史內(nèi)容來進行占位,以此來減少頁面空白加載給用戶帶來的焦慮。
02
技術層面:預拉取
預拉取的基本操作
預拉取,也即提前拉取,在用戶真正觸發(fā)向后臺拉取內(nèi)容的網(wǎng)絡請求之前,就已經(jīng)準備好數(shù)據(jù),等到用戶真正開始拉取時,直接把上次提前拉取好的數(shù)據(jù)返回給用戶,這種操作甚至可以讓用戶體會到瞬間拉取的效果。
圖1- 常規(guī)拉取流程
圖2-預拉取流程
如上圖所示,預拉取的最關鍵的問題在于:何時觸發(fā)預拉???
用戶自然希望每次拉取時,客戶端都把數(shù)據(jù)拉取好,這樣每次都可以體會到瞬間拉取的效果。那么最直接的方法就是:在一切用戶未進行網(wǎng)絡請求的時刻,一直向后臺請求最新的數(shù)據(jù)。
但從用戶流量,服務器所能接受的并發(fā)請求上限來看,上面這種策略不僅會浪費用戶流量,甚至在用戶數(shù)量多的情況下會把服務器搞掛掉,這就得不償失了。
我們不妨換個思路,如果我們是用戶,我們在什么情況下對拉取內(nèi)容耗時要求最高?
那自然是我們對內(nèi)容最迫切的時候,比如:
- 收到了新通知的紅點
- 首次打開app
下面我們針對”紅點預拉取”和”首次預拉取”討論下具體的產(chǎn)品方案。
03
紅點預拉取
在介紹紅點預拉取之前,我們先明確下紅點本身的定位,紅點大致可以被分為兩種類型:
- 消息型紅點:比如朋友圈和視頻號的紅點,會在你的朋友有輸出型行為(點贊、發(fā)表、評論等)時給予你通知,這種紅點強調(diào)實時性,需要具有過期和撤回的能力;
- 功能型紅點:不強調(diào)實時性,一般在給用戶介紹新功能時起引導的作用,只有當你手動點擊時這種紅點才會消失,這種紅點基本不需要具備過期和撤回的能力。
因為我們需要通過預拉取來獲取新的內(nèi)容,遂下面討論的主要是”消息型紅點”。
紅點在app中無處不在,以朋友圈舉例,當我在發(fā)現(xiàn)頁收到一個”同事A的頭像+小紅點”類型的紅點,這時在我點進朋友圈之前,我內(nèi)心的預期自然是想看 同事A 點贊了什么內(nèi)容。
在我點進朋友圈如果加載的loading時間過長,我的預期就沒有被滿足。
那么用紅點預拉取怎么做呢?
當我收到”同事A的頭像+小紅點”類型的紅點(紅點中要帶上”同事A剛發(fā)的那條內(nèi)容背后的id”)時,客戶端立馬通過這個id去服務器請求內(nèi)容數(shù)據(jù),客戶端收到內(nèi)容數(shù)據(jù)中先存在緩存里。
當我真正點進朋友圈觸發(fā)頂部刷新時,這時直接把我已經(jīng)從服務器拉取到數(shù)據(jù)進行展示。這樣的一個流程可以被稱為”紅點預拉取”。
但是, 紅點預拉取就這么簡單嗎?非也非也。
我們不妨看幾個關于紅點預拉取的問題(相關解釋在文末~):
- 問題1:用戶收到紅點之后對紅點對應的內(nèi)容進行了預拉取,但這條內(nèi)容在客戶端收到紅點和發(fā)起內(nèi)容之間被作者刪除了,也就是預拉取拉不到內(nèi)容了,怎么辦?
- 問題2:用戶收到A紅點后,客戶端對A內(nèi)容進行了預拉取,但在真正消費預拉取內(nèi)容之前,A內(nèi)容因為安全問題被處罰打擊刪除了,這時A紅點會被撤銷,那已經(jīng)預拉取的內(nèi)容怎么辦?
- 問題3:用戶收到A紅點后,客戶端對A內(nèi)容進行了預拉取,但在真正消費預拉取內(nèi)容之前,用戶又收到了B紅點,且B紅點把A紅點進行了覆蓋,那么已經(jīng)預拉取過的A內(nèi)容該怎么辦?
- 問題4:用戶收到A紅點后,客戶端對A內(nèi)容進行了預拉取,但用戶在12小時候之后才進入了朋友圈,這時應該展示A內(nèi)容嗎?
04
旁路預拉取
旁路預拉取在多tab的產(chǎn)品中較為常用,以抖音為例,抖音有”同城、關注、推薦”這三個主流tab,目前抖音出現(xiàn)頻率最多的紅點為關注紅點。
大部分人點進抖音都是進入了”關注tab”,關注tab可以通過紅點觸發(fā)預拉取,但在用戶點到推薦tab時,因為推薦tab沒有做預拉取,所以用戶頂部刷新加載內(nèi)容耗時會比較長(大約2s),很多用戶在這2s內(nèi)就離開了抖音。
既然關注tab可以有紅點觸發(fā)的預拉取,關注tab的拉取耗時進行了優(yōu)化,那我們能不能讓關注tab幫一幫推薦tab(或同城tab)呢?
答案是可以的,這時就可以采取”旁路預拉取”。
客戶端在關注tab加載數(shù)據(jù),向服務器請求數(shù)據(jù)時,服務器可以和客戶端約定一個開關:enablePrefectSwitch。
當服務器給客戶端下發(fā)了 enablePrefectSwitch 等于 YES 的指令,我們就去預拉取推薦tab的內(nèi)容,那么當用戶在關注tab刷完內(nèi)容切到推薦tab,會發(fā)現(xiàn)推薦tab的拉取耗時很短(因為已經(jīng)做了預拉取了)。
問題1:服務器應該什么時候告訴客戶端enablePrefectSwitch 等于 YES 呢?
問題2:在關注tab觸發(fā)旁路預拉取去進行推薦tab的預拉取,在推薦tab預拉取成功前,用戶就已經(jīng)切到了推薦tab手動進行了頂部刷新,那么這個時候推薦tab要展示的是預拉取的內(nèi)容,還是手動觸發(fā)頂部刷新的內(nèi)容?
05
1. 曝光預拉取
以微信為例,當用戶切到發(fā)現(xiàn)頁時,會曝光”朋友圈”的入口,也會曝光”視頻號”的入口,曝光預拉取也即當入口曝光時,觸發(fā)預拉取的邏輯。
曝光預拉取的策略比較好理解,但也有一些需要注意的小問題(相關解釋在文末~):
問題1:如果客戶端采取曝光預拉取的策略,從訪問流量上考慮,服務器需要注意什么問題呢?
06
定時預拉?。?/strong>
定時預拉取比較好理解,即每隔n分鐘觸發(fā)一次預拉取。
定時預拉取的策略比較好理解,但也有一些需要注意的小問題(相關解釋在文末~):
問題1:以微信這樣的產(chǎn)品為例,如果打算對視頻號采取定時預拉?。ū热缑?0分鐘就對視頻號內(nèi)容進行預拉?。瑫粫袉栴}?
問題2:采取定時預拉取,用戶首次啟動app時(也即0分鐘時),是否要進行預拉取?
07
預拉取要注意的細節(jié)
1)方案兼容問題
我們發(fā)現(xiàn)以上的預拉取方案都有一定的缺點,所以實際工程中一般是將上面所有方案兼容起來,取長補短。
比如以紅點預拉取為主體,其它預拉取方案作為輔助的產(chǎn)品策略。
紅點預拉取到的內(nèi)容被用戶使用的概率比較大,旁路預拉取可以優(yōu)化多tab瀏覽時用戶切tab的體驗,曝光預拉取與定時預拉取相結合,解決某些App廠商在某些時間點統(tǒng)一殺App進程導致后臺在某個時間點訪問點突增的問題。
在紅點撤銷、熱門紅點過期、新增熱門紅點時候丟棄之前預加載的內(nèi)容,但在有紅點的背景下觸發(fā) 旁路、曝光或定時 預拉取時,要帶上相應的紅點信息。
2)預拉取要做假耗時
這里需要注意一個交互上的細節(jié),預拉取的初衷是降低拉取的等待耗時,但如果將等待耗時降低到了0秒,可能會給用戶一種并沒有拉取成功,而是展示了歷史占位的錯覺。
所以即使客戶端已經(jīng)進行了內(nèi)容預拉取,在用戶觸發(fā)加載時也要等待0.5s后再給用戶展示數(shù)據(jù),當然這0.5s是個經(jīng)驗值,實際工程中可以通過實驗進行配置,找到一個既讓用戶感受到加載的過程,又能盡可能多的降低用戶等待焦慮的時間點。
3)在預拉取方案下,所有的網(wǎng)絡請求都應該設計成串行的
看到這里,你可能會發(fā)現(xiàn)采用預拉取會有一個風險點:預拉取的請求(標記為預拉取A) 和 用戶手動刷新的請求(標記為手動拉取B) 同時請求了服務器,那么用戶到底應該展示哪個內(nèi)容?
這里有兩個方案:
- 用戶觸發(fā)手動拉取B時,主動取消掉上一次的預拉取A,用戶展示的內(nèi)容以手動拉取B為準;
- 用戶觸發(fā)手動拉取B時,這時發(fā)現(xiàn)預拉取A已經(jīng)在請求服務器內(nèi)容了,那么手動拉取B以預拉取A返回的數(shù)據(jù)為準。
附:實際上并發(fā)請求的后果比展示哪個內(nèi)容更嚴重,并發(fā)請求甚至會導致數(shù)據(jù)丟失,或下發(fā)重復數(shù)據(jù)等問題。
08
預拉取存在的問題
通過上面的預拉取方案,實際過程中會發(fā)現(xiàn)兩個問題:
- 高并發(fā),后臺服務器成本高;
- 紅點頻率推送高的產(chǎn)品,經(jīng)常會在上一個紅點預拉取內(nèi)容還未消費前,就被新的紅點給覆蓋了,預拉取存在浪費的情況。
所以我們可不可以在減少預拉取頻率的基礎上,還能提高預拉取內(nèi)容的使用率呢?答案是可行的,可以將人工智能和預拉取融合。
AI與預拉?。涸谡归_講解AI與預拉取策略之前,我們先做幾個用戶使用習慣的合理假設:
- 假設一:不同用戶對不同的紅點樣式刺激不同,部分用戶有著強烈查看特定紅點內(nèi)容的沖動;
- 假設二:不同用戶使用產(chǎn)品的頻率不同;
- 假設三:不同用戶有著不同的高頻使用產(chǎn)品的時間段,每個用戶有著自己高頻使用產(chǎn)品的特定時間段。
1)根據(jù)用戶畫像觸發(fā)預拉取
根據(jù)假設一,A用戶可能對某個明星發(fā)的內(nèi)容紅點比較好奇,B用戶可能對自己愛慕的人發(fā)新內(nèi)容的紅點比較沖動,千人前面,每個人對不同紅點代表的含義查看沖動不同。
可以通過建立模型來刻畫用戶感興趣內(nèi)容的用戶畫像,只針對用戶感興趣的消息紅點觸發(fā)預拉取,且可以提升這類紅點的優(yōu)先級,在不影響紅點本身體系的情況下,讓這類紅點盡可能長的存在于用戶界面上。
2)使用頻率
根據(jù)假設二,有部分用戶可能一直都接受到各種類型的消息紅點,但始終沒有對這類紅點進行過消費。
所以針對這類用戶可以適當?shù)倪M行紅點懲罰,比如20分鐘內(nèi)不再推紅點,又或者降低紅點觸發(fā)預拉取的頻率,只針對用戶感興趣的紅點觸發(fā)預拉取,當用戶頻率和畫像越來越全面時,再動態(tài)調(diào)整預拉取策略。
3)使用時間段
根據(jù)假設三,不同用戶的使用時段可能不同,比如A用戶上班時間較長,可能只會在晚上11點-12點期間進行內(nèi)容消費,白天大部分時間即使收到了紅點也沒有時間去查看,通過建立統(tǒng)計模型明確用戶高頻使用時長,在這段時間段內(nèi)提升用戶預拉取的觸發(fā)頻率。
09
相關問題解釋:
1. 紅點預拉取
問題1:用戶收到紅點之后對紅點對應的內(nèi)容進行了預拉取,但這條內(nèi)容在客戶端收到紅點和發(fā)起內(nèi)容之間被作者刪除了,也就是預拉取拉不到內(nèi)容了,怎么辦?
答:這種情況下預拉取沒拉取到內(nèi)容是正常表現(xiàn),應該啟用紅點撤回機制。
問題2:用戶收到A紅點后,客戶端對A內(nèi)容進行了預拉取,但在真正消費預拉取內(nèi)容之前,A內(nèi)容因為安全問題被處罰打擊刪除了,這時A紅點會被撤銷,那已經(jīng)預拉取的內(nèi)容怎么辦?
答:A紅點被撤銷后,對應的預拉取的A內(nèi)容就要進行銷毀。也即:有A紅點不一定要求有A內(nèi)容,但A紅點被撤銷時,預拉取到的A內(nèi)容一定也要撤銷掉。
問題3:用戶收到A紅點后,客戶端對A內(nèi)容進行了預拉取,但在真正消費預拉取內(nèi)容之前,用戶又收到了B紅點,且B紅點把A紅點進行了覆蓋,那么已經(jīng)預拉取過的A內(nèi)容該怎么辦?
答:B紅點覆蓋掉A紅點后,應該先立即撤銷掉對A內(nèi)容的預拉取,接著再進行B內(nèi)容的預拉取。
問題4:用戶收到A紅點后,客戶端對A內(nèi)容進行了預拉取,但用戶在12小時候之后才進入了朋友圈,這時應該展示A內(nèi)容嗎?
答:A紅點屬于”消息型紅點”,有時效性,12個小時都沒有對A紅點進行消費,那么A紅點應該走過期銷毀的邏輯,同時也應該撤銷預拉取到的A內(nèi)容。
2. 曝光預拉取
問題1:如果客戶端采取曝光預拉取的策略,從訪問流量上考慮,服務器需要注意什么問題呢?
答:早上8、9點是用戶起床的高峰期,但這段時間可能公司還沒有開始上班,針對這段時間用戶訪問的峰值要提前進行監(jiān)控,防止出現(xiàn)服務器宕機事故。
3. 定時預拉取
問題1:以微信這樣的產(chǎn)品為例,如果打算對視頻號采取定時預拉?。ū热缑?0分鐘就對視頻號內(nèi)容進行預拉?。?,會不會有問題?
答:會有問題,微信主打即時通訊的產(chǎn)品,通訊才是最高頻的使用場景。如果在微信打開期間都定時做視頻號的內(nèi)容預拉取,預拉取的內(nèi)容被消費的幾率不大,且可能會對服務器產(chǎn)生不必要的請求。
問題2:采取定時預拉取,用戶首次啟動app時(也即0分鐘時),是否要進行預拉???
答:有些安卓機出于性能考慮,會在某個時間點強殺所有app,所以在這種情況下所有用戶重新打開app,對服務器的預拉取訪問會出現(xiàn)一個突刺,而且用戶打開app,實際上并不一定是要訪問預拉取的內(nèi)容,所以不建議在首次啟動app時就直接去進行預拉取。
作者,和產(chǎn)品經(jīng)理聊技術;公眾號:和產(chǎn)品經(jīng)理聊技術
本文由 @和產(chǎn)品經(jīng)理聊技術 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協(xié)議。
講得太好了!講實踐也講原理, 基礎邏輯很清晰,讓小白也能看懂!感謝作者
插眼