NDTV 針對網站體驗核心指標進行最佳化調整,使 LCP 提升了 55%
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
NDTV 會針對網站體驗指標進行最佳化,藉此提升使用者體驗,進而提高留存率。
NDTV 是印度首屈一指的新聞電台和網站。根據網站體驗計畫,他們在一個月內就讓「最大內容繪製」(LCP) 這項最重要的使用者指標提升了 55%。這與跳出率降低 50% 有關。
突顯商機
由於每月的不重複使用者將近 2 億名,因此 NDTV 針對使用者體驗進行最佳化調整至關重要。雖然參與度佳 (業界平均值) 且同業中排名第一,NDTV 團隊還是認為還有改進空間,因此決定投入資源打造 Web Vitals 和其他產品異動,進一步提升參與度。
他們使用的做法
在 PageSpeed Insights、web.dev/measure 和 WebPageTest 等工具的協助下,NDTV 團隊分析了網站上的潛在改善區域。這些明確定義的最佳化提案可協助他們重新優先執行影響高的工作,立即達到網站體驗核心指標的改善結果。最佳化功能包括:
-
透過延遲第三方要求,優先處理最大的內容區塊,包括針對需捲動位置的廣告版位,以及同樣位於需捲動位置的社群網路嵌入項目發出廣告呼叫。
-
將靜態內容的快取從幾分鐘增加至 30 天。
-
使用
font-display
在字型下載時更快顯示文字。
-
為圖示使用向量圖形,而非 TrueType 字型 (TTF)。
-
延遲載入 JavaScript 和 CSS:載入具有最低 JS 和 CSS 的網頁,並在捲動頁面時延遲載入其餘的 JS 和 CSS。
-
預先連結給提供重要資產的來源。
影響程度
Web Vitals 提供團隊指標導向信號,因此能加快改善使用者體驗的程序。
在展開最佳化專案前,NDTV 團隊在 3.0 秒 (使用者第 75 個百分位數) 的基準資料基準測試自己的 LCP 分數 (根據 Chrome 使用者體驗報告欄位的資料)。經過最佳化專案之後,降到 1.6 秒。此外,他們也將累計版面配置位移 (CLS) 分數降至 0.05。WebPageTest 的其他指標 (例如「首次位元組時間」和「CDN」的有效使用) 已提升到 1 年級,
投資報酬率
儘管 ndtv.com 相當複雜且深度,但團隊一直以來都著重在效能和使用者體驗最佳做法上,此網站早已達到較低的 FID 和 CLS 分數。為了進一步改善使用者體驗,該團隊專注於 LCP,並在開始最佳化工作後的幾週內達到門檻。
整體業務成果
- 網站體驗核心指標經過最佳化之後,LCP 的 LCP 提升了 55%。
-
針對網站體驗核心指標進行最佳化後,網站的跳出率降低 50%,且有其他產品異動。
-
這麼做能直接提高內容的參與度和消費量,並按比例增加網站收益。
NDTV 長期遵循最佳做法,提供最優質的使用者體驗。我們目前將網站體驗指標評估視為產品開發過程中不可或缺的一環,而由於參與度提升,此指標也可達到良好的投資報酬率。
NDTV Group 技術與產品長 Kawaljit Singh Bedi
如需更多印度和東南亞的成功案例,請參閱「擴大網路規模個案研究」頁面。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2020-10-27 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2020-10-27 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2020-10-27 (世界標準時間)。"],[],[]]