NDTV ปรับปรุงประสบการณ์ของผู้ใช้ และคงผู้ใช้ไว้ด้วยการเพิ่มประสิทธิภาพให้เหมาะกับ Web Vitals
NDTV เป็นหนึ่งในสถานีข่าวและเว็บไซต์ชั้นนำของอินเดีย การทำตามโปรแกรม Web Vitals ทำให้บริษัทปรับปรุงเมตริกผู้ใช้ที่สำคัญที่สุดอย่างหนึ่งอย่าง Largest Contentful Paint (LCP) ได้ถึง 55% ในเวลาเพียงเดือนเดียว ซึ่งมีความสัมพันธ์กับ อัตราตีกลับที่ลดลง 50%
55%
LCP ที่เพิ่มขึ้น
50%
การลดลงของอัตราตีกลับ
ไฮไลต์โอกาส
ในแต่ละเดือน NDTV มีผู้ใช้ที่ไม่ซ้ำกันเกือบ 200 ล้านคน เราจำเป็นต้องปรับปรุงคุณภาพของประสบการณ์ของผู้ใช้ แม้ว่าอัตราการมีส่วนร่วมจะสูงกว่าค่าเฉลี่ยของอุตสาหกรรมและสูงที่สุดในบรรดาบริษัทในกลุ่มเดียวกัน แต่ทีม NDTV ก็ยังเล็งเห็นโอกาสในการปรับปรุงและตัดสินใจลงทุนใน Web Vitals ควบคู่กับการเปลี่ยนแปลงผลิตภัณฑ์อื่นๆ เพื่อปรับปรุงอัตราการมีส่วนร่วมให้สูงขึ้นไปอีก
แนวทางที่พวกเขาใช้
ทีม NDTV ได้วิเคราะห์ส่วนที่เป็นไปได้ในการปรับปรุงบนเว็บไซต์ได้ด้วยเครื่องมืออย่าง PageSpeed Insights, web.dev/measure และ WebPageTest แนวคิดการเพิ่มประสิทธิภาพที่กำหนดไว้อย่างชัดเจนเหล่านี้ช่วยให้บริษัทจัดลำดับความสำคัญของงานที่มีผลกระทบสูงได้อีกครั้งและสร้างผลลัพธ์ในการปรับปรุง Core Web Vitals ได้ทันที การเพิ่มประสิทธิภาพที่รวมถึง
- ให้ความสำคัญกับการบล็อกเนื้อหาที่ใหญ่ที่สุดโดยถ่วงเวลาคำขอของบุคคลที่สาม รวมถึงการเรียกโฆษณาสำหรับช่องโฆษณาครึ่งหน้าล่าง และการฝังโซเชียลเน็ตเวิร์กซึ่งอยู่ครึ่งหน้าล่างด้วย
- การเพิ่มการแคชเนื้อหาแบบคงที่จาก 2-3 นาทีเป็น 30 วัน
-
การใช้
font-display
เพื่อแสดงข้อความได้เร็วขึ้นขณะดาวน์โหลดแบบอักษร - การใช้กราฟิกเวกเตอร์สำหรับไอคอนแทน TrueType Fonts (TTF)
- การโหลดแบบ Lazy Loading JavaScript และ CSS: โหลดหน้าเว็บด้วย JS และ CSS ขั้นต่ำที่เป็นไปได้ จากนั้นโหลด JS และ CSS ที่เหลือเมื่อเลื่อนหน้าเว็บ
- การเชื่อมต่อล่วงหน้ากับต้นทางที่ส่งเนื้อหาที่สำคัญ
![สรุปการเพิ่มประสิทธิภาพ: Largest Contentful Paint, การแคช, CSS, กราฟิกเวกเตอร์, JS และ CSS ที่โหลดแบบ Lazy Loading, การเชื่อมต่อล่วงหน้า](https://web.dev/static/case-studies/ndtv/image/a-summary-the-optimizati-b938d496646d5.png?authuser=6&hl=th)
มีอิทธิพล
โดย Web Vitals ช่วยให้ทีมมีสัญญาณที่อิงจากเมตริกเพื่อช่วยเร่งกระบวนการปรับปรุงประสบการณ์ของผู้ใช้
ก่อนที่จะเริ่มโปรเจ็กต์การเพิ่มประสิทธิภาพ ทีม NDTV ได้เปรียบเทียบคะแนน LCP ที่ 3.0 วินาที (สำหรับเปอร์เซ็นไทล์ที่ 75 ของผู้ใช้ โดยอิงจากข้อมูลในช่องรายงานประสบการณ์ของผู้ใช้ Chrome) หลังโปรเจ็กต์การเพิ่มประสิทธิภาพ ทรัพยากรลดลงเหลือ 1.6 วินาที นอกจากนี้ยังลดคะแนน Cumulative Layout Shift (CLS) เหลือ 0.05 เมตริกอื่นๆ ใน WebPageTest เช่น "First Byte Time" และ "การใช้ CDN อย่างมีประสิทธิภาพ" ได้รับการปรับปรุงเป็นเกรด A
![คะแนน CLS 0.05](https://web.dev/static/case-studies/ndtv/image/005-cls-score-63ecddcee9427.png?authuser=6&hl=th)
ผลตอบแทนจากการลงทุน
ถึงแม้ว่า ndtv.com จะมีความซับซ้อนและซับซ้อน แต่เว็บไซต์ก็ได้รับคะแนน FID และ CLS ในระดับดีอยู่แล้ว นั่นเป็นเพราะทีมงานเน้นเรื่องประสิทธิภาพและแนวทางปฏิบัติที่ดีที่สุดเกี่ยวกับ UX มาโดยตลอด เพื่อปรับปรุงประสบการณ์ของผู้ใช้ให้ดีขึ้น ทีมงานจึงมุ่งเน้นที่ LCP และดำเนินการให้มีคุณสมบัติตามเกณฑ์ได้ภายใน 2-3 สัปดาห์หลังจากที่เริ่มดำเนินการเพิ่มประสิทธิภาพ
ผลลัพธ์ทางธุรกิจโดยรวม
- LCP เพิ่มขึ้น 55% ซึ่งเป็นผลมาจากการเพิ่มประสิทธิภาพสำหรับ Core Web Vitals
- อัตราตีกลับในเว็บไซต์ลดลง 50% หลังจากเพิ่มประสิทธิภาพสำหรับ Core Web Vitals รวมถึงการเปลี่ยนแปลงอื่นๆ ในผลิตภัณฑ์
- เพิ่มการมีส่วนร่วมและการบริโภคเนื้อหาโดยตรง รวมถึงทำให้รายได้ของเว็บไซต์เพิ่มขึ้นตามสัดส่วน
![LCP เพิ่มขึ้น 55% อัตราตีกลับลดลง 50% เพิ่มการมีส่วนร่วมและการบริโภค](https://web.dev/static/case-studies/ndtv/image/55-improvement-lcp-50-bbfb39b0c8352.png?authuser=6&hl=th)
NDTV ทำตามแนวทางปฏิบัติแนะนำมาอย่างยาวนานเพื่อมอบประสบการณ์ของผู้ใช้ที่มีคุณภาพสูง เราถือว่าการวัด Web Vitals เป็นส่วนสำคัญของการพัฒนาผลิตภัณฑ์ในขณะนี้ และการเพิ่มขึ้นของการมีส่วนร่วมที่เราได้เห็นก็ช่วยให้ ROI ที่ดีได้
Kawaljit Singh Bedi ประธานเจ้าหน้าที่ฝ่ายเทคโนโลยีและผลิตภัณฑ์ของ NDTV Group
ดูเรื่องราวความสำเร็จเพิ่มเติมจากอินเดียและเอเชียตะวันออกเฉียงใต้ในหน้ากรณีศึกษาการใช้อินเทอร์เน็ต