ShareChat แก้ไขปัญหาความหน่วงเพื่อเพิ่มการเลื่อนฟีด 60%

ข้อมูลเบื้องต้น

ShareChat เป็นแพลตฟอร์มโซเชียลมีเดียชั้นนำในอินเดียที่อนุญาตให้ผู้ใช้แชร์ความคิดเห็น บันทึกชีวิต และทำความรู้จักเพื่อนใหม่ในภาษาของตนเอง ฟีเจอร์อื่นๆ ได้แก่ ห้องแชทและการส่งข้อความส่วนตัว ซึ่งช่วยให้ผู้ใช้แชร์วิดีโอ มุกตลก เพลง และเนื้อหาโซเชียลอื่นๆ ที่อิงตามภาษาได้ ShareChat มีพันธกิจในการเป็นหัวหอกของการปฏิวัติอินเทอร์เน็ตในอินเดีย และกำลังเปลี่ยนแปลงวิธีที่ผู้ใช้อีกพันล้านคนจะโต้ตอบบนอินเทอร์เน็ต

แอปในตัวเลข

  • ยอดดาวน์โหลดกว่า 100 ล้านครั้ง
  • ผู้ใช้ที่ใช้งานอยู่รายเดือนกว่า 180 ล้านคน
  • ครีเอเตอร์กว่า 32 ล้านคน
  • 15 ภาษาอินเดียที่แตกต่างกัน
  • ~1.5 ล้านโพสต์ที่สร้างขึ้นทุกวัน

ความท้าทาย

เมื่อ ShareChat เติบโตขึ้นจนเป็นที่ชื่นชอบของผู้คนนับพันทุกวัน แอปก็ต้องเผชิญกับความท้าทายในการส่งเฟรมใหม่ๆ อย่างสม่ำเสมอ ซึ่งส่งผลให้เวลาในการตอบสนองไม่ดีและขัดขวางประสบการณ์ของผู้ใช้

ด้วยเหตุนี้ แอปจึงมีจำนวนเฟรมที่หลุดหรือล่าช้าเพิ่มขึ้น (หรือที่เรียกว่า "Jank") การแก้ไขปัญหา Jank เหล่านี้ด้วยการปรับปรุงเฟรมที่ช้าและหยุดนิ่งจึงมีความสำคัญอย่างยิ่งในการมอบประสบการณ์ที่ราบรื่นแก่ผู้ใช้ทั้งหมด นอกจากนี้ ยังมีบทบาทสำคัญในการทำให้ผู้ใช้ใช้เวลาในแอปมากขึ้น เพิ่มการมีส่วนร่วม และช่วยปรับปรุงคะแนนของ ShareChat ใน Android Play Store

วิธีที่พวกเขาทำ

ShareChat ร่วมมือกับทีมความสัมพันธ์กับนักพัฒนาแอปของ Google เพื่อลด Jank และสร้างผลลัพธ์ทางธุรกิจในเชิงบวกด้วยการปรับปรุงเฟรมที่ช้าและหยุดนิ่ง (Jank) ในแอป โดยเฉพาะอย่างยิ่ง ShareChat ได้มุ่งเน้นการปรับปรุงปัญหาต่อไปนี้

  • Shared RecyclerView Pool - จากการทำโปรไฟล์ เราพบว่าการสร้าง Viewholder ที่แตกต่างกันใช้เวลานานกว่า จึงได้สร้าง Shared RecyclerView Pool ขึ้นมาเพื่อลดเวลานั้น นอกจากนี้ ยังช่วยลดต้นทุนในการสร้าง Viewholder สำหรับฟีดที่คล้ายกันด้วย

  • การส่งเลย์เอาต์มากเกินไป - จากการสร้างโปรไฟล์ เรายังพบว่า Viewholder บางรายการขอ requestLayout เพิ่มเติม ในการเพิ่มประสิทธิภาพ เราได้อัปเดตโค้ดให้ใช้ค่าในเวลาที่สร้างแทนที่จะใช้ทุกครั้งที่มีการเชื่อมโยง จึงช่วยประหยัดค่าใช้จ่ายในการเรียกใช้ requestLayout เพิ่มเติม

  • การวาดทับ - ปรับเลย์เอาต์ให้ง่ายขึ้นเพื่อลดการซ้อนเลเยอร์และนำสีที่ตั้งค่าแยกกันสำหรับแต่ละเลเยอร์ออก

  • การลดระดับชั้น - สังเกตเห็นการขยายขนาดที่ยาวนานผ่านการจัดทำโปรไฟล์และการตรวจสอบหน้าจอจำนวนมากด้วยตนเอง เราได้ลดลำดับชั้นโดยใช้ ConstraintLayout เพื่อแก้ปัญหานี้

  • การเพิ่มยอดดูมากเกินไป - ระบุเวลาการเพิ่มที่นานเกินไปสำหรับยอดดูบางรายการขณะทำการโปรไฟล์ ระบบได้แปลงยอดดูเหล่านี้เป็นยอดดูแบบย่อแล้ว

  • นำงานหนักออกจากเทรด UI - การใช้โปรไฟล์เลอร์ช่วยให้สังเกตได้ว่ามีบางจุดที่เทรดหลักทำงานหนัก เช่น การสร้าง SpannableStringBuilder พร้อมการติดแท็กและการจัดรูปแบบของทุก RecyclerView Bind, การถอดรหัส BlurHash เป็นต้น เราได้นำงานเหล่านี้ออกจากเทรด UI และย้ายไปยังเทรดเบื้องหลัง

  • การย้ายข้อมูลจาก Rx ไปยัง Coroutine - การใช้หน่วยความจำยังทำให้เกิดการเรียก GC บ่อยครั้ง และมีจำนวนเธรดสูงมากผ่านเธรด RX มากกว่า 100 เธรด เราได้ย้ายกรณีการใช้งานหลายอย่างไปยัง Coroutine เพื่อแก้ไขปัญหาเหล่านี้

  • การใช้ Coil สำหรับการโหลดรูปภาพ - Glide ทำให้เกิดปัญหาขณะโหลดรูปภาพ โดยเฉพาะในคอมโพเนนต์ที่สร้างผ่าน Jetpack Compose นอกจากนี้ ยังพบว่าขณะโหลดรูปภาพใน LazyColumn แถบเกณฑ์การแสดงผลสูง เหตุการณ์เหล่านี้ทำให้เราตัดสินใจใช้ Coil ในการโหลดรูปภาพ

  • การล้างและปรับโครงสร้างโค้ดเก่า - การนำโค้ดเก่าและการทดสอบออกช่วยนำมุมมองที่ซ่อนไว้ที่ไม่จำเป็นออกจาก UI และช่วยเขียนหน้าจอบางส่วนใหม่ในวิธีที่ดีขึ้น

ผลลัพธ์

การวิเคราะห์จุดที่ควรปรับปรุงและระบุกลยุทธ์การเพิ่มประสิทธิภาพช่วยให้ ShareChat ปรับปรุงประสบการณ์โดยรวมของผู้ใช้ได้ พร้อมทั้งเพิ่มอัตราการมีส่วนร่วมและการให้คะแนนใน Play Store ด้านล่างนี้คือภาพรวมเชิงปริมาณของผลลัพธ์ที่ ShareChat ได้รับ

  • ลดเฟรม "แสดงผลช้า" ใน Play Store ประมาณ 45%
  • ลดเฟรมที่ "หยุดนิ่ง" ใน Play Store ได้ประมาณ 30%
  • อัตราเฟรมที่กระตุกสำหรับทุกๆ 10,000 เฟรมที่แสดงผลลดลงจาก 10.72% เป็น 3.98%
  • การเลื่อนฟีดเพิ่มขึ้น 60%
  • คะแนนโดยรวมใน Store เพิ่มขึ้นจากประมาณ 4.0 เป็น 4.3
  • การมีส่วนร่วมกับโพสต์เพิ่มขึ้น 10%

"ที่ ShareChat เป้าหมายของเราคือการเป็นแอปโซเชียลมีเดียที่ดีที่สุดที่สร้างความพึงพอใจให้แก่ผู้ใช้ ซึ่งหมายความว่าเราต้องเป็นแอปที่มีประสิทธิภาพดีที่สุดด้วย การทำงานร่วมกับทีมนักพัฒนาซอฟต์แวร์สัมพันธ์ของ Google ช่วยให้เราทราบถึง จุดที่ควรปรับปรุงในอุปกรณ์ของผู้ใช้ระดับล่างที่ใช้กันมากที่สุด เราได้เรียนรู้แนวทางปฏิบัติและเครื่องมือด้านประสิทธิภาพที่ดีที่สุดเพื่อระบุและแก้ไขเฟรมค้าง ความกระตุก การวาดทับ และ ANR"

- Vihaan Verma, ผู้จัดการฝ่ายวิศวกรรม ทีม Android ที่ ShareChat