▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注,回復(fù) "社群" 加入我們

本文共 5077 字,預(yù)計(jì)閱讀 13 分鐘
TCC 情報(bào)局的 第 28 篇 干貨分享
2021 年的 第 16 篇
TCC 推薦:大家好,這里是 TCC 翻譯情報(bào)局,我是張聿彤。Google 開發(fā)了許多實(shí)用指標(biāo)和工具,幫助衡量用戶體驗(yàn)和質(zhì)量,從而發(fā)掘優(yōu)化點(diǎn)。一項(xiàng)名為 Web Vitals 的計(jì)劃降低了學(xué)習(xí)成本,為網(wǎng)站體驗(yàn)提供了一組統(tǒng)一的質(zhì)量衡量指標(biāo) -- Core Web Vitals,其中包括加載體驗(yàn)、交互性和頁面內(nèi)容的視覺穩(wěn)定性,構(gòu)成了 2020 年核心 Web 健康指標(biāo)的基礎(chǔ)。本文詳細(xì)的介紹了每個(gè)指標(biāo)及其使用方式,推薦了用于測量這些指標(biāo)的實(shí)用工具,快來一起看看吧~
Nathan Dumlao 攝影作品(發(fā)表于 Unsplash)有很多方法可以優(yōu)化網(wǎng)站的用戶體驗(yàn)。若能預(yù)先了解最佳的優(yōu)化衡量方法,可以大大節(jié)省時(shí)間和成本。
Google 在 2020 年 5 月 5 日提出了新的用戶體驗(yàn)量化方式 Web Vitals 來衡量網(wǎng)站的用戶體驗(yàn),并將這些衡量結(jié)果用作其排名算法的一部分。為了更好的理解這些內(nèi)容,讓我們來看看這些重要指標(biāo)是什么。Google 在使用者體驗(yàn)量化發(fā)展的相關(guān)成果Core Web Vitals 與 Web Vitals
Core Web Vitals & Web Vitals什么是 Web Vitals,Google 給出的定義是 一個(gè)良好網(wǎng)站的基本指標(biāo)(Essential metrics for a healthy site),過去要衡量一個(gè)網(wǎng)站的好壞,需要使用的指標(biāo)太多了,Web Vitals 可以簡化指標(biāo)的學(xué)習(xí)曲線,只需聚焦于 Web Vitals 指標(biāo)的表現(xiàn)即可。“你不需要成為任何領(lǐng)域的專家就可以了解 Web Vitals。它們很簡單,比如移動(dòng)友**、瀏覽安全性、HTTPS、交互性、視覺穩(wěn)定性、加載時(shí)間等?!?/span>在這些 Web Vitals 中,Google 確定了三個(gè)主要衡量指標(biāo),即 在所有類型的網(wǎng)站中通用的 Core Web Vitals[1]:([1]Core Web Vitals 是應(yīng)用于所有 Web 頁面的 Web Vitals 的子集,是其最重要的核心)Core Web Vitals 與 Web Vitals- 加載性能(LCP) -- 顯示最大內(nèi)容元素所需時(shí)間
- 交互性(FID) -- 首次輸入延遲時(shí)間
- 視覺穩(wěn)定性(CLS) -- 累積布局配置偏移
這三個(gè)指標(biāo)已經(jīng)經(jīng)過了一段時(shí)間的驗(yàn)證,如 LCP 在 WICG 已經(jīng)孵化至少 1 年以上,F(xiàn)ID 在 Google Chrome Labs 上已經(jīng)實(shí)施 2 年以上,LCP 和 CLS(相關(guān) Layout Instability API)已于今年入 W3C 草擬標(biāo)準(zhǔn)。讓我們一起詳細(xì)了解下 Core Web Vitals。LCP -- 最大內(nèi)容繪制
加載性能
LCP(Largest Contentful Paint)用于衡量加載體驗(yàn),從真實(shí)用戶的角度衡量網(wǎng)頁的加載速度。它是 從頁面剛開始加載到呈現(xiàn)出所有內(nèi)容時(shí)的持續(xù)時(shí)間。“換句話說,LCP 是度量網(wǎng)頁上可見區(qū)域加載時(shí)間的方法”讓我們比較一下有圖像和沒有圖像的媒體文章的 LCP。有圖片的文章用了 3.57 秒加載,而沒有圖片的文章只用了 2.32 秒載入。“谷歌堅(jiān)稱,所有開發(fā)者和產(chǎn)品所有者都會定期測量其應(yīng)用程序的 Core Web Vitals,并提供工具來輔助測量?!?/span>FID -- 首次輸入延遲
交互行為
FID(First Input Delay)涉及到用戶與 web 頁面之間的交互性,用于衡量網(wǎng)站操作的順暢程度。它 測量了用戶第一次產(chǎn)生交互行為,到瀏覽器響應(yīng)該用戶操作的持續(xù)時(shí)間。這些用戶交互行為可以是單擊按鈕、點(diǎn)擊鏈接或任何基于 JavaScript 的自定義控件。在 TTI 的時(shí)間內(nèi)第一個(gè)互動(dòng)事件的開始時(shí)間與瀏覽器回應(yīng)事件的時(shí)間差為什么要取在 TTI[2] 發(fā)生的第一次的操作事件,Google 給的理由有以下三點(diǎn):- 使用者的第一次互動(dòng)體驗(yàn)印象相當(dāng)重要;
- 當(dāng)今網(wǎng)頁最大的互動(dòng)性問題通常發(fā)生在一開始載入時(shí);
- 頁面載入完后的第二次操作事件延遲,有其他專門的改善解決建議。
([2]互動(dòng)時(shí)間 TTI 是衡量負(fù)載響應(yīng)能力的重要實(shí)驗(yàn)室指標(biāo)。它有助于確定頁面看起來是交互式但實(shí)際上不是交互式的情況??焖俚腡TI有助于確保頁面可用。TTI 度量標(biāo)準(zhǔn)衡量的是從頁面開始加載到頁面主要子資源加載之間的時(shí)間,它能夠快速可靠地響應(yīng)用戶輸入。)“根據(jù) Google 的基準(zhǔn)測試,交互的最佳持續(xù)時(shí)間應(yīng)該在 100ms 以下,而任何超過 300ms 的時(shí)間都被認(rèn)為是較差的。”人們可能會說這些時(shí)間間隔很小,調(diào)整幾百毫秒也沒什么區(qū)別。但實(shí)際上,這些微小的變化可能會對最終用戶產(chǎn)生重大影響。CLS -- 累計(jì)布局偏移
視覺穩(wěn)定性
你可能已經(jīng)注意到某些時(shí)候網(wǎng)頁中的元素在加載時(shí)出現(xiàn)移動(dòng),我敢肯定這不是用戶期待的優(yōu)秀體驗(yàn)。在這樣的場景中,CLS(Cumulative Layout Shift)測量在頁面的整個(gè)生命周期中發(fā)生的每個(gè)意外的樣式移動(dòng)的所有單獨(dú)布局更改得分的總和,可以方便地用來度量 web 頁面的視覺表現(xiàn)。布局的移動(dòng)可能發(fā)生在可見元素從一幀到下一幀改變位置的任何時(shí)候。為了提供良好的用戶體驗(yàn),網(wǎng)站應(yīng)努力使 CLS 分?jǐn)?shù)小于 0.1.“CLS 顯示頁面加載時(shí)組件移動(dòng)的次數(shù)。正如大家所理解的,CLS 需要盡可能少地次數(shù)來實(shí)現(xiàn)良好的用戶體驗(yàn)?!?/span>下圖顯示了 medium.com 和視覺不穩(wěn)定網(wǎng)站之間的 CLS 差異。在上面的例子中,medium.com 網(wǎng)站顯示其 CLS 為 0.097。“這是不是意味著 medium.com 網(wǎng)站加載時(shí)主頁移動(dòng)了 0.097 次?→ 不是??!”計(jì)算此值時(shí)要考慮視窗大小以及兩個(gè)渲染幀之間視窗中不穩(wěn)定元素的移動(dòng)。布局偏移系數(shù)(Layout Shift Score) = 影響范圍系數(shù)(Impact Fraction) x 移動(dòng)距離系數(shù)(Distance Fraction)CLS 值(布局偏移系數(shù))可以使用上述公式輕松計(jì)算。此公式中的影響系數(shù)是指不穩(wěn)定元素對視窗的影響,而距離系數(shù)是指不穩(wěn)定元素移動(dòng)的距離。例如,假設(shè)一個(gè)不穩(wěn)定的元素覆蓋了總窗口大小的 40%,當(dāng)頁面加載時(shí)它向下移動(dòng)了 20%。在這種情況下,因?yàn)椴环€(wěn)定元素占用了總窗口的 60%,影響系數(shù)將為 0.6。又由于不穩(wěn)定元素向下移動(dòng)了 20%,因此距離系數(shù)將為 0.2。因此,最終布局偏移系數(shù) = 0.6 x 0.2 = 0.12如上圖的實(shí)例,影響范圍(紅**域)占比總窗口 75% ,箭頭(紫色)移動(dòng)占總窗口高度的 25%,故 0.75 x 0.25 = 0.1875。提示:使用 Bit(于 Github 里)可在項(xiàng)目之間共享可復(fù)用組件。Bit 使得在項(xiàng)目之間共享、記錄和復(fù)用獨(dú)立組件變得簡單。使用它可以最大限度地復(fù)用代碼,能夠保持設(shè)計(jì)一致、幫助團(tuán)隊(duì)協(xié)作、加快交付并構(gòu)建可擴(kuò)展的應(yīng)用程序。Bit 支持 Node,TypeScript,React,Vue,Angular 等。示例:探索在 Bit.dev 上共享的可復(fù)用的 React 組件我覺得現(xiàn)在你應(yīng)該已經(jīng)很好地理解了 Core Web Vitals 和它們的職責(zé)。所以,現(xiàn)在是時(shí)候?qū)W習(xí)如何測量了。測量 Web Vitals 比你想象的要容易得多
Measuring Web Vitals is Way Easier Than You Think正如我開始提到的,測量 Web Vitals 是一個(gè)簡單的過程,任何人都可以做到。實(shí)際有很多工具可以用來測量 Web 的重要信息,包括一些瀏覽器插件。“Lighthouse、Chrome DevTools、PageSpeed Insights、Chrome UX Report 和 Web Vitals Extension 位列榜首?!?/span>雖然這些工具的用途相同,但可以進(jìn)一步分為實(shí)驗(yàn)室測試工具和現(xiàn)場測試工具兩類。實(shí)驗(yàn)室測試工具
實(shí)驗(yàn)室測試工具的主要目的是 在開發(fā)過程中測試性能,以確保在發(fā)布之前達(dá)到所需的標(biāo)準(zhǔn)。ChromeDevTools 和 Lighthouse 可用于在開發(fā)環(huán)境中測量 Core Web Vitals。“但是這些實(shí)驗(yàn)室測試工具無法測量 FID,因?yàn)闆]有用戶來計(jì)算其交互性。但是,這些工具使用了一種稱為 Total Blocking Time(TBT)的等效測量方法。”下圖顯示了使用 Lighthouse 的網(wǎng)頁的性能測試結(jié)果:使用 Lighthouse 測量 Core Web Vitals現(xiàn)場測試工具
實(shí)驗(yàn)室測試工具的結(jié)果不是 100% 準(zhǔn)確的,因?yàn)闆]有真正的用戶試用網(wǎng)頁?,F(xiàn)場測試工具可以用來填補(bǔ)這個(gè)漏洞。此外,與實(shí)驗(yàn)室測試工具不同的是,現(xiàn)場測試工具可以按原樣測量所有 3 個(gè) Core Web Vitals。PageSpeed Insights、Chrome UX Report 和 Web Vitals Extension 是一些現(xiàn)場測試工具,我們可以使用這些工具在真實(shí)用戶交互時(shí)測量 Core Web Vitals。這些現(xiàn)場測試工具匿名地從網(wǎng)頁上收集實(shí)時(shí)數(shù)據(jù),使我們無需手動(dòng)運(yùn)行任何操作即可檢查 Vitals。使用 Lighthouse 測量 Core Web Vitals讓我們假設(shè)你已經(jīng)測量了網(wǎng)站的 Core web Vitals,而結(jié)果并不符合預(yù)期。那么,做什么能提高這些分?jǐn)?shù)呢?改善 Web Vitals 的步驟
Steps to Improve Web Vitals既然你現(xiàn)在知道如何測量 Web Vitals,那么讓我們看看如果存在問題,如何改進(jìn)你的網(wǎng)站。眾所周知,對于性能相關(guān)問題的技術(shù)修復(fù)并不是那么簡單。大多數(shù)時(shí)候它們非常復(fù)雜耗時(shí)。但是,可以遵循一些通用的指導(dǎo)方法來改進(jìn)這些 Core Web Vitals。可以通過以下方式改進(jìn)網(wǎng)站的 LCP:- 刪除或避免使用消耗太多時(shí)間加載的大型頁面元素。通過分析前面討論的測量工具結(jié)果,可以很容易地發(fā)現(xiàn)這些元素及其影響;
- 避免不必要的第三方 JavaScript 庫。下面的分析表明,使用第三方庫已將主線程阻塞 2700 毫秒;
- 減少服務(wù)器響應(yīng)時(shí)間。
與 LCP 類似,可以遵循以下幾點(diǎn)來提高網(wǎng)站的 FID 值:- 與 LCP 類似,可以通過提交不必要的 JavaScript 庫來增強(qiáng) FID 值;
- 最小化將提高頁面加載時(shí)間,用戶將能夠立即與頁面交互。
Core Web Vitals 最終測量的是 CLS,可以通過以下方式提高 CLS 分?jǐn)?shù):- 如果網(wǎng)站存在廣告顯示,一定要為他們留下必要的空間。
結(jié)論
我希望你們已經(jīng)明白了維護(hù)優(yōu)秀網(wǎng)站的重要性。這些測量方法為保持網(wǎng)站的用戶體驗(yàn)友**提供了有力支持。盡管這些測量方法非常有前途,但在某些情況下,也需要臨時(shí)修改這些測量方法來確保良好的用戶體驗(yàn)。所以請保持注意。原文:https://blog.bitsrc.io/web-vitals-from-google-to-measure-user-experience-8bf9d33bddbe本文翻譯已獲得作者的正式授權(quán)(授權(quán)截圖如下)
- 設(shè)計(jì)師自習(xí)社區(qū) -TCC 設(shè)計(jì)情報(bào)局歡迎小伙伴加入,一起交流設(shè)計(jì)知識,了解全球設(shè)計(jì)資訊,鍛煉英文能力,發(fā)掘更多可能性~添加小助手微信,備注「社群」,即可加入讀者群。
我們致力于提供一個(gè)高質(zhì)量內(nèi)容的交流平臺。為落實(shí)國家互聯(lián)網(wǎng)信息辦公室“依法管網(wǎng)、依法辦網(wǎng)、依法上網(wǎng)”的要求,為完善跟帖評論自律管理,為了保護(hù)用戶創(chuàng)造的內(nèi)容、維護(hù)開放、真實(shí)、專業(yè)的平臺氛圍,我們團(tuán)隊(duì)將依據(jù)本公約中的條款對注冊用戶和發(fā)布在本平臺的內(nèi)容進(jìn)行管理。平臺鼓勵(lì)用戶創(chuàng)作、發(fā)布優(yōu)質(zhì)內(nèi)容,同時(shí)也將采取必要措施管理違法、侵權(quán)或有其他不良影響的網(wǎng)絡(luò)信息。
一、根據(jù)《網(wǎng)絡(luò)信息內(nèi)容生態(tài)治理規(guī)定》《中華人民共和國未成年人保護(hù)法》等法律法規(guī),對以下違法、不良信息或存在危害的行為進(jìn)行處理。
1. 違反法律法規(guī)的信息,主要表現(xiàn)為:
1)反對憲法所確定的基本原則;
2)危害國家安全,泄露國家秘密,顛覆國家政權(quán),破壞國家統(tǒng)一,損害國家榮譽(yù)和利益;
3)侮辱、濫用英烈形象,歪曲、丑化、褻瀆、否定英雄烈士事跡和精神,以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽(yù)、榮譽(yù);
4)宣揚(yáng)恐怖主義、極端主義或者煽動(dòng)實(shí)施恐怖活動(dòng)、極端主義活動(dòng);
5)煽動(dòng)民族仇恨、民族歧視,破壞民族團(tuán)結(jié);
6)破壞國家宗教政策,宣揚(yáng)邪教和封建迷信;
7)散布謠言,擾亂社會秩序,破壞社會穩(wěn)定;
8)宣揚(yáng)淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪;
9)煽動(dòng)非法集會、結(jié)社、游行、示威、聚眾擾亂社會秩序;
10)侮辱或者誹謗他人,侵害他人名譽(yù)、隱私和其他合法權(quán)益;
11)通過網(wǎng)絡(luò)以文字、圖片、音視頻等形式,對未成年人實(shí)施侮辱、誹謗、威脅或者惡意損害未成年人形象進(jìn)行網(wǎng)絡(luò)欺凌的;
12)危害未成年人身心健康的;
13)含有法律、行政法規(guī)禁止的其他內(nèi)容;
2. 不友善:不尊重用戶及其所貢獻(xiàn)內(nèi)容的信息或行為。主要表現(xiàn)為:
1)輕蔑:貶低、輕視他人及其勞動(dòng)成果;
2)誹謗:捏造、散布虛假事實(shí),損害他人名譽(yù);
3)嘲諷:以比喻、夸張、侮辱性的手法對他人或其行為進(jìn)行揭露或描述,以此來激怒他人;
4)挑釁:以不友好的方式激怒他人,意圖使對方對自己的言論作出回應(yīng),蓄意制造事端;
5)羞辱:貶低他人的能力、行為、生理或身份特征,讓對方難堪;
6)謾罵:以不文明的語言對他人進(jìn)行負(fù)面評價(jià);
7)歧視:煽動(dòng)人群歧視、地域歧視等,針對他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊;
8)威脅:許諾以不良的后果來迫使他人服從自己的意志;
3. 發(fā)布垃圾廣告信息:以推廣曝光為目的,發(fā)布影響用戶體驗(yàn)、擾亂本網(wǎng)站秩序的內(nèi)容,或進(jìn)行相關(guān)行為。主要表現(xiàn)為:
1)多次發(fā)布包含售賣產(chǎn)品、提供服務(wù)、宣傳推廣內(nèi)容的垃圾廣告。包括但不限于以下幾種形式:
2)單個(gè)帳號多次發(fā)布包含垃圾廣告的內(nèi)容;
3)多個(gè)廣告帳號互相配合發(fā)布、傳播包含垃圾廣告的內(nèi)容;
4)多次發(fā)布包含欺騙性外鏈的內(nèi)容,如未注明的淘寶客鏈接、跳轉(zhuǎn)網(wǎng)站等,誘騙用戶點(diǎn)擊鏈接
5)發(fā)布大量包含推廣鏈接、產(chǎn)品、品牌等內(nèi)容獲取搜索引擎中的不正當(dāng)曝光;
6)購買或出售帳號之間虛假地互動(dòng),發(fā)布干擾網(wǎng)站秩序的推廣內(nèi)容及相關(guān)交易。
7)發(fā)布包含欺騙性的惡意營銷內(nèi)容,如通過偽造經(jīng)歷、冒充他人等方式進(jìn)行惡意營銷;
8)使用特殊符號、圖片等方式規(guī)避垃圾廣告內(nèi)容審核的廣告內(nèi)容。
4. 色情低俗信息,主要表現(xiàn)為:
1)包含自己或他人性經(jīng)驗(yàn)的細(xì)節(jié)描述或露骨的感受描述;
2)涉及色情段子、兩性笑話的低俗內(nèi)容;
3)配圖、頭圖中包含庸俗或挑逗性圖片的內(nèi)容;
4)帶有性暗示、性挑逗等易使人產(chǎn)生性聯(lián)想;
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適;
6)炒作緋聞、丑聞、劣跡等;
7)宣揚(yáng)低俗、庸俗、媚俗內(nèi)容。
5. 不實(shí)信息,主要表現(xiàn)為:
1)可能存在事實(shí)性錯(cuò)誤或者造謠等內(nèi)容;
2)存在事實(shí)夸大、偽造虛假經(jīng)歷等誤導(dǎo)他人的內(nèi)容;
3)偽造身份、冒充他人,通過頭像、用戶名等個(gè)人信息暗示自己具有特定身份,或與特定機(jī)構(gòu)或個(gè)人存在關(guān)聯(lián)。
6. 傳播封建迷信,主要表現(xiàn)為:
1)找人算命、測字、占卜、解夢、化解厄運(yùn)、使用迷信方式治??;
2)求推薦算命看相大師;
3)針對具體風(fēng)水等問題進(jìn)行求助或咨詢;
4)問自己或他人的八字、六爻、星盤、手相、面相、五行缺失,包括通過占卜方法問婚姻、前程、運(yùn)勢,東西寵物丟了能不能找回、取名改名等;
7. 文章標(biāo)題黨,主要表現(xiàn)為:
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來誘導(dǎo)用戶;
2)內(nèi)容與標(biāo)題之間存在嚴(yán)重不實(shí)或者原意扭曲;
3)使用夸張標(biāo)題,內(nèi)容與標(biāo)題嚴(yán)重不符的。
8.「飯圈」亂象行為,主要表現(xiàn)為:
1)誘導(dǎo)未成年人應(yīng)援集資、高額消費(fèi)、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動(dòng)「飯圈」粉絲攀比炫富、奢靡享樂等行為
4)以號召粉絲、雇用網(wǎng)絡(luò)水軍、「養(yǎng)號」形式刷量控評等行為
5)通過「蹭熱點(diǎn)」、制造話題等形式干擾輿論,影響傳播秩序
9. 其他危害行為或內(nèi)容,主要表現(xiàn)為:
1)可能引發(fā)未成年人模仿不安全行為和違反社會公德行為、誘導(dǎo)未成年人不良嗜好影響未成年人身心健康的;
2)不當(dāng)評述自然災(zāi)害、重大事故等災(zāi)難的;
3)美化、粉飾侵略戰(zhàn)爭行為的;
4)法律、行政法規(guī)禁止,或可能對網(wǎng)絡(luò)生態(tài)造成不良影響的其他內(nèi)容。
二、違規(guī)處罰
本網(wǎng)站通過主動(dòng)發(fā)現(xiàn)和接受用戶舉報(bào)兩種方式收集違規(guī)行為信息。所有有意的降低內(nèi)容質(zhì)量、傷害平臺氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當(dāng)一個(gè)用戶發(fā)布違規(guī)內(nèi)容時(shí),本網(wǎng)站將依據(jù)相關(guān)用戶違規(guī)情節(jié)嚴(yán)重程度,對帳號進(jìn)行禁言 1 天、7 天、15 天直至永久禁言或封停賬號的處罰。當(dāng)涉及欺凌未成年人、危害未成年人身心健康、通過作弊手段注冊、使用帳號,或者濫用多個(gè)帳號發(fā)布違規(guī)內(nèi)容時(shí),本網(wǎng)站將加重處罰。
三、申訴
隨著平臺管理經(jīng)驗(yàn)的不斷豐富,本網(wǎng)站出于維護(hù)本網(wǎng)站氛圍和秩序的目的,將不斷完善本公約。
如果本網(wǎng)站用戶對本網(wǎng)站基于本公約規(guī)定做出的處理有異議,可以通過「建議反饋」功能向本網(wǎng)站進(jìn)行反饋。
(規(guī)則的最終解釋權(quán)歸屬本網(wǎng)站所有)